Flex

Stacks provides extensive utility and helper classes for flex layouts.

Our flex-based “grid” classes have been renamed while we prepare for first-class CSS grids in Stacks. Our .grid, and .grid--cell classes have been deprecated. Please migrate to .d-flex and .flex--item.

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

By default, all flex itesm 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.

<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

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.

Individual Width Uniform Width Output
.flex--item1 .flex__allcells1 flex-basis: 8.333333333%;
.flex--item2 .flex__allcells2 flex-basis: 16.666666667%;
.flex--item3 .flex__allcells3 flex-basis: 24.999999999%;
.flex--item4 .flex__allcells4 flex-basis: 33.333333332%;
.flex--item5 .flex__allcells5 flex-basis: 41.666666665%;
.flex--item6 .flex__allcells6 flex-basis: 50%;
.flex--item7 .flex__allcells7 flex-basis: 58.333333331%;
.flex--item8 .flex__allcells8 flex-basis: 66.666666664%;
.flex--item9 .flex__allcells9 flex-basis: 74.999999997%;
.flex--item10 .flex__allcells10 flex-basis: 83.33333333%;
.flex--item11 .flex__allcells11 flex-basis: 91.666666663%;
.flex--item12 .flex__allcells12 flex-basis: 100%;
<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__allcells4">
<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--item2
.flex--item10
.flex--item[x] and standard .flex--item
.flex--item3
.flex--item6
.flex--item
.d-flex.flex__allcells4
.flex--item
.flex--item
.flex--item
.flex--item

We have a few helper classes you can add to a .d-flex container that affect the child .flex--items.

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
<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--item
.flex__fl-shrink0
.flex--item
.flex--item
.flex--item
.flex__fl-equal
.flex--item
.flex--item
.flex--item

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.

<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

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.

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
<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
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

On a flex container, you can set the direction of the child items.

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.
<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
Default
.flex--item 1
.flex--item 2
.flex--item 3
.fd-row-reverse
.flex--item 1
.flex--item 2
.flex--item 3
.fd-column
.flex--item 1
.flex--item 2
.flex--item 3
.fd-column-reverse
.flex--item 1
.flex--item 2
.flex--item 3

On a flex container, you can control if the children wrap

Class Definition Responsive?
.fw-wrap Wraps the child cells within a parent.
.fw-reverse Reverses the wrap direction.
.fw-nowrap Removes the wrap direction.
<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
.flex--item 1
.flex--item 2
.flex--item 3
.flex--item 4
.flex--item 5
.flex--item 6
.flex--item 7
.flex--item 8
.fw-reverse
.flex--item 1
.flex--item 2
.flex--item 3
.flex--item 4
.flex--item 5
.flex--item 6
.flex--item 7
.flex--item 8
.fw-nowrap
Default
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item

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.

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.
<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
.flex--item
.flex--item
.flex--item
.jc-end
.flex--item
.flex--item
.flex--item
.jc-space-around
.flex--item
.flex--item
.flex--item
.jc-space-between
.flex--item
.flex--item
.flex--item
.jc-space-evenly
.flex--item
.flex--item
.flex--item
.jc-start
Default
.flex--item
.flex--item
.flex--item

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.

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.
<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
.flex--item
.flex--item
.flex--item
.ai-center
.flex--item
.flex--item
.flex--item
.ai-end
.flex--item
.flex--item
.flex--item
.ai-start
.flex--item
.flex--item
.flex--item
.ai-stretch
Default
.flex--item
.flex--item
.flex--item

Flex items can be controlled with atomic classes on the container’s cross axis.

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.
<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
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.ac-end
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.ac-space-around
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.ac-space-between
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.ac-start
Default
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item
.flex--item

A flex container’s align-items can be overridden on individual items within a flex layout.

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.
<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
Default
.flex--item
.flex--item
.flex--item
.as-baseline
.flex--item
.flex--item
.flex--item
.as-center
.flex--item
.flex--item
.flex--item
.as-end
.flex--item
.flex--item
.flex--item
.as-start
.flex--item
.flex--item
.flex--item
.as-stretch
.flex--item
.flex--item
.flex--item

Within a flex layout, you can force the position of individual elements.

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.
<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
.flex--item 1
.flex--item 2
.flex--item 3
.order-last
.flex--item 1
.flex--item 2
.flex--item 3

You can control the growing and shrinking behavior of individual elements within a flex layout

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
<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
.flex--item
.flex--item
.flex--item
.fl-grow0
.flex--item
.flex--item
.flex--item
.fl-shrink1
.flex--item
.flex--
item
.flex--item
.fl-shrink0
.flex--item
.flex--item
.flex--item
.fl-none
.flex--item
.flex--item
.flex--item
.fl-initial
.flex--item
.flex--item
.flex--item
.fl-auto
.flex--item
.flex--item.ws2
.flex--item
.fl-equal
.flex--item
.flex--item
.flex--item