Flex

Enable flex behaviors

.d-flex and .d-inline-flex turn an element into a flexbox container, making direct children flex items. Additional flex properties can then be applied to the container or individual items.

<div class="d-flex p-xsmall">I'm a flexbox container!</div>

<div class="d-inline-flex p-xsmall">I'm an inline flexbox container!</div>

Responsive variants are available for .d-flex and .d-inline-flex.

• .d-flex
• .d-inline-flex
• .small:d-flex
• .small:d-inline-flex
• .medium:d-flex
• .medium:d-inline-flex
• .large:d-flex
• .large:d-inline-flex
• .xlarge:d-flex
• .xlarge:d-inline-flex
• .2xlarge:d-flex
• .2xlarge:d-inline-flex

Direction

Direction utilities set the flex-direction property. The default browser value is row, so .flex-row is typically unnecessary unless overriding a breakpoint-specific value.

.flex-row produces a left-to-right horizontal layout. .flex-row-reverse starts items from the right.

<div class="d-flex flex-row mb-medium">
  <div class="p-xsmall">Flex item 1</div>
  <div class="p-xsmall">Flex item 2</div>
  <div class="p-xsmall">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-xsmall">Flex item 1</div>
  <div class="p-xsmall">Flex item 2</div>
  <div class="p-xsmall">Flex item 3</div>
</div>

.flex-column sets a top-to-bottom vertical direction. .flex-column-reverse starts items from the bottom.

<div class="d-flex flex-column mb-medium">
  <div class="p-xsmall">Flex item 1</div>
  <div class="p-xsmall">Flex item 2</div>
  <div class="p-xsmall">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-xsmall">Flex item 1</div>
  <div class="p-xsmall">Flex item 2</div>
  <div class="p-xsmall">Flex item 3</div>
</div>

Responsive variants are available for flex-direction.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .small:flex-row
• .small:flex-row-reverse
• .small:flex-column
• .small:flex-column-reverse
• .medium:flex-row
• .medium:flex-row-reverse
• .medium:flex-column
• .medium:flex-column-reverse
• .large:flex-row
• .large:flex-row-reverse
• .large:flex-column
• .large:flex-column-reverse
• .xlarge:flex-row
• .xlarge:flex-row-reverse
• .xlarge:flex-column
• .xlarge:flex-column-reverse
• .2xlarge:flex-row
• .2xlarge:flex-row-reverse
• .2xlarge:flex-column
• .2xlarge:flex-column-reverse

Justify content

justify-content utilities control flex item alignment along the main axis — the x-axis by default, or the y-axis when flex-direction: column is applied. Available values: start (browser default), end, center, between, around, and evenly.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Responsive variants are available for justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-evenly
• .small:justify-content-start
• .small:justify-content-end
• .small:justify-content-center
• .small:justify-content-between
• .small:justify-content-around
• .small:justify-content-evenly
• .medium:justify-content-start
• .medium:justify-content-end
• .medium:justify-content-center
• .medium:justify-content-between
• .medium:justify-content-around
• .medium:justify-content-evenly
• .large:justify-content-start
• .large:justify-content-end
• .large:justify-content-center
• .large:justify-content-between
• .large:justify-content-around
• .large:justify-content-evenly
• .xlarge:justify-content-start
• .xlarge:justify-content-end
• .xlarge:justify-content-center
• .xlarge:justify-content-between
• .xlarge:justify-content-around
• .xlarge:justify-content-evenly
• .2xlarge:justify-content-start
• .2xlarge:justify-content-end
• .2xlarge:justify-content-center
• .2xlarge:justify-content-between
• .2xlarge:justify-content-around
• .2xlarge:justify-content-evenly

Align items

align-items utilities control flex item alignment along the cross axis — the y-axis by default, or the x-axis when flex-direction: column is applied. Available values: start, end, center, baseline, and stretch (browser default).

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Responsive variants are available for align-items.

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .small:align-items-start
• .small:align-items-end
• .small:align-items-center
• .small:align-items-baseline
• .small:align-items-stretch
• .medium:align-items-start
• .medium:align-items-end
• .medium:align-items-center
• .medium:align-items-baseline
• .medium:align-items-stretch
• .large:align-items-start
• .large:align-items-end
• .large:align-items-center
• .large:align-items-baseline
• .large:align-items-stretch
• .xlarge:align-items-start
• .xlarge:align-items-end
• .xlarge:align-items-center
• .xlarge:align-items-baseline
• .xlarge:align-items-stretch
• .2xlarge:align-items-start
• .2xlarge:align-items-end
• .2xlarge:align-items-center
• .2xlarge:align-items-baseline
• .2xlarge:align-items-stretch

Align self

align-self utilities override the container's align-items value for individual flex items. The same values are available as for align-items: start, end, center, baseline, and stretch (browser default).

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Responsive variants are available for align-self.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .small:align-self-start
• .small:align-self-end
• .small:align-self-center
• .small:align-self-baseline
• .small:align-self-stretch
• .medium:align-self-start
• .medium:align-self-end
• .medium:align-self-center
• .medium:align-self-baseline
• .medium:align-self-stretch
• .large:align-self-start
• .large:align-self-end
• .large:align-self-center
• .large:align-self-baseline
• .large:align-self-stretch
• .xlarge:align-self-start
• .xlarge:align-self-end
• .xlarge:align-self-center
• .xlarge:align-self-baseline
• .xlarge:align-self-stretch
• .2xlarge:align-self-start
• .2xlarge:align-self-end
• .2xlarge:align-self-center
• .2xlarge:align-self-baseline
• .2xlarge:align-self-stretch

Grow and shrink

.flex-grow-1 allows a flex item to expand and fill remaining space; .flex-grow-0 prevents growth. In the example below, the .flex-grow-1 element consumes all available space while the remaining items retain their natural size.

<div class="d-flex">
  <div class="p-xsmall flex-grow-1">Flex item</div>
  <div class="p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
</div>

.flex-shrink-0 prevents a flex item from shrinking below its natural size even when space is constrained. In the example below, the second item with .flex-shrink-0 holds its size even as the first item with .w-100 competes for space.

<div class="d-flex">
  <div class="p-xsmall w-100">Flex item</div>
  <div class="p-xsmall flex-shrink-0">Flex item with a lot of content</div>
</div>

Responsive variants are available for flex-grow and flex-shrink.

• .flex-{grow|shrink}-0
• .flex-{grow|shrink}-1
• .small:flex-{grow|shrink}-0
• .small:flex-{grow|shrink}-1
• .medium:flex-{grow|shrink}-0
• .medium:flex-{grow|shrink}-1
• .large:flex-{grow|shrink}-0
• .large:flex-{grow|shrink}-1
• .xlarge:flex-{grow|shrink}-0
• .xlarge:flex-{grow|shrink}-1
• .2xlarge:flex-{grow|shrink}-0
• .2xlarge:flex-{grow|shrink}-1

Fill and grow

.flex-fill forces sibling flex items to equal widths, consuming all available horizontal space regardless of their content.

<div class="d-flex mb-medium">
  <div class="p-xsmall flex-fill">Flex item with a lot of content</div>
  <div class="p-xsmall flex-fill">Flex item</div>
  <div class="p-xsmall flex-fill">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-xsmall flex-grow-1">Flex item with a lot of content</div>
  <div class="p-xsmall flex-grow-1">Flex item</div>
  <div class="p-xsmall flex-grow-1">Flex item</div>
</div>

Responsive variants are available for flex-fill.

• .flex-fill
• .small:flex-fill
• .medium:flex-fill
• .large:flex-fill
• .xlarge:flex-fill
• .2xlarge:flex-fill

Auto margins

Auto margins push flex items away from each other. The examples below show three configurations: no auto margin, .me-auto pushing subsequent items right, and .ms-auto pulling an item to the right.

<div class="d-flex mb-medium">
  <div class="p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
</div>

<div class="d-flex mb-medium">
  <div class="me-auto p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
</div>

<div class="d-flex mb-medium">
  <div class="p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
  <div class="ms-auto p-xsmall">Flex item</div>
</div>

With align-items

Combining flex-direction: column with mb-auto or mt-auto positions a single item at the top or bottom of the container.

<div class="d-flex align-items-start flex-column mb-medium" style="height: 200px;">
  <div class="mb-auto p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-medium" style="height: 200px;">
  <div class="p-xsmall">Flex item</div>
  <div class="p-xsmall">Flex item</div>
  <div class="mt-auto p-xsmall">Flex item</div>
</div>

Wrap

Wrap utilities set the flex-wrap property. .flex-nowrap is the browser default; .flex-wrap allows items to flow onto multiple lines; .flex-wrap-reverse wraps in reverse order.

<div class="d-flex flex-nowrap">
  ...
</div>

<div class="d-flex flex-wrap">
  ...
</div>

<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsive variants are available for flex-wrap.

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .small:flex-nowrap
• .small:flex-wrap
• .small:flex-wrap-reverse
• .medium:flex-nowrap
• .medium:flex-wrap
• .medium:flex-wrap-reverse
• .large:flex-nowrap
• .large:flex-wrap
• .large:flex-wrap-reverse
• .xlarge:flex-nowrap
• .xlarge:flex-wrap
• .xlarge:flex-wrap-reverse
• .2xlarge:flex-nowrap
• .2xlarge:flex-wrap
• .2xlarge:flex-wrap-reverse

Order

Order utilities set the visual sequence of flex items. Values 0–5 are available; custom CSS can extend this range.

<div class="d-flex flex-nowrap">
  <div class="order-3 p-xsmall">First flex item</div>
  <div class="order-2 p-xsmall">Second flex item</div>
  <div class="order-1 p-xsmall">Third flex item</div>
</div>

Responsive variants are available for order.

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .small:order-0
• .small:order-1
• .small:order-2
• .small:order-3
• .small:order-4
• .small:order-5
• .medium:order-0
• .medium:order-1
• .medium:order-2
• .medium:order-3
• .medium:order-4
• .medium:order-5
• .large:order-0
• .large:order-1
• .large:order-2
• .large:order-3
• .large:order-4
• .large:order-5
• .xlarge:order-0
• .xlarge:order-1
• .xlarge:order-2
• .xlarge:order-3
• .xlarge:order-4
• .xlarge:order-5
• .2xlarge:order-0
• .2xlarge:order-1
• .2xlarge:order-2
• .2xlarge:order-3
• .2xlarge:order-4
• .2xlarge:order-5

.order-first applies order: -1; .order-last applies order: 6. Responsive variants are available for both.

• .order-first
• .order-last
• .small:order-first
• .small:order-last
• .medium:order-first
• .medium:order-last
• .large:order-first
• .large:order-last
• .xlarge:order-first
• .xlarge:order-last
• .2xlarge:order-first
• .2xlarge:order-last

Align content

align-content utilities control how multiple lines of flex items are distributed along the cross axis. Available values: start (browser default), end, center, between, around, and stretch. The examples below use flex-wrap: wrap with an increased number of flex items to demonstrate the effect.

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

<div class="d-flex align-content-end flex-wrap">...</div>

<div class="d-flex align-content-center flex-wrap">...</div>

<div class="d-flex align-content-between flex-wrap">...</div>

<div class="d-flex align-content-around flex-wrap">...</div>

<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsive variants are available for align-content.

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch
• .small:align-content-start
• .small:align-content-end
• .small:align-content-center
• .small:align-content-between
• .small:align-content-around
• .small:align-content-stretch
• .medium:align-content-start
• .medium:align-content-end
• .medium:align-content-center
• .medium:align-content-between
• .medium:align-content-around
• .medium:align-content-stretch
• .large:align-content-start
• .large:align-content-end
• .large:align-content-center
• .large:align-content-between
• .large:align-content-around
• .large:align-content-stretch
• .xlarge:align-content-start
• .xlarge:align-content-end
• .xlarge:align-content-center
• .xlarge:align-content-between
• .xlarge:align-content-around
• .xlarge:align-content-stretch
• .2xlarge:align-content-start
• .2xlarge:align-content-end
• .2xlarge:align-content-center
• .2xlarge:align-content-between
• .2xlarge:align-content-around
• .2xlarge:align-content-stretch

Place items

Use place-items utilities on CSS Grid containers as a shorthand to set both align-items and justify-items at once. This property controls how grid items are positioned within their grid areas on both axes.

Basic usage

Use place-items utilities to control the alignment of grid items. Choose from start, end, center, or stretch (browser default).

<div class="d-grid place-items-start">...</div>
<div class="d-grid place-items-end">...</div>
<div class="d-grid place-items-center">...</div>
<div class="d-grid place-items-stretch">...</div>

Responsive

Responsive variations also exist for place-items.

• .place-items-start
• .place-items-end
• .place-items-center
• .place-items-stretch
• .small:place-items-start
• .small:place-items-end
• .small:place-items-center
• .small:place-items-stretch
• .medium:place-items-start
• .medium:place-items-end
• .medium:place-items-center
• .medium:place-items-stretch
• .large:place-items-start
• .large:place-items-end
• .large:place-items-center
• .large:place-items-stretch
• .xlarge:place-items-start
• .xlarge:place-items-end
• .xlarge:place-items-center
• .xlarge:place-items-stretch
• .2xlarge:place-items-start
• .2xlarge:place-items-end
• .2xlarge:place-items-center
• .2xlarge:place-items-stretch

CSS

Flexbox utilities are generated via the utilities API.

Reference

The table lists all flexbox utilities and their CSS properties.

Utilities API

Flexbox utilities are declared in scss/utilities/_flex.scss using the utilities API.

"flex-fill": (
  responsive: true,
  property: flex,
  values: (fill: 1)
),
"flex-direction": (
  responsive: true,
  property: flex-direction,
  class: flex,
  values: row column row-reverse column-reverse
),
"flex-grow": (
  responsive: true,
  property: flex-grow,
  class: flex,
  values: (
    grow-0: 0,
    grow-1: 1,
  )
),
"flex-shrink": (
  responsive: true,
  property: flex-shrink,
  class: flex,
  values: (
    shrink-0: 0,
    shrink-1: 1,
  )
),
"flex-wrap": (
  responsive: true,
  property: flex-wrap,
  class: flex,
  values: wrap nowrap wrap-reverse
),
"justify-content": (
  responsive: true,
  property: justify-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
),
"align-items": (
  responsive: true,
  property: align-items,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
  )
),
"align-content": (
  responsive: true,
  property: align-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
  )
),
"align-self": (
  responsive: true,
  property: align-self,
  values: (
    auto: auto,
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
  )
),
"order": (
  responsive: true,
  property: order,
  values: (
    first: -1,
    0: 0,
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 5,
    last: 6,
  ),
),
"place-items": (
  property: place-items,
  values: (
    start: start,
    end: end,
    center: center,
    stretch: stretch,
  )
),