jrgermain/ stylesheet
GitHub NPM

Flex

Utility classes for managing spacing and layouts.

Layout

At a minimum, you must include exactly one of the following classes to determine which type of layout to apply:

  • flow: children are placed a fixed distance apart, wrapping onto new lines as needed.
  • stack: children are placed a fixed distance apart and guaranteed to stay on the same line.
  • separate: children are placed as far apart as possible while staying on the same line.
  • space: children are placed an even distance apart, wrapping onto new lines as needed. Unlike flow, the space between elements adjusts based on how much is available.

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

Flow

1
2
3
4
5

Stack

1
2
3
4

Separate

1
2

Space

1
2
3
4
5
HTML Copied! 
<h3 class="h6">Flow</h3>
<div class="flex-example flow">
  <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">Separate</h3>
<div class="flex-example separate">
  <div class="box">1</div>
  <div class="box">2</div>
</div>
<h3 class="h6">Space</h3>
<div class="flex-example space">
  <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):

  • densest
  • denser
  • dense
  • normal (default)
  • sparse
  • sparser
  • sparsest

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">Densest</h3>
<div class="flow densest">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Denser</h3>
<div class="flow denser">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Dense</h3>
<div class="flow dense">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Normal</h3>
<div class="flow">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparse</h3>
<div class="flow sparse">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparser</h3>
<div class="flow sparser">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparsest</h3>
<div class="flow 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>