Flexbox

In Codebase, .flexbox is used for positioning and stretching items relative to their container.

The Flexbox Wrapper

.flexbox

If you only use the class .flexbox, you get a flexbox with (immediate-child) flex-items.

<div class="flexbox">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Notes:

1. There is no .flexbox-item class – there is no need for it.
2. If necessary, flex items will wrap to form multiple rows.

Flexbox Stretching

.flexbox-grow-equal

Expands flex-items to occupy equal widths in the available space.

<div class="flexbox flexbox-grow-equal">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

.flexbox-grow-auto

Expands flex-item widths adjusted according to their content.

Also, flexbox row wrapping is exemplified below.

Flexbox Spacing

.flexbox.flexbox-gap

Adds a 0.75rem margin around each grid item on all four sides – so that a 1.5rem (i.e. default line height) gap is built in between grid items horizontally and vertically.

The .flexbox-gap class also adds a -0.75rem margin to the container in order to compensate for flex item margins towards the edges of the container.

Also, flexbox row wrapping is exemplified below.

.flexbox.flexbox-space-between

Flexbox Positioning

.flexbox.flexbox-left / .flexbox.flexbox-center / .flexbox.flexbox-right

.flexbox.flexbox-top / .flexbox.flexbox-middle / .flexbox.flexbox-bottom

Responsive Flexbox

Wrapper: .flexbox-md or .flexbox-lg
Wrapper modifiers: .flexbox-md-* or .flexbox-lg-*

Do you want a stack (column) of blocks to switch to a flexbox row aove a certain viewport width? Don't use .flexbox – use .flexbox-md or .flexbox-lg instead.

Example .flexbox-lg:

Do you want your group of flex items to be stretched or positioned differently above a certain viewport width? Use .flexbox-md-* and/or .flexbox-lg-* modifiers.

Example .flexbox.flexbox-left.flexbox-md-center.flexbox-lg-right:

Note: flexbox wrapper modifiers targeting a wider viewport width won’t work unless you have set a flexbox wrapper targeting the same or narrower viewport width.

E.g. This won’t be centered on medium viewports (but it is centered on large viewports):

<div class="flexbox-lg flexbox-md-center">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Flexbox Classes