Stacks

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

Fluid

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

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

Fixed cells

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

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

Section titled 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--item2

.flex--item10

.flex--item[x] and standard .flex--item

.flex--item3

.flex--item6

.flex--item

.d-flex.flex__allitems4

.flex--item

Helpers

Section titled Helpers

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

Helper classes

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

Section titled 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--item

.flex__fl-shrink0

.flex--item

.flex__fl-equal

.flex--item

Nested flex layouts

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

Section titled 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--item2

Gutters

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

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

Section titled 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.gsx -- Row gutters only

.gs16.gsy -- Column gutters only

Nested gutters

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

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 direction

Section titled Flex direction

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

Flex direction classes

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

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

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

Flex wrap

Section titled Flex wrap

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

Flex wrap classes

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

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

.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

Justify content

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

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

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

.flex--item

.jc-end

.flex--item

.jc-space-around

.flex--item

.jc-space-between

.flex--item

.jc-space-evenly

.flex--item

.jc-start

Default

.flex--item

Align items

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

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

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

.flex--item

.ai-center

.flex--item

.ai-end

.flex--item

.ai-start

.flex--item

.ai-stretch

Default

.flex--item

Align content

Section titled Align content

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

Align content classes

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

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

.flex--item

.ac-end

.flex--item

.ac-space-around

.flex--item

.ac-space-between

.flex--item

.ac-start

Default

.flex--item

Align self

Section titled Align self

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

Align self classes

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

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

Default

.flex--item

.as-baseline

.flex--item

.as-center

.flex--item

.as-end

.flex--item

.as-start

.flex--item

.as-stretch

.flex--item

Order

Section titled Order

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

Order classes

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

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

.flex--item 1

.flex--item 2

.flex--item 3

.order-last

.flex--item 1

.flex--item 2

.flex--item 3

Flex shrink and grow

Section titled Flex shrink and grow

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

Flex classes

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

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

.flex--item

.fl-grow0

.flex--item

.fl-shrink1

.flex--item

.flex--
item

.flex--item

.fl-shrink0

.flex--item

.fl-none

.flex--item

.fl-initial

.flex--item

.fl-auto

.flex--item

.flex--item.ws2

.flex--item

.fl-equal

.flex--item

Sections

Flex

Basic flex layout

Fluid

Fluid examples

Fixed cells

Fixed classes

Fixed examples

Helpers

Helper classes

Helpers examples

Nested flex layouts

Nested examples

Gutters

Gutter classes

Gutter examples

Nested gutters

Flex direction

Flex direction classes

Flex direction examples

Flex wrap

Flex wrap classes

Flex wrap examples

Justify content

Justify content classes

Justify content examples

Align items

Align items classes

Align items examples

Align content

Align content classes

Align content examples

Align self

Align self classes

Align self examples

Order

Order classes

Order examples

Flex shrink and grow

Flex classes

Flex examples