Flexbox

CSS file

Use the flexbox utility classes to control various flexbox properties. These are especially useful when combined with flexbox grid classes.

For these utility classes to work, first create a flex container — you can use the sba-u-display--flex utility class, or any container that already has a flex display such as sba-l-row — then apply these utility classes to the container's direct children elements.

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 classes follow the format: sba-u-justify-content--{value} and sba-u-{breakpoint}-justify-content--{value} where breakpoint is one of the breakpoint prefixes, and value is one of:

• start (browser default)
• end
• center
• between
• around

<code class="preview__label">sba-u-justify-content--start</code>
<div class="sba-u-justify-content--start sba-u-display--flex sba-u-bgcolor--primary-darkest">
  <div class="sba-u-bgcolor--white sba-u-margin--1">start</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">start</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">start</div>
</div>

<code class="preview__label">sba-u-justify-content--end</code>
<div class="sba-u-justify-content--end sba-u-display--flex sba-u-bgcolor--primary-darkest">
  <div class="sba-u-bgcolor--white sba-u-margin--1">end</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">end</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">end</div>
</div>

<code class="preview__label">sba-u-justify-content--center</code>
<div class="sba-u-justify-content--center sba-u-display--flex sba-u-bgcolor--primary-darkest">
  <div class="sba-u-bgcolor--white sba-u-margin--1">center</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">center</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">center</div>
</div>

<code class="preview__label">sba-u-justify-content--between</code>
<div class="sba-u-justify-content--between sba-u-display--flex sba-u-bgcolor--primary-darkest">
  <div class="sba-u-bgcolor--white sba-u-margin--1">between</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">between</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">between</div>
</div>

<code class="preview__label">sba-u-justify-content--around</code>
<div class="sba-u-justify-content--around sba-u-display--flex sba-u-bgcolor--primary-darkest">
  <div class="sba-u-bgcolor--white sba-u-margin--1">around</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">around</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">around</div>
</div>

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 classes follow the format: sba-u-align-items--{value} and sba-u-{breakpoint}-align-items--{value} where breakpoint is one of the breakpoint prefixes, and value is one of:

• start
• end
• center
• baseline
• stretch (browser default)

<code class="preview__label">sba-u-align-items--start</code>
<div class="sba-u-align-items--start sba-u-display--flex sba-u-bgcolor--primary-darkest" style="height: 75px">
  <div class="sba-u-bgcolor--white sba-u-margin--1">start</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">start</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">start</div>
</div>

<code class="preview__label">sba-u-align-items--end</code>
<div class="sba-u-align-items--end sba-u-display--flex sba-u-bgcolor--primary-darkest" style="height: 75px">
  <div class="sba-u-bgcolor--white sba-u-margin--1">end</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">end</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">end</div>
</div>

<code class="preview__label">sba-u-align-items--center</code>
<div class="sba-u-align-items--center sba-u-display--flex sba-u-bgcolor--primary-darkest" style="height: 75px">
  <div class="sba-u-bgcolor--white sba-u-margin--1">center</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">center</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">center</div>
</div>

<code class="preview__label">sba-u-align-items--baseline</code>
<div class="sba-u-align-items--baseline sba-u-display--flex sba-u-bgcolor--primary-darkest" style="height: 75px">
  <div class="sba-u-bgcolor--white sba-u-margin--1">baseline</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">baseline</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">baseline</div>
</div>

<code class="preview__label">sba-u-align-items--stretch</code>
<div class="sba-u-align-items--stretch sba-u-display--flex sba-u-bgcolor--primary-darkest" style="height: 75px">
  <div class="sba-u-bgcolor--white sba-u-margin--1">stretch</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">stretch</div>
  <div class="sba-u-bgcolor--white sba-u-margin--1">stretch</div>
</div>

Flex-direction

Use flex-direction to specify how flex items are placed in the flex container defining the main axis and the direction

The classes follow the format: sba-u-flex-direction-items--{value} and sba-u-{breakpoint}-flex-direction--{value} where breakpoint is one of the breakpoint prefixes, and value is one of:

• row (browser default)
• row-reverse
• column
• column-reverse

Align Self

Use the align-self utility class on a flexbox child to override the default alignment or the alignment specified by the align-self utility above.

The classes follow the format: sba-u-align-self--{value} and sba-u-{breakpoint}-align-self--{value} where breakpoint is one of the breakpoint prefixes, and value is one of:

• start
• end
• center
• baseline
• stretch (browser default)