Flex

Flex utilities control direction, wrapping, alignment, and sizing of flex items. Combine with d-flex or d-inline-flex to activate flexbox layout.

Direction

Control flex direction with flex-row, flex-column, flex-row-reverse, and flex-column-reverse.

<div class="d-flex flex-row gap-2 border rounded-sm p-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">One</span>
  <span class="bg-surface-raised rounded-sm p-2">Two</span>
  <span class="bg-surface-raised rounded-sm p-2">Three</span>
</div>

<div class="d-flex flex-column gap-2 border rounded-sm p-2">
  <span class="bg-surface-raised rounded-sm p-2">One</span>
  <span class="bg-surface-raised rounded-sm p-2">Two</span>
  <span class="bg-surface-raised rounded-sm p-2">Three</span>
</div>

OneTwoThree

Wrap

Use flex-wrap to allow items to wrap onto new lines, flex-nowrap to keep them on one line, and flex-wrap-reverse to wrap in reverse order.

<div class="d-flex flex-wrap gap-2 border rounded-sm p-2">
  <span class="bg-surface-raised rounded-sm p-2">One</span>
  <span class="bg-surface-raised rounded-sm p-2">Two</span>
  <span class="bg-surface-raised rounded-sm p-2">Three</span>
  <span class="bg-surface-raised rounded-sm p-2">Four</span>
  <span class="bg-surface-raised rounded-sm p-2">Five</span>
</div>

OneTwoThreeFourFive

Fill, grow, and shrink

flex-fill expands an item to fill available space. flex-grow-1 and flex-grow-0 control whether an item grows. flex-shrink-0 prevents an item from shrinking.

<div class="d-flex gap-2 border rounded-sm p-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">Fixed</span>
  <span class="bg-surface-raised rounded-sm p-2 flex-fill text-center">flex-fill</span>
  <span class="bg-surface-raised rounded-sm p-2">Fixed</span>
</div>

<div class="d-flex gap-2 border rounded-sm p-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">Fixed</span>
  <span class="bg-surface-raised rounded-sm p-2 flex-grow-1 text-center">flex-grow-1</span>
  <span class="bg-surface-raised rounded-sm p-2 flex-grow-0">flex-grow-0</span>
</div>

<div class="d-flex gap-2 border rounded-sm p-2">
  <span class="bg-surface-raised rounded-sm p-2 flex-shrink-0">flex-shrink-0</span>
  <span class="bg-surface-raised rounded-sm p-2 flex-shrink-1">flex-shrink-1</span>
</div>

Fixedflex-fillFixed

Fixedflex-grow-1flex-grow-0

flex-shrink-0flex-shrink-1

Justify content

Use justify-content-* to align items along the main axis: start, center, end, between, around, evenly.

<div class="d-flex justify-content-between border rounded-sm p-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">Left</span>
  <span class="bg-surface-raised rounded-sm p-2">Centre</span>
  <span class="bg-surface-raised rounded-sm p-2">Right</span>
</div>

<div class="d-flex justify-content-center border rounded-sm p-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">Centred</span>
</div>

<div class="d-flex justify-content-end border rounded-sm p-2">
  <span class="bg-surface-raised rounded-sm p-2">End</span>
</div>

LeftCentreRight

Centred

End

Align items and align self

Use align-items-* along the cross axis and align-self-* to override alignment for a single item. Values: start, center, end, baseline, stretch.

<div class="d-flex align-items-center gap-2 border rounded-sm p-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-2">Short</span>
  <span class="bg-surface-raised rounded-sm p-4">Tall item</span>
  <span class="bg-surface-raised rounded-sm p-2">Short</span>
</div>

<div class="d-flex gap-2 border rounded-sm p-2">
  <span class="bg-surface-raised rounded-sm p-2">auto</span>
  <span class="bg-surface-raised rounded-sm p-4">Tall</span>
  <span class="bg-surface-raised rounded-sm p-2 align-self-start">align-self-start</span>
  <span class="bg-surface-raised rounded-sm p-2 align-self-end">align-self-end</span>
  <span class="bg-surface-raised rounded-sm p-2 align-self-center">align-self-center</span>
</div>

ShortTall itemShort

autoTallalign-self-startalign-self-endalign-self-center

Responsive

Direction, wrap, justify-content, align-items, and align-self generate responsive variants: .flex-column@md, .justify-content-between@lg, etc.

<div class="d-flex flex-column flex-row@md gap-3 border rounded-sm p-2">
  <span class="bg-surface-raised rounded-sm p-2">Stacked on mobile</span>
  <span class="bg-surface-raised rounded-sm p-2">Row from md up</span>
  <span class="bg-surface-raised rounded-sm p-2">Third item</span>
</div>

Stacked on mobileRow from md upThird item

Reference

Class	Property	Responsive
`.flex-row`	`flex-direction: row`	Yes
`.flex-column`	`flex-direction: column`	Yes
`.flex-row-reverse`	`flex-direction: row-reverse`	Yes
`.flex-column-reverse`	`flex-direction: column-reverse`	Yes
`.flex-wrap`	`flex-wrap: wrap`	Yes
`.flex-nowrap`	`flex-wrap: nowrap`	Yes
`.flex-wrap-reverse`	`flex-wrap: wrap-reverse`	Yes
`.flex-fill`	`flex: 1 1 auto`	No
`.flex-grow-0`	`flex-grow: 0`	No
`.flex-grow-1`	`flex-grow: 1`	No
`.flex-shrink-0`	`flex-shrink: 0`	No
`.flex-shrink-1`	`flex-shrink: 1`	No
`.justify-content-start`	`justify-content: flex-start`	Yes
`.justify-content-center`	`justify-content: center`	Yes
`.justify-content-end`	`justify-content: flex-end`	Yes
`.justify-content-between`	`justify-content: space-between`	Yes
`.justify-content-around`	`justify-content: space-around`	Yes
`.justify-content-evenly`	`justify-content: space-evenly`	Yes
`.align-items-start`	`align-items: flex-start`	Yes
`.align-items-center`	`align-items: center`	Yes
`.align-items-end`	`align-items: flex-end`	Yes
`.align-items-baseline`	`align-items: baseline`	Yes
`.align-items-stretch`	`align-items: stretch`	Yes
`.align-self-start`	`align-self: flex-start`	Yes
`.align-self-center`	`align-self: center`	Yes
`.align-self-end`	`align-self: flex-end`	Yes
`.align-self-baseline`	`align-self: baseline`	Yes
`.align-self-stretch`	`align-self: stretch`	Yes
`.align-self-auto`	`align-self: auto`	Yes