This is a preview, you can find the current version here.
Last updated: 12/5/2025
Flex
Stacks provides extensive utility and helper classes for flex layouts. If you are new to flex layouts, check out this interactive introduction by Joshua Comeau.
Stacks provides extensive utility and helper classes for flex layouts. If you are new to flex layouts, check out this interactive introduction by Joshua Comeau.
Basic flex layout
A flex layout is initiated with the .d-flex class. By default, display: flex; starts a non-wrapping row. To convert it to a column, apply the .fd-column atomic class.
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex fd-column">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.flex--item
.flex--item
.flex--item
.flex--item
Fluid
By default, all flex items will only be as wide as their content. If you would like a flex item or all the flex items to fill the remaining space, apply the .fl-grow1 to the individual item, or .flex__fl-equal to the parent to apply to all children.
Fluid examples
<div class="d-flex">
<div class="flex--item fl-grow1">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex flex__fl-equal">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.flex--item.fl-grow1
.flex--item
.flex--item
.flex--item
.flex--item
Fixed cells
You can either fix the width of an individual element or fix the width of all child elements within a parent container by setting the width on the parent. The cell widths are based on a 12-column flex layout system.
Fixed classes
| Individual Width | Uniform Width | Output |
|---|---|---|
.flex--item1 | .flex__allitems1 | flex-basis: 8.333333333%; |
.flex--item2 | .flex__allitems2 | flex-basis: 16.666666667%; |
.flex--item3 | .flex__allitems3 | flex-basis: 24.999999999%; |
.flex--item4 | .flex__allitems4 | flex-basis: 33.333333332%; |
.flex--item5 | .flex__allitems5 | flex-basis: 41.666666665%; |
.flex--item6 | .flex__allitems6 | flex-basis: 50%; |
.flex--item7 | .flex__allitems7 | flex-basis: 58.333333331%; |
.flex--item8 | .flex__allitems8 | flex-basis: 66.666666664%; |
.flex--item9 | .flex__allitems9 | flex-basis: 74.999999997%; |
.flex--item10 | .flex__allitems10 | flex-basis: 83.33333333%; |
.flex--item11 | .flex__allitems11 | flex-basis: 91.666666663%; |
.flex--item12 | .flex__allitems12 | flex-basis: 100%; |
Fixed examples
<div class="d-flex">
<div class="flex--item2">…</div>
<div class="flex--item10">…</div>
</div>
<div class="d-flex">
<div class="flex--item3">…</div>
<div class="flex--item6">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex flex__allitems4">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.flex--item[x]
.flex--item[x] and standard .flex--item
.d-flex.flex__allitems4
Helpers
We have a few helper classes you can add to a .d-flex container that affect the child .flex—items.
Helper classes
| Class | Definition | Responsive? |
|---|---|---|
.flex__center | Centers child elements along a parent's main and cross axis. | |
.flex__fl-shrink0 | Disables shrinking from all child elements | |
.flex__fl-equal | Makes each child element grow equally |
Helpers examples
<div class="d-flex flex__center">
<div class="flex--item">…</div>
</div>
<div class="d-flex flex__fl-shrink0">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex flex__fl-equal">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.flex__center
.flex__fl-shrink0
.flex__fl-equal
Nested flex layouts
Flex layouts can be nested within each other. This allows you to create unique, custom layouts without needing to create new, custom code or override existing styles.
Nested examples
<div class="d-flex">
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="flex--item2">…</div>
<div class="flex--item2">…</div>
</div>.flex--item
.flex--item
.flex--item2
.flex--item2
Gutters
Deprecation: gutters will be removed in a future release.
Please use gap classes to set spacing on flex items.
Sometimes gutters are desired between cells. To do so apply the appropriate class to the parent wrapper. The gutter applies a margin to all sides. The sizes available are the same as the spacing units.
Gutter classes
| Class | Output |
|---|---|
.gs2 | 2px |
.gs4 | 4px |
.gs6 | 6px |
.gs8 | 8px |
.gs12 | 12px |
.gs16 | 16px |
.gs24 | 24px |
.gs32 | 32px |
.gs48 | 48px |
.gs64 | 64px |
.gsx | Applies margins only to left and right |
.gsy | Applies margins only to top and bottom |
Gutter examples
<div class="d-flex flex__fl-equal gs16">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex flex__fl-equal gs16 gsx">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex flex__fl-equal gs16 gsy">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.gs16
.gs16
.gs16
.gs16
.gs16.gsx -- Row gutters only
.gs16.gsx -- Row gutters only
.gs16.gsx -- Row gutters only
.gs16.gsx -- Row gutters only
.gs16.gsy -- Column gutters only
.gs16.gsy -- Column gutters only
.gs16.gsy -- Column gutters only
.gs16.gsy -- Column gutters only
Nested gutters
Note: Nested flex layouts with gutter spacing will conflict with each other in unpredictable ways. TL;DR? Don't stick a .d-flex directly into a .d-flex, instead stick a .d-flex into a .flex--item like so:
If you are nesting a flex layout with gutter spacing into another flex layout that also has gutter spacing, the child’s parent wrapper margins will be overwritten by the parent. To have the child flex layout’s gutter spacing honored, you have to put the child flex layout within a .flex—item wrapper first. This allows the parent and child flex layout gutter spacing to act correctly without interfering with each other.
Do
<div class="d-flex gs32">
<div class="flex--item">…</div>
<div class="flex--item">
<div class="d-flex gs16">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
</div>
</div>.flex--item
.flex--item
.flex--item
Don’t
<div class="d-flex gs32">
<div class="flex--item">…</div>
<div class="d-flex gs16">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
</div>.flex--item
.flex--item
.flex--item
Flex direction
On a flex container, you can set the direction of the child items.
Flex direction classes
| Class | Definition | Responsive? |
|---|---|---|
.fd-row | Sets the flex direction to a row. | |
.fd-row-reverse | Reverses the row flex direction. | |
.fd-column | Sets the flex direction to a column. | |
.fd-column-reverse | Reverses the column flex direction. |
Flex direction examples
<div class="d-flex fd-row">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex fd-row-reverse">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex fd-column">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex fd-column-reverse">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.fd-row
.fd-row-reverse
.fd-column
.fd-column-reverse
Flex wrap
On a flex container, you can control if the children wrap.
Flex wrap classes
| Class | Definition | Responsive? |
|---|---|---|
.fw-wrap | Wraps the child cells within a parent. | |
.fw-reverse | Reverses the wrap direction. | |
.fw-nowrap | Removes the wrap direction. |
Flex wrap examples
<div class="d-flex fw-wrap">
<div class="flex--item">…</div>
…
</div>
<div class="d-flex fw-wrap-reverse">
<div class="flex--item">…</div>
…
</div>
<div class="d-flex fw-nowrap">
<div class="flex--item">…</div>
…
</div>.fw-wrap
.fw-reverse
.fw-nowrap
Justify content
Flex items can be controlled with atomic classes on the container’s main axis. This means controlling how a .flex—item is aligned left to right when in an .fd-row, and top and bottom in an .fd-column.
Justify content classes
| Class | Definition | Responsive? |
|---|---|---|
.jc-center | Centers child elements along the parent's main axis. | |
.jc-end | Aligns child elements at the end of the parent's main axis. | |
.jc-space-around | Equally distributes the remaining space around child elements. Note that this doesn't mean the spaces are visually equal, but that the same space unit is applied to both sides of a child element. The first item would have one unit of space against the container edge, but the next item would have two units of space between itself and the first item. | |
.jc-space-between | Evenly distributes the space between child elements along a parent's main axis with the first item starting on the start line and the last item on the end line. | |
.jc-space-evenly | The spacing between any two items (and spacing between the edges) are equal. | |
.jc-start | Aligns child elements at the start of the parent's main axis. |
Justify content examples
<div class="d-flex jc-center">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex jc-end">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex jc-space-around">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex jc-space-between">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex jc-space-evenly">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex jc-start">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.jc-center
.jc-end
.jc-space-around
.jc-space-between
.jc-space-evenly
.jc-start
Align items
Flex items can be controlled with atomic classes on the container’s cross axis. This means controlling how a .flex—item is aligned top to bottom when in an .fd-row, and left to right in an .fd-column.
Align items classes
| Class | Definition | Responsive? |
|---|---|---|
.ai-baseline | Aligns child elements along the baseline of a parent's cross axis. | |
.ai-center | Centers child elements along the parent's cross axis. | |
.ai-end | Places child elements at the end of the parent's cross axis. | |
.ai-start | Places child elements at the start of the parent's cross axis. | |
.ai-stretch | Stretches child elements along the parent's cross axis. |
Align items examples
<div class="d-flex ai-baseline">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ai-center">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ai-end">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ai-start">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ai-stretch">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.ai-baseline
.ai-center
.ai-end
.ai-start
.ai-stretch
Align content
Flex items can be controlled with atomic classes on the container’s cross axis.
Align content classes
| Class | Definition | Responsive? |
|---|---|---|
.ac-center | Distributes child elements starting from the center along a parent's cross axis. This only works with more than one line. | |
.ac-end | Distributes child elements starting from the end along a parent's cross axis. This only works with more than one line. | |
.ac-space-around | Distributes child elements with space around along a parent's cross axis. This only works with more than one line. | |
.ac-space-between | Distributes child elements with space between along a parent's cross axis. This only works with more than one line. | |
.ac-start | Distributes child elements starting from the start along a parent's cross axis. This only works with more than one line. | |
.ac-stretch | Distributes child elements stretching them along a parent's cross axis. This only works with more than one line. |
Align content examples
<div class="d-flex ac-center">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ac-end">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ac-space-around">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ac-space-between">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ac-start">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex ac-stretch">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.ac-center
.ac-end
.ac-space-around
.ac-space-between
.ac-start
Align self
A flex container’s align-items can be overridden on individual items within a flex layout.
Align self classes
| Class | Definition | Responsive? |
|---|---|---|
.as-auto | Auto re-aligns a child element along the parent's main axis based on the ai-[x] value. | |
.as-baseline | Re-aligns a child element along the baseline of the parent's main axis. | |
.as-center | Centers a child element along the parent's main axis. | |
.as-end | Re-aligns a child element to the end of the parent's main axis. | |
.as-start | Re-aligns a child element to the start of the parent's main axis. | |
.as-stretch | Stretches a child element along the parent's main axis. |
Align self examples
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item as-auto">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item as-baseline">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item as-center">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item as-end">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item as-start">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item as-stretch">…</div>
<div class="flex--item">…</div>
</div>.as-auto
.as-baseline
.as-center
.as-end
.as-start
.as-stretch
Order
Within a flex layout, you can force the position of individual elements.
Order classes
| Class | Definition | Responsive? |
|---|---|---|
.order-first | Places the child element first within a parent container. | |
.order-last | Places the child element last within a parent container. |
Order examples
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item">…</div>
<div class="flex--item order-first">…</div>
</div>
<div class="d-flex">
<div class="flex--item order-last">…</div>
<div class="flex--item">…</div>
<div class="flex--item">…</div>
</div>.order-first
.order-last
Flex shrink and grow
You can control the growing and shrinking behavior of individual elements within a flex layout.
Flex classes
| Class | Definition | Responsive? |
|---|---|---|
.fl-grow1 | Sets flex-grow to allow a flex item to grow to fill any available space. | |
.fl-grow0 | Prevents a flex item from growing. | |
.fl-shrink1 | Allows a flex item to shrink if needed. | |
.fl-shrink0 | Prevents a flex item from shrinking. | |
.fl-none | Prevents a flex item from growing or shrinking. | |
.fl-initial | Allows a flex item to shrink but not grow, taking into account its initial size. | |
.fl-auto | Allows a flex item to grow and shrink, taking into account its initial size. | |
.fl-equal | Allow a flex item to grow and shrink as needed, ignoring its initial size. If all children within a flex layout have ..fl-equal enabled, they'll be the same size. See also .flex__fl-equal |
Flex examples
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item fl-grow1">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item fl-grow0">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item fl-shrink1">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item fl-shrink0">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item fl-none">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item fl-initial">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item">…</div>
<div class="flex--item fl-auto">…</div>
<div class="flex--item">…</div>
</div>
<div class="d-flex">
<div class="flex--item fl-equal">…</div>
<div class="flex--item fl-equal">…</div>
<div class="flex--item fl-equal">…</div>
</div>.fl-grow1
.fl-grow0
.fl-shrink1
.fl-shrink0
.fl-none
.fl-initial
.fl-auto
.fl-equal