CSS Utility Classes Flex
Apply display: flex using CSS or the _display:flex helper to create a flexbox container and transform direct children elements into flex items.
<template>
<div class="_display:flex!">I'm a flexbox container</div>
</template>
<template>
<div class="_display:inline-flex!">I'm an inline flexbox container</div>
</template>
Flexbox utilities can also be applied responsively. Here are the available helper classes::
._display:flex._display:inline-flex
Set the direction of flex items in a flex container with direction utilities. The browser default is flex-direction: row, therefore the row helper won't be always necessary. However, when targeting various screen sizes, you may encounter situations where you needed to explicitly set this value.
Setting a row direction will cause the flexbox items to flow horizontally.
<template>
<div class="_display:flex! _flex-direction:row!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
</div>
<div class="_display:flex! _flex-direction:row-reverse!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
</div>
</template>
Setting a column direction will cause the flexbox items to flow vertically.
<template>
<div class="_display:flex! _flex-direction:column!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
</div>
<div class="_display:flex! _flex-direction:column-reverse!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
</div>
</template>
Flexbox direction utilities can also be applied responsively. Here are the available helper classes::
._flex-direction:row._flex-direction:row-reverse._flex-direction:column._flex-direction:column-reverse
Use _justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis if flex-direction: row, y-axis if flex-direction: column).
<template>
<div class="_display:flex! _justify-content:start!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="_display:flex! _justify-content:center!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="_display:flex! _justify-content:end!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="_display:flex! _justify-content:space-between!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="_display:flex! _justify-content:space-around!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
</template>
Flexbox justify content utilities can also be applied responsively. Here are the available helper classes::
._justify-content:start or ._justify-content:flex-start._justify-content:end or ._justify-content:flex-end._justify-content:center._justify-content:space-between._justify-content:space-around
Use _align-items utilities on flexbox containers to change the alignment of flex items on the secondary axis (the y-axis if flex-direction: row, x-axis if flex-direction: column).
<template>
<div class="_display:flex! _align-items:start!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="_display:flex! _align-items:center!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="_display:flex! _align-items:end!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="_display:flex! _align-items:baseline!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
<div class="_display:flex! _align-items:stretch!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>
</template>
Note: The wrappers of the items above have a fixed height.
Flexbox align items utilities can also be applied responsively. Here are the available helper classes::
._align-items:start or ._align-items:flex-start._align-items:end or ._align-items:flex-end._align-items:center._align-items:baseline._align-items:stretch
Use _align-self utilities on a flexbox item to change the alignment of the item on the secondary axis (the y-axis if flex-direction: row, x-axis if flex-direction: column).
<template>
<div class="_display:flex!">
<div>Flex Item</div>
<div class="_align-self:start!">Aligned Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex!">
<div>Flex Item</div>
<div class="_align-self:center!">Aligned Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex!">
<div>Flex Item</div>
<div class="_align-self:end!">Aligned Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex!">
<div>Flex Item</div>
<div class="_align-self:baseline!">Aligned Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex!">
<div>Flex Item</div>
<div class="_align-self:stretch!">Aligned Flex Item</div>
<div>Flex Item</div>
</div>
</template>
Flexbox align self utilities can also be applied responsively. Here are the available helper classes::
._align-self:start or ._align-self:flex-start._align-self:end or ._align-self:flex-end._align-self:center._align-self:baseline._align-self:stretch
Use _align-content utilities on flexbox containers to align flex content on the secondary axis. You can use one of start, end, center, between, around, or stretch.
For demonstration purposes, the examples below use ._flex-wrap:wrap, an increased height, and large number of items.
<template>
<div class="_display:flex! _flex-wrap:wrap! _align-content:start!" style="max-width: 600px">
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex! _flex-wrap:wrap! _align-content:center!" style="max-width: 600px">
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex! _flex-wrap:wrap! _align-content:end!" style="max-width: 600px">
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div
class="_display:flex! _flex-wrap:wrap! _align-content:space-between!"
style="max-width: 600px"
>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div
class="_display:flex! _flex-wrap:wrap! _align-content:space-around!"
style="max-width: 600px"
>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex! _flex-wrap:wrap! _align-content:stretch!" style="max-width: 600px">
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
</template>
Flexbox shrink and grow utilities can also be applied responsively. Here are the available helper classes::
._align-content:start or ._align-content:flex-start._align-content:center or ._align-content:flex-center._align-content:end._align-content:space-between._align-content:space-around._align-content:space-stretch
Use _flex:fill utilities on a series of flexbox items to force them into widths equal to their content.
<template>
<div class="_display:flex!">
<div class="_flex:fill!">Flex Item with a lot of content</div>
<div class="_flex:fill!">Flex Item</div>
<div class="_flex:fill!">Flex Item</div>
</div>
</template>
Flexbox fill utilities can also be applied responsively. Here are the available helper classes::
Use _flex-grow:1 and _flex-grow:0 utilities to toggle a flex item’s ability to grow to fill available space. In the example below. A value of 1 uses all available space it can, while allowing the remaining two flex items their necessary space.
<template>
<div class="_display:flex!">
<div class="_flex-grow:1!">Flex Grow 1 Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
</template>
Use the _flex-shrink:1 and _flex-shrink:0 utilities to toggle a flex item’s ability to shrink if necessary. This can be used together with a width: 100% div to make some flex items cover as little space as possible.
<template>
<div class="_display:flex!">
<div class="_width:100!">Flex Item</div>
<div class="_flex-shrink:1!">Flex Shrink</div>
</div>
</template>
Flexbox shrink and grow utilities can also be applied responsively. Here are the available helper classes::
._flex-grow:0._flex-grow:1._flex-shrink:0._flex-shrink:1
When you mix flex alignments with auto margins you can obtain some pretty unique and useful layouts.
<template>
<div class="_display:flex!">
<div class="_margin-right:auto!">Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex!">
<div>Flex Item</div>
<div>Flex Item</div>
<div class="_margin-left:auto!">Flex Item</div>
</div>
<div class="_display:flex! _flex-direction:column!" style="height: 200px">
<div class="_margin-bottom:auto!">Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex! _flex-direction:column!" style="height: 200px">
<div>Flex Item</div>
<div>Flex Item</div>
<div class="_margin-top:auto!">Flex Item</div>
</div>
</template>
Change how flex items wrap in a flex container. To have wrapping disabled (browser default) use _flex-wrap:nowrap. To enable wrapping, use _flex-wrap:wrap, or reverse wrapping with _flex-wrap:wrap-reverse.
<template>
<div class="_display:flex! _flex-wrap:nowrap!" style="max-width: 180px">
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex! _flex-wrap:wrap!" style="max-width: 400px">
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
<div class="_display:flex! _flex-wrap:wrap-reverse!" style="max-width: 400px">
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
<div>Flex Item</div>
</div>
</template>
Flexbox shrink and grow utilities can also be applied responsively. Here are the available helper classes::
._flex-wrap:wrap or _flex:wrap._flex-wrap:wrap-reverse or _flex:wrap-reverse._flex-wrap:nowrap or _flex:nowrap
You can change the order of flex items with a handful of order utilities. You can use _order:first to make an item first or _order:last to make an item last. You can use _order:{value} (where value can be a number from 0 to 12) to change the order of elements to a specific position.
<template>
<div class="_display:flex!">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div class="_order:first!">Flex Item 4</div>
</div>
<div class="_display:flex!">
<div class="_order:last!">Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
</div>
<div class="_display:flex!">
<div class="_order:4!">Flex Item 1</div>
<div class="_order:3!">Flex Item 2</div>
<div class="_order:2!">Flex Item 3</div>
<div class="_order:1!">Flex Item 4</div>
</div>
</template>
Flexbox shrink and grow utilities can also be applied responsively. Here are the available helper classes::
._order:first._order:last._order:{0-12}