Distribute

Container that evenly spaces its children using flexbox.

Layout

The Distribute component is a flex container. It spaces its children an even distance from each other, centered within the container, and wraps them onto new lines as needed.

To create one, use the class cd-distribute on a container element.

When you want elements to stay aligned instead of spreading out to fill the available space, use the Wrap component instead. When you want elements to stay aligned and not wrap, use the Stack component instead.

<div class="example cd-distribute" style="width: 16rem">
  <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>

Spacing

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

cd-spacing-none
cd-spacing-densest
cd-spacing-denser
cd-spacing-dense
cd-spacing-normal (default)
cd-spacing-sparse
cd-spacing-sparser
cd-spacing-sparsest

None

Densest

Denser

Dense

Normal

Sparse

Sparser

Sparsest

<h3 class="h6">None</h3>
<div class="cd-distribute cd-spacing-none example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Densest</h3>
<div class="cd-distribute cd-spacing-densest example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Denser</h3>
<div class="cd-distribute cd-spacing-denser example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Dense</h3>
<div class="cd-distribute cd-spacing-dense example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Normal</h3>
<div class="cd-distribute example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparse</h3>
<div class="cd-distribute cd-spacing-sparse example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparser</h3>
<div class="cd-distribute cd-spacing-sparser example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparsest</h3>
<div class="cd-distribute cd-spacing-sparsest example">
  <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:

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

Horizontal

Vertical

<h3 class="h6">Horizontal</h3>
<div
  class="cd-distribute cd-orientation-horizontal example"
>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Vertical</h3>
<div class="cd-distribute cd-orientation-vertical example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>