Flexbox

flexbox の Utility クラスです。

Display

display: flex; は ab-flex で設定できます。

flex-direction は row, row-reverse, column, column-reverse の 4 種類あります。

flex-wrap は nowrap, wrap, wrap-reverse の 3 種類あります。

justify-content は start(flex-start), end(flex-end), center, between(space-between), around(space-around) の 5 種類あります。

align-items は start(flex-start), end(flex-end), center, baseline, stretch の 5 種類あります。

align-content は start(flex-start), end(flex-end), center, between(space-between), around(space-around), stretch の 6 種類あります。

flex は 1, auto, none の 3 種類あります。また、個別に flex-grow: 0, flex-shrink: 0 も設定可能です

align-self は auto, start(flex-start), end(flex-end), center, baseline, stretch の 6 種類あります。

order は none(inherit), 1, 2 の 3 種類あります。

flexbox の各種 class は ab-{breakpoint}-{property} でレスポンシブ対応しています。