Flexbox helpers

Here is a set of flexbox classes, to help positionning elements only using classes.

Containers

div
span em
<div class="flex">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>

Note: flex class applies min-width: 0 and min-height: 0 to the direct children. In some very super-rare cases (selects, etc.), this can create bugs. In these cases, you might use flex-noMinChildren.

div
span em
<div class="flex flex-row">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>
div
span em
<div class="flex flex-reverse">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>
div
span em
<div class="flex flex-column">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>
div
span em
<div class="flex flex-column-reverse">
  <div class="">div</div>
  <span class="">span</span>
  <em class="">em</em>
</div>
div
span em
<div class="flex flex-spacebetween">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>
div
span em
<div class="flex flex-spacearound">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>
div
span em
<div class="flex flex-justify-end">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>
div
span em
<div class="flex flex-justify-center">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>
div
span em
<div class="flex flex-column flex-items-center">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>
div
span em
<div class="flex flex-column flex-items-end">
  <div>div</div>
  <span>span</span>
  <em>em</em>
</div>

Additional class: flex-nowrap applies flex-wrap: nowrap; to element (to avoid children wrap to the line).

Items size and behaviour

.w150p
.w25 .flex-item-fluid
<div class="flex ">
  <div class="w150p">.w150p</div>
  <span class="w25">.w25</span>
  <em class="flex-item-fluid">.flex-item-fluid</em>
</div>

flex-item-fluid applies flex: 1 1 0px to the element.

flex-item-fluid-auto applies flex: 1 1 auto to the element.

If you need an element that does not shrink, you may use flex-item-noshrink (applies flex-shrink: 0).
If you need an element that does not grow, you may use flex-item-nogrow (applies flex-grow: 0).
If you need an element that does not flex at all, you may use flex-item-noflex (applies flex: 0).
If you need an element that centers itself, you may use flex-self-vcenter (applies align-self: center). In some other cases, you may use mauto class (margin: auto).
If you need an element that aligns itself on the top/beginning, you may use flex-self-start (applies align-self: flex-start).

flex-item-grow-2 allows the fluid item to grow per 2 factor.

Simple horizontal autogrid (default spacing is 1em)

.flex-autogrid-item
.flex-autogrid-item
.flex-autogrid-item
.flex-autogrid-item
.flex-autogrid-item
<div class="flex-autogrid">
  <div class="flex-autogrid-item">…</div>
  <div class="flex-autogrid-item">…</div>
  …
</div>

Responsive

Resize the window, by default, elements take all the width on mobile thanks to onmobile-flex-column (or ontablet-flex-column).

.w30
.w30 .w30
<div class="flex flex-spacebetween onmobile-flex-column">
  <div class="w30">div</div>
  <span class="w30">span</span>
  <em class="w30">em</em>
</div>

This can be avoided using onmobile-flex-column-nostretch.

.w30
.w30 .w30
<div class="flex flex-spacebetween onmobile-flex-column-nostretch">
  <div class="w30">div</div>
  <span class="w30">span</span>
  <em class="w30">em</em>
</div>

This can also be used on .autogrid class.

.flex-autogrid-item
.flex-autogrid-item
<div class="flex-autogrid onmobile-flex-column">
  <div class="flex-autogrid-item">…</div>
  <div class="flex-autogrid-item">…</div>
</div>