# Flexbox

Use the [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) utility classes to control various flexbox properties. These are especially useful when combined with [layout grid](/foundation/layout-grid/layout-grid/#alignment) classes.

For these utility classes to work, first create a flex container — you can use the [`.ds-u-display--flex`](/utilities/display/) utility class — then apply these utility classes to the container's direct children elements.

## Flex direction

Use the `flex-direction` utility class on a flexbox container to change the alignment of its child elements on the main axis (x-axis by default).

> The CSS `flex-direction` property defines how the browser distributes space between and around content items along the main axis of their container. — [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)

**Format**: `.ds-u-flex-direction--[row|column|row-reverse|column-reverse]`

**Responsive format**: `.ds-u-[breakpoint]-flex-direction--[row|column|row-reverse|column-reverse]`

<EmbeddedExample>
  <section>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-flex-direction--row</code>
      <article class="ds-u-display--flex ds-u-flex-direction--row ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #1'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #2'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #3'}
        </div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-flex-direction--column</code>
      <article class="ds-u-display--flex ds-u-flex-direction--column ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #1'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #2'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #3'}
        </div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-flex-direction--row-reverse></code>
      <article class="ds-u-display--flex ds-u-flex-direction--row-reverse ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #1'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #2'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #3'}
        </div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-flex-direction--column-reverse</code>
      <article class="ds-u-display--flex ds-u-flex-direction--column-reverse ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #1'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #2'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1" style={{ width: '50%' }}>
          {'Element #3'}
        </div>
      </article>
    </div>
  </section>
</EmbeddedExample>

## Justify content

Use the `justify-content` utility class on a flexbox container to change the alignment of its child elements on the main axis (x-axis by default).

> The CSS `justify-content` property defines how the browser distributes space between and around content items along the main axis of their container. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

**Format**: `.ds-u-justify-content--[start|end|center|between|around]`

**Responsive format**: `.ds-u-[breakpoint]-justify-content--[start|end|center|between|around]`

<EmbeddedExample>
  <section>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-justify-content--start></code>
      <article class="ds-u-justify-content--start ds-u-display--flex ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">start</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">start</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">start></div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-justify-content--end</code>
      <article class="ds-u-justify-content--end ds-u-display--flex ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">end</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">end</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">end></div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-justify-content--center</code>
      <article class="ds-u-justify-content--center ds-u-display--flex ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">center</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">center</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">center></div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-justify-content--between</code>
      <article class="ds-u-justify-content--between ds-u-display--flex ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">between</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">between</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">between></div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-justify-content--around</code>
      <article class="ds-u-justify-content--around ds-u-display--flex ds-u-padding--1 ds-u-border--1">
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">around</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">around</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">around></div>
      </article>
    </div>
  </section>
</EmbeddedExample>

## Align items

Use the `align-items` utility class on a flexbox container to change the alignment of its child elements on the cross axis (y-axis by default).

> The CSS `align-items` property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like `justify-content` but in the perpendicular direction. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)

**Format**: `.ds-u-align-items--[start|end|center|baseline|stretch]`

**Responsive format**: `.ds-u-[breakpoint]-align-items--[start|end|center|baseline|stretch]`

<EmbeddedExample>
  <section>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-align-items--start</code>
      <article
        class="ds-u-align-items--start ds-u-display--flex ds-u-padding--1 ds-u-border--1"
        style={{ height: 100 }}
      >
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--sm">start</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lg">start</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--xl">start</div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-align-items--end</code>
      <article
        class="ds-u-align-items--end ds-u-display--flex ds-u-padding--1 ds-u-border--1"
        style={{ height: 100 }}
      >
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--sm">end</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lg">end</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--xl">end</div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-align-items--center</code>
      <article
        class="ds-u-align-items--center ds-u-display--flex ds-u-padding--1 ds-u-border--1"
        style={{ height: 100 }}
      >
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--sm">center</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lg">center</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--xl">center</div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-align-items--baseline</code>
      <article
        class="ds-u-align-items--baseline ds-u-display--flex ds-u-padding--1 ds-u-border--1"
        style={{ height: 100 }}
      >
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--sm">
          {'baseline'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lg">
          {'baseline'}
        </div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--xl">
          {'baseline'}
        </div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-align-items--stretch</code>
      <article
        class="ds-u-align-items--stretch ds-u-display--flex ds-u-padding--1 ds-u-border--1"
        style={{ height: 100 }}
      >
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--sm">stretch</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--lg">stretch</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1 ds-u-font-size--xl">stretch</div>
      </article>
    </div>
  </section>
</EmbeddedExample>

## Flex-wrap

Use the `flex-wrap` utility class on a flexbox container to change how its child elements wrap.

> The CSS `flex-wrap` property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)

**Format**: `.ds-u-flex-wrap--[nowrap|wrap|reverse]`

**Responsive format**: `.ds-u-[breakpoint]-flex-wrap--[nowrap|wrap|reverse]`

<EmbeddedExample>
  <section>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-flex-wrap--nowrap</code>
      <article
        class="ds-u-flex-wrap--nowrap ds-u-display--flex ds-u-padding--1 ds-u-border--1"
        style={{ maxWidth: 200 }}
      >
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">Element #1</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">Element #2</div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-flex-wrap--wrap</code>
      <article
        class="ds-u-flex-wrap--wrap ds-u-display--flex ds-u-padding--1 ds-u-border--1"
        style={{ maxWidth: 200 }}
      >
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">Element #1</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">Element #2</div>
      </article>
    </div>
    <div class="ds-u-margin-bottom--2">
      <code class="ds-u-margin-bottom--1">.ds-u-flex-wrap--reverse</code>
      <article
        class="ds-u-flex-wrap--reverse ds-u-display--flex ds-u-padding--1 ds-u-border--1"
        style={{ maxWidth: 200 }}
      >
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">Element #1</div>
        <div class="utility-example ds-u-padding--1 ds-u-margin--1">Element #2</div>
      </article>
    </div>
  </section>
</EmbeddedExample>

## Responsive flexbox

Use a [breakpoint prefix](/foundation/layout-grid/responsive-design/) to change the flexbox at specific breakpoints.