Flex

flex enables flex properties.

Direction

Once enabled you can specify the flex-direction behaviour with an additional class. The browser default state is flex-direction: row.

f-row sets flex-direction to row

f-row-rev sets flex-direction to row-reverse

f-col sets flex-direction to column

f-col-rev sets flex-direction to column-reverse

Wrapping

You can set items to wrap based on the available space . Wrapping behaviour is no-wrap by browser default.

f-wrap sets flex-wrap to wrap

Shorthand Positioning

In addition you can specify the positioning of the direct child elements with shorthand classes.

f-start sets both justify-content and align-items to flex-start

f-end sets both justify-content and align-items to flex-end

f-center sets both justify-content and align-items to center

f-around sets both justify-content and align-items to space-around

f-between sets both justify-content and align-items to space-between

Alignment

For more control you can set the align-items attribute specifically.

fa-start sets align-items to flex-start

fa-end sets align-items to flex-end

fa-center sets align-items to center

fa-around sets align-items to space-around

fa-between sets align-items to space-between

Justification

You can also set the justify-content attribute specifically.

fj-start sets justify-content to flex-start

fj-end sets justify-content to flex-end

fj-center sets justify-content to center

fj-around sets justify-content to space-around

fj-between sets justify-content to space-between

Gap

You can set the gap between flex items using the Framework standard spacing sizes.

gap-xsml sets gap to value of --space-xsml

gap-sml sets gap to value of --space-sml

gap-med sets gap to value of --space-med

gap-lrg sets gap to value of --space-lrg

gap-xlrg sets gap to value of --space-xlrg

For more control you specifcally target the column-gap.

gapx-xsml sets only column-gap to value of --space-xsml

gapx-sml sets only column-gap to value of --space-sml

gapx-med sets only column-gap to value of --space-med

gapx-lrg sets only column-gap to value of --space-lrg

gapx-xlrg sets only column-gap to value of --space-xlrg

You can also specifcally target the row-gap.

gapy-xsml sets only row-gap to value of --space-xsml

gapy-sml sets only row-gap to value of --space-sml

gapy-med sets only row-gap to value of --space-med

gapy-lrg sets only row-gap to value of --space-lrg

gapy-xlrg sets only row-gap to value of --space-xlrg