Concord
InfoComponentsUtilities

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.

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.

1
2
3
4
5
HTMLCopied!
<div class="example 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>

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
HTMLCopied!
<h3 class="h6">No Gap</h3>
<div class="distribute no-gap example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Densest</h3>
<div class="distribute 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="distribute 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="distribute 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="distribute normal example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparse</h3>
<div class="distribute 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="distribute 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="distribute 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:

  • 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
HTMLCopied!
<h3 class="h6">Horizontal</h3>
<div class="distribute 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="distribute vertical example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>