Flexbox

Flexbox 2

Enable

Direction

flex-columns flex-rows

Multi

flex-multi not

Main axis

flex--main-start flex--main-center flex--main-end flex--main-around flex--main-between

Cross axis

flex--cross-stretch flex--cross-start flex--cross-center flex--cross-end

Cross multi axis

flex-multi--cross-start flex-multi--cross-stretch flex-multi--cross-center flex-multi--cross-end flex-multi--cross-around flex-multi--cross-between

Basic grid

Classes: {{ [ direction, multi, cross, main, multi_cross ].join(' ') }}

flex-cell--1-3 first
flex-cell--1-3 second
flex-cell--1-3
flex-cell--2-3
flex-cell--1-3
flex-cell--1-4
flex-cell--1-4
flex-cell--1-4
flex-cell--1-4
flex-cell--1-5
flex-cell--1-5
flex-cell (auto) last