Design tokens

Flex

USWDS flex tokens provide simple options for setting the flex width of an item.

Flex tokens

Token Example Value
1
1 0 0
2
2 0 0
3
3 0 0
4
4 0 0
5
5 0 0
6
6 0 0
7
7 0 0
8
8 0 0
9
9 0 0
10
10 0 0
11
11 0 0
12
12 0 0
'auto'
auto
'fill'
1 0 0

Using flex tokens

Your context and coding style determine how you access USWDS flex tokens in code.

Context Usage Example
function flex(flex) flex: flex('fill')
mixin u-flex(flex) @include u-flex('fill')
setting flex $theme-nav-column-flex: 4
utility .flex-flex .flex-fill