stylesheet

Flex

Utility classes for managing layouts with flexbox.

Layout

The Flex component supports three different layouts. To create a Flex, first, choose a layout. Then, apply that layout to a container by giving the container one of the following classes:

  • wrap: children are placed a fixed distance apart, wrapping onto new lines as needed.
  • stack: children are placed a fixed distance apart and prevented from wrapping.
  • distribute: children are spaced evenly within their container, wrapping onto new lines as needed.

The examples below place children in a container with a fixed width to better illustrate how each behaves.

Wrap

1
2
3
4
5

Stack

1
2
3
4

Distribute

1
2
3
4
5
HTML Copied! 
<h3 class="h6">Wrap</h3>
<div class="flex-example wrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>
<h3 class="h6">Stack</h3>
<div class="flex-example stack">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
<h3 class="h6">Distribute</h3>
<div class="flex-example distribute">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

Density

You can optionally add one of the following modifier classes to change the spacing between children (ordered from most compact to most spread out):

  • no-gap
  • densest
  • denser
  • dense
  • normal (default)
  • sparse
  • sparser
  • sparsest

No Gap

1
2
3

Densest

1
2
3

Denser

1
2
3

Dense

1
2
3

Normal

1
2
3

Sparse

1
2
3

Sparser

1
2
3

Sparsest

1
2
3
HTML Copied! 
<h3 class="h6">No Gap</h3>
<div class="wrap no-gap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Densest</h3>
<div class="wrap densest">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Denser</h3>
<div class="wrap denser">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Dense</h3>
<div class="wrap dense">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Normal</h3>
<div class="wrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparse</h3>
<div class="wrap sparse">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparser</h3>
<div class="wrap sparser">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparsest</h3>
<div class="wrap sparsest">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Orientation

You can optionally add one of the following modifier classes to change the axis along which the children are laid out:

  • horizontal (default): elements are laid out along the x-axis
  • vertical: elements are laid out along the y-axis

Horizontal

1
2
3

Vertical

1
2
3
HTML Copied! 
<h3 class="h6">Horizontal</h3>
<div class="stack horizontal">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Vertical</h3>
<div class="stack vertical">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>