Flex Box

Flexbox is perfect for aligning items inside components. It typically isn't used for large scale layouts but for smaller parts of a page or component. All of the flex box utility classes can be used with our breakpoint suffixes. In some cases, adding an auto margin to a side is needed to align content. In that case, check out auto margins.

Flex Container

This is the parent of the items that will be laid out using flex box.

Display

Defines the flex container and enables a flex context for all of its direct children. To apply this to a container with block, use .flex-block-xs. To apply it with inline, use .flex-inline-xs

<div class="flex-block-xs">
  <!-- Children -->
</div>

<div class="flex-inline-xs">
  <!-- Children -->
</div>

Flex Direction

This establishes the main-axis, which defines the direction items are palces in the container. Flex lays out in a single direction, either horizontal or vertical.

Class Description
.flex-row-xs (Default) Left to right
.flex-row-reverse-xs Right to left
.flex-column-xs Same as .flex-row-xs but top to bottom
.flex-column-reverse-xs Same as .flex-row-reverse-xs but bottom to top
1
2
3
4
1
2
3
4
<div class="flex-block-xs border-xs p-1-xs">
  <div class="border-dark-xs text-center-xs m-r-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-r-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-r-05-xs">3</div>
  <div class="border-dark-xs text-center-xs">4</div>
</div>
<div class="flex-block-xs flex-column-xs border-xs border-none-t-xs p-1-xs">
  <div class="border-dark-xs text-center-xs m-b-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-b-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-b-05-xs">3</div>
  <div class="border-dark-xs text-center-xs">4</div>
</div>

Flex Wrap

Flex items will all fit into one line by default. To change that behavior and allow them to wrap, you'll need to add some properties. Flex direction plays a role here by defining the direction new line are stacked.

Class Description
.flex-nowrap-xs (Default) Single-line with no wrapping
.flex-wrap-xs Multi-line from left to right
.flex-wrap-reverse-xs Multi-line from right to left
1
2
3
4
1
2
3
4
<div class="flex-block-xs flex-wrap-xs border-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs">4</div>
</div>
<div class="flex-block-xs flex-wrap-reverse-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs">4</div>
</div>

Justify Content

This defines the alignment along the main axis and helps distribute space around the flex items.

Class Description
.flex-justify-start-xs (Default) Items are packed toward the start line
.flex-justify-end-xs Items are packed toward the end line
.flex-justify-center-xs Items are centered along the line
.flex-justify-between-xs Items are evenly distributed in the line. First item on the start line, last item on the end line.
.flex-justify-around-xs Items are evently distributed in the line with equal space around them. Note that visually the spaces aren't equal because each item has equal space on both sides.
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
<div class="flex-block-xs flex-justify-start-xs border-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
</div>
<div class="flex-block-xs flex-justify-end-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
</div>
<div class="flex-block-xs flex-justify-center-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
</div>
<div class="flex-block-xs flex-justify-between-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
</div>
<div class="flex-block-xs flex-justify-around-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
</div>

Align Items

This defines how flex items are laid out along the cross axis on the current line.

Class Description
.flex-item-start-xs Cross-start margin edge of the items is placed on the cross-start line
.flex-item-end-xs Cross-end margin edge of the items is placed on the cross-end line
.flex-item-center-xs Items are centered in the cross-axis
.flex-item-stretch-xs (Default) Stretch to fill the container but still respects min/max-width
.flex-item-baseline-xs Items are aligned such as their baselines align
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
<div class="flex-block-xs flex-item-start-xs border-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>
<div class="flex-block-xs flex-item-end-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>
<div class="flex-block-xs flex-item-center-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>
<div class="flex-block-xs flex-item-stretch-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>
<div class="flex-block-xs flex-item-baseline-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 70px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 100px;">4<br>5</div>
</div>

Align Content

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns items within the main axis. Note: this property has no effect when there is only one line of flex items.

Class Description
.flex-content-start-xs Lines packed to the start of the container
.flex-content-end-xs Lines packed to the end of the container
.flex-content-center-xs Lines packed to the center of the container
.flex-content-around-xs Lines evenly distributed with the first line at the start and the last at the end of the container.
.flex-content-between-xs Lines evenly distributed with equal space around each line.
.flex-content-stretch-xs (Default) Lines stretch to take up the remaining space
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
<div class="flex-block-xs flex-content-start-xs flex-wrap-xs border-xs p-05-xs" style="min-height:300px;">
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 500px; line-height: 50px;">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 150px; line-height: 50px;">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 200px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 300px; line-height: 50px;">4</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 400px; line-height: 50px;">5</div>
</div>
<div class="flex-block-xs flex-content-end-xs flex-wrap-xs border-xs p-05-xs" style="min-height:300px;">
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 500px; line-height: 50px;">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 150px; line-height: 50px;">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 200px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 300px; line-height: 50px;">4</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 400px; line-height: 50px;">5</div>
</div>
<div class="flex-block-xs flex-content-center-xs flex-wrap-xs border-xs p-05-xs" style="min-height:300px;">
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 500px; line-height: 50px;">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 150px; line-height: 50px;">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 200px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 300px; line-height: 50px;">4</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 400px; line-height: 50px;">5</div>
</div>
<div class="flex-block-xs flex-content-around-xs flex-wrap-xs border-xs p-05-xs" style="min-height:300px;">
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 500px; line-height: 50px;">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 150px; line-height: 50px;">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 200px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 300px; line-height: 50px;">4</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 400px; line-height: 50px;">5</div>
</div>
<div class="flex-block-xs flex-content-between-xs flex-wrap-xs border-xs p-05-xs" style="min-height:300px;">
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 500px; line-height: 50px;">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 150px; line-height: 50px;">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 200px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 300px; line-height: 50px;">4</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="height: 50px; width: 400px; line-height: 50px;">5</div>
</div>

Flex Items

These are the children of the parent container. Flex items are what take on the flexible box layout for components and pages.

Order

By default, items are laid out in source order. By using the order property, we can control the order inside the flex container. Leap contains built in ordering classes of .flex-order-[n]-xs, where n is an integer from 1 to 6. Any item without an order will default to 1 and matching orders will be grouped together in the appropriate order. You can rearrange the order across breakpoints with breakpoint suffixes.

1
2
3
4
1
2
3
4
1
2
3
4
<div class="flex-block-xs border-xs p-05-xs">
  <div class="flex-order-2-xs border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs">4</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="flex-order-4-xs border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="flex-order-1-xs border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="flex-order-2-xs border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="flex-order-3-xs border-dark-xs text-center-xs m-05-xs">4</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="flex-order-2-lg border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="flex-order-1-lg border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="flex-order-1-lg border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="flex-order-2-lg border-dark-xs text-center-xs m-05-xs">4</div>
</div>

Flex Grow

This property lets an item grow if necessary. It accepts a unitless value that serves as a proportion. The default is 0.

1
2
3
4
1
2
3
4
1
2
3
4
<div class="flex-block-xs border-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="flex-grow-1-xs border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="flex-grow-2-xs border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs">4</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="flex-grow-6-xs border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="flex-grow-3-xs border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="flex-grow-1-xs border-dark-xs text-center-xs m-05-xs">4</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="flex-grow-2-lg border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="flex-grow-4-lg border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs">4</div>
</div>

Flex Shrink

This property lets an item shrink if necessary. It accepts a unitless value that serves as a proportion. The default is 1.

1
2
3
4
1
2
3
4
1
2
3
4
<div class="flex-block-xs border-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="flex-shrink-2-xs border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="flex-shrink-2-xs border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs">4</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="flex-shrink-4-xs border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="flex-shrink-3-xs border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="flex-shrink-2-xs border-dark-xs text-center-xs m-05-xs">4</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs">1</div>
  <div class="flex-shrink-2-lg border-dark-xs text-center-xs m-05-xs">2</div>
  <div class="flex-shrink-4-lg border-dark-xs text-center-xs m-05-xs">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs">4</div>
</div>

Flex Basis

This property defines the default size of an element before the remaining space is distributed. It can be a length or keyword, like "auto". The default is auto. To use percentages, use the same widths we have available in our .col classes, like .flex-basis-20-xs. To use our default spacing units, try .flex-basis-s2-xs.

1
2
3
1
2
3
<div class="flex-block-xs border-xs p-05-xs">
  <div class="flex-basis-33-xs flex-basis-20-lg border-dark-xs text-center-xs m-05-xs" style="height: 50px; line-height: 50px;">1</div>
  <div class="flex-basis-33-xs flex-basis-60-lg border-dark-xs text-center-xs m-05-xs" style="height: 50px; line-height: 50px;">2</div>
  <div class="flex-basis-33-xs flex-basis-20-lg border-dark-xs text-center-xs m-05-xs" style="height: 50px; line-height: 50px;">3</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="flex-basis-s2-xs border-dark-xs text-center-xs m-05-xs" style="height: 50px; line-height: 50px;">1</div>
  <div class="flex-basis-s4-xs border-dark-xs text-center-xs m-05-xs" style="height: 50px; line-height: 50px;">2</div>
  <div class="flex-basis-s6-xs border-dark-xs text-center-xs m-05-xs" style="height: 50px; line-height: 50px;">3</div>
</div>

Align Self

This allows individual flex items to have their own unique alignment within the container. This also overrides the container align-items property.

Class Description
.flex-self-auto-xs (Default) Auto align, which inherits the align-items property
.flex-self-start-xs Cross-start margin edge of the flex item is placed on the cross-start line (align-self: flex-start)
.flex-self-start-flush-xs Cross-start margin edge of the item is placed on the cross-start line (align-self: start)
.flex-self-end-xs Cross-end margin edge of the flex item is placed on the cross-end line (align-self: flex-end)
.flex-self-end-flush-xs Cross-end margin edge of the item is placed on the cross-end line (align-self: end)
.flex-self-center-xs Items are centered in the cross-axis
.flex-self-stretch-xs Stretch to fill the container but still respects min/max-width
.flex-self-baseline-xs Items are aligned such as their baselines align
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
<div class="flex-block-xs border-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="flex-self-start-xs border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="flex-self-end-xs border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="flex-self-center-xs border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="flex-self-stretch-xs border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>
<div class="flex-block-xs border-xs border-none-t-xs p-05-xs">
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">1<br>2</div>
  <div class="flex-self-baseline-xs border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">3</div>
  <div class="border-dark-xs text-center-xs m-05-xs" style="width: 50px; line-height: 50px;">4<br>5</div>
</div>