Flexbox layout

Flexbox layout system

 .flx

 /** or inline */
 .flxInline

This layout makes use of the global flx union

Requirements:

None

Modifiers:

Row flex flow

Row direction and wrapping behavior.

 .flx.--flxRow

 /** it can be reversed */
 .flx.--flxRowReverse

 /** or allow content wrapping */
 .flx.--flxRow-wrap
 .flx.--flxRowReverse-wrap

Column flex flow

Column direction and wrapping behavior.

 .flx.--flxColumn

 /** it can be reversed */
 .flx.--flxColumnReverse

 /** or allow content wrapping */
 .flx.--flxColumn-wrap
 .flx.--flxColumnReverse-wrap

Unions:

None

Example

njk
<div class="flx --flxColumn">
 TODO: flexbox example
</div>
html compiled
<div class="flx --flxColumn">TODO: flexbox example</div>