Flex
Where in flex-box to align, relative to extra space
Align Content
Usage
/* Format */
.u-align-content--{alignment} {}
/* Examples & modifiers */
.u-align-content--start {}
.u-align-content--end {}
.u-align-content--center {}
.u-align-content--stretch {}
.u-align-content--around {}| Modifier | Values | Description |
|---|---|---|
|
alignment
|
start, end, center, stretch, around | Where in flex-box to align, relative to extra space |
Supports responsive suffix (e.g. u-align-content--{alignment}@{sm, md, lg}).
Preview
Preview
Align Items
Usage
/* Format */
.u-align-items--{alignment} {}
/* Examples & modifiers */
.u-align-items--start {}
.u-align-items--end {}
.u-align-items--center {}
.u-align-items--stretch {}
.u-align-items--baseline {}| Modifier | Values | Description |
|---|---|---|
|
alignment
|
start, end, center, stretch, baseline | Where in flex-box to align items |
Supports responsive suffix (e.g. u-align-items--{alignment}@{sm, md, lg}).
Preview
Preview
Align Self
Usage
/* Format */
.u-align-self--{alignment} {}
/* Examples & modifiers */
.u-align-self--start {}
.u-align-self--end {}
.u-align-self--center {}
.u-align-self--stretch {}| Modifier | Values | Description |
|---|---|---|
|
alignment
|
start, end, center, stretch | Where in flex-box to align specific element |
Supports responsive suffix (e.g. u-align-self--{alignment}@{sm, md, lg}).
Preview
Preview
Flex Direction
Usage
/* Format */
.u-flex-direction--{axis}--{order} {}
/* Examples & modifiers */
.u-flex-direction--row--reverse {}
.u-flex-direction--column--reverse {}| Modifier | Values | Description |
|---|---|---|
|
axis
|
row, column | The direction of the flex, either horizontal or vertical |
|
order
|
reverse | Reverses order |
Supports responsive suffix (e.g. u-flex-direction--{axis}--{order}@{sm, md, lg}).
Preview
Preview
Flex Grow
Usage
/* Format */
.u-flex-grow--{priority} {}
/* Examples & modifiers */
.u-flex-grow--0 {}
.u-flex-grow--1 {}| Modifier | Values | Description |
|---|---|---|
|
priority
|
0, 1 | The priority in which the elements grow |
Supports responsive suffix (e.g. u-flex-grow--{priority}@{sm, md, lg}).
Preview
Preview
Flex Shrink
Usage
/* Format */
.u-flex-shrink--{priority} {}
/* Examples & modifiers */
.u-flex-shrink--0 {}
.u-flex-shrink--1 {}| Modifier | Values | Description |
|---|---|---|
|
priority
|
0, 1 | The priority in which the elements shrink |
Supports responsive suffix (e.g. u-flex-shrink--{priority}@{sm, md, lg}).
Preview
Preview
Flex Wrap
Usage
/* Format */
.u-flex-wrap--{break} {}
/* Examples & modifiers */
.u-flex-wrap--nowrap {}
.u-flex-wrap--wrap-reverse {}| Modifier | Values | Description |
|---|---|---|
|
break
|
nowrap, wrap-reverse | How to break overflowing items |
Supports responsive suffix (e.g. u-flex-wrap--{break}@{sm, md, lg}).
Preview
Preview
Gridgap
Usage
/* Format */
.u-flex--gridgap {}
/* Examples & modifiers */Justify Content
Usage
/* Format */
.u-justify-content--{alignment} {}
/* Examples & modifiers */
.u-justify-content--start {}
.u-justify-content--end {}
.u-justify-content--center {}
.u-justify-content--space-between {}
.u-justify-content--space-around {}
.u-justify-content--space-evenly {}| Modifier | Values | Description |
|---|---|---|
|
alignment
|
start, end, center, space-between, space-around, space-evenly | How to distribute items inside flex-box |
Supports responsive suffix (e.g. u-justify-content--{alignment}@{sm, md, lg}).
Preview
Preview
Order
Usage
/* Format */
.u-order--{item-order} {}
/* Examples & modifiers */
.u-order--{item-order}--0 {}
.u-order--{item-order}--1 {}
.u-order--{item-order}--2 {}
.u-order--{item-order}--3 {}
.u-order--{item-order}--4 {}
.u-order--{item-order}--5 {}
.u-order--{item-order}--6 {}
.u-order--{item-order}--7 {}
.u-order--{item-order}--8 {}
.u-order--{item-order}--9 {}
.u-order--{item-order}--10 {}
.u-order--{item-order}--11 {}
.u-order--{item-order}--12 {}| Modifier | Values | Description |
|---|---|---|
|
item-order
|
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | Where in order the item is |
Supports responsive suffix (e.g. u-order--{item-order}@{sm, md, lg}).
Preview
Preview