Alignement & ordre¶
Horizontal (sur la grille)¶
.align-left / .align-right / .align-center / .align-justify / .align-spaced
A
B
A
B
Vertical (sur la grille ou la cellule)¶
.align-top / .align-middle / .align-bottom / .align-stretch, et au niveau cellule : .align-self-top, .align-self-middle…
align-middle
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Centrage total¶
.align-center-middle centre horizontalement et verticalement.
<div class="flex-x align-center-middle" style="height: 200px;">
<div class="cell phone-4">Au centre</div>
</div>
Ordre des sources¶
Réorganisez sans hack de positionnement avec .[bp]-order-[n].
DOM 1 → 2ᵉ en phone, 1ᵉʳ en tablette+
DOM 2 → 1ᵉʳ en phone, 2ᵉ en tablette+
Helpers flex¶
.flex-container, .flex-dir-row|column[-reverse], .flex-child-auto|grow|shrink, tous déclinés en responsive (.desktop-flex-dir-row…).