These flexbox-based utilities can replace the need for a grid system in many instances, and provide powerful constraint-based micro-layout solutions. To learn more about the flexbox module, see Using CSS flexible boxes and the CSS Flexible Box Layout Module Specification.

To set a container to display flex, add the .flex class.

<div class="flex">
  <div>Hamburger</div>
  <div>Hot Dog</div>
</div>

To set a container to display flex at certain breakpoints, use the .sm-flex, .md-flex, and .lg-flex styles.

<div class="sm-flex">
  <div>Hamburger</div>
  <div>Hot Dog</div>
</div>
<div class="md-flex">
  <div>Hamburger</div>
  <div>Hot Dog</div>
</div>
<div class="lg-flex">
  <div>Hamburger</div>
  <div>Hot Dog</div>
</div>

To set a flexbox container to column direction, use .flex-column.

<div class="flex flex-column">
  <span>Hamburger</span>
  <span>Hot Dog</span>
</div>

To enable wrapping of flexbox containers, use .flex-wrap.

<div class="flex flex-wrap">
  <div class="col-4">Hamburger</div>
  <div class="col-4">Hamburger</div>
  <div class="col-4">Hamburger</div>
  <div class="col-4">Hamburger</div>
  <div class="col-4">Hamburger</div>
</div>

To set a flexbox item to automatically fill the available space, use the flex-auto utility.

<div class="flex border">
  <div class="flex-auto border">Hamburger</div>
  <div class="border">Hot Dog</div>
</div>

To prevent a flexbox item from growing or shrinking, use the flex-none utility.

<div class="flex border">
  <div class="flex-none border">Hamburger</div>
  <div class="border">Hot Dog</div>
</div>

To control alignment of flexbox items, use the align-items utilities. These styles uses a shorthand naming convention. items for the align-items property and start and end for the flex-start and flex-end values.

<div class="flex items-start border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex items-end border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex items-baseline border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex items-stretch border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>

To align flexbox items on an item-by-item basis, use the align-self utilities. These override values set by the align-items property. A shorthand naming convention of self for the align-self property is used.

<div class="flex items-center border">
  <h1 class="self-start border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
  <h1 class="self-end border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex items-start border">
  <h1 class="self-center border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
  <h1 class="self-baseline border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
  <h1 class="self-stretch border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>

To control the spacing for items on the main axis, use the justify-content utilities. These styles use a shorthand naming convention. justify for the justify-content property and around and between for the space-around and space-between values.

<div class="flex justify-start border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex justify-end border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex justify-center border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex justify-between border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>
<div class="flex justify-around border">
  <h1 class="border">Hamburger</h1>
  <div class="border">Hot Dog</div>
</div>

To align items along the cross-axis, use the align-content utilities. A shorthand naming convention content is used for the align-content property.

<div class="flex flex-wrap content-start border" style="min-height: 128px">
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
</div>

<div class="flex flex-wrap content-end border" style="min-height: 128px">
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
</div>

<div class="flex flex-wrap content-center border" style="min-height: 128px">
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
</div>

<div class="flex flex-wrap content-between border" style="min-height: 128px">
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
</div>

<div class="flex flex-wrap content-around border" style="min-height: 128px">
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
</div>

<div class="flex flex-wrap content-stretch border" style="min-height: 128px">
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
  <div class="col-6 border">Hamburger</div>
</div>

To change the order of flexbox items, use the order utilities.

<div class="flex">
  <div class="order-2">.order-2</div>
  <div class="order-1">.order-1</div>
  <div class="order-last">.order-last</div>
  <div class="order-3">.order-3</div>
  <div class="order-0">.order-0</div>
</div>