Header
The flexbox utilities can be used to put together a flexbox grid.
Use .flex-row
to position flex items horizontally from left to right.
<div class="flex flex-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Use .flex-row-reverse
to position flex items horizontally in the opposite direction.
<div class="flex flex-row-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Use .flex-column
to position flex items vertically from top to bottom.
<div class="flex flex-column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Use .flex-column-reverse
to position flex items vertically in the opposite direction.
<div class="flex flex-column-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Use .flex-no-wrap
to prevent flex items from wrapping.
<div class="flex flex-nowrap">
<div class="w-30p flex-none">1</div>
<div class="w-40p flex-none">2</div>
<div class="w-30p flex-none">3</div>
</div>
Use .flex-wrap
to allow flex items to wrap normally.
<div class="flex flex-wrap">
<div class="w-30p flex-none">1</div>
<div class="w-40p flex-none">2</div>
<div class="w-30p flex-none">3</div>
</div>
Use .flex-wrap-reverse
to wrap flex items in the reverse direction.
<div class="flex flex-wrap-reverse">
<div class="w-30p flex-none">1</div>
<div class="w-40p flex-none">2</div>
<div class="w-30p flex-none">3</div>
</div>
Flex is the shorthand for flex-grow
, flex-shrink
and flex-basis
combined.
Use .flex-auto
to allow a flex item to grow and shrink in accordance to it's initial size.
<div class="flex">
<div class="flex-auto">...</div>
<div class="flex-auto">...</div>
<div class="flex-auto">...</div>
</div>
Use .flex-1
to allow a flex item to grow and shrink as needed irrespective of it's intital size.
<div class="flex">
<div class="flex-1">...</div>
<div class="flex-1">...</div>
<div class="flex-1">...</div>
</div>
Use .flex-none
to prevent a flex item from either growing or shrinking.
<div class="flex">
<div class="flex-1">...</div>
<div class="flex-none">...</div>
<div class="flex-1">...</div>
</div>
Use .flex-no-shrink
to prevent a flex item from shrinking.
<div class="flex">
<div class="flex-none">...</div>
<div class="flex-no-shrink">...</div>
<div class="flex-1">...</div>
</div>
Use .flex-first
and .flex-last
to render flex items in a different order than their natural DOM order.
<div class="flex flex-row">
<div>1</div>
<div class="flex-last">2</div>
<div class="flex-first">3</div>
</div>
Used to control how flex items are position along the container's cross/vertical/(Y) axis.
Use .flex-stretch
to stretch items to fill the container's width.
<div class="flex flex-row flex-stretch">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
</div>
Use .flex-top
to align items to the start of the container's cross/vertical axis.
<div class="flex flex-row flex-top">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
</div>
Use .flex-middle
to align items to the start of the container's cross/vertical axis.
<div class="flex flex-row flex-middle">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
</div>
Use .flex-bottom
to align items to the start of the container's cross/vertical axis.
<div class="flex flex-row flex-bottom">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
</div>
Used to control how lines are positioned in multi-line flex containers.
Use .flex-wrap-stretch
for the lines to stretch and take up the remaining space.
<div class="flex flex-wrap flex-wrap-stretch">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
<div class="flex-1">4</div>
</div>
Use .flex-wrap-top
to pack lines at the start of cross/vertical axis in a flex container.
<div class="flex flex-wrap flex-wrap-top">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
<div class="flex-1">4</div>
</div>
Use .flex-wrap-middle
to pack lines at the center of cross/vertical axis in a flex container.
<div class="flex flex-wrap flex-wrap-middle">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
<div class="flex-1">4</div>
</div>
Use .flex-wrap-bottom
to pack lines at the end of cross/vertical axis in a flex container.
<div class="flex flex-wrap flex-wrap-bottom">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
<div class="flex-1">4</div>
</div>
Use .flex-wrap-between
to distribute lines in a way that there is equal amount of space between each line.
<div class="flex flex-wrap flex-wrap-between">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
<div class="flex-1">4</div>
</div>
Use .flex-wrap-around
to distribute lines in a way that there is equal amount of space around each line.
<div class="flex flex-wrap flex-wrap-around">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1">3</div>
<div class="flex-1">4</div>
</div>
Used to control how flex items are positioned along the container's main/horizontal/(X) axis.
Use .flex-start
or .flex-left
to justify items against the start of the container's main/horizontal axis.
<div class="flex flex-start">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Use .flex-end
or .flex-right
to justify items against the end of the container's main/horizontal axis.
<div class="flex flex-end">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Use .flex-center
to justify items along the center of the container's main/horizontal axis.
<div class="flex flex-center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Use .flex-between
to justify items along the container's main/horizontal axis in a way that there is an equal amount of space between each item.
<div class="flex flex-between">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Use .flex-around
to justify items along the container's main/horizontal axis in a way that there is an equal amount of space around each item.
<div class="flex flex-around">
<div>1</div>
<div>2</div>
<div>3</div>
</div>