jrgermain/ stylesheet
GitHub NPM

Layout (Flex)

Example Code

<div class="dense horizontal stack">
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>
</div>

Result

Options

Layout Type

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. Unline flow, the space between elements adjusts based on how much is available.

Flow

1
2
3
4
5

Stack

1
2
3
4

Separate

1
2

Space

1
2
3
4
5

Density

You can optionally add one of the following modifier classes to change the spacing between children:

  • densest
  • denser
  • dense
  • sparse
  • sparser
  • sparsest

By default, layouts have a density in between dense and sparse.

Densest

1
2
3

Denser

1
2
3

Dense

1
2
3

Default

1
2
3

Sparse

1
2
3

Sparser

1
2
3

Sparsest

1
2
3

Orientation

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

  • horizontal, or the synonym horizontally
  • vertical, or the synonym vertically

In either case, the two synonym classes are equivalent. Use whatever is the most readable in your situation.

By default, layouts are horizontal.

Horizontal

1
2
3

Vertical

1
2
3