Flexbox

§ Flex containers

.flex-row and .flex-column will create non-wrapping Flexbox containers, with flex-direction set to row and column respectively.

.flex-switch will create a Flexbox container that will switch from row to column when the width of an individual descendant exceeds the --flex-switch-threshold variable (default 15ch).

All of .flex-row, .flex-column and .flex-switch will remove margins from their children, and have a gap set to --gap.

Deprecated: The original names for these classes, .f-row, .f-col, and .f-switch (as well as --f-switch-threshold), have been deprecated in favor of the more intuitive names given above. The original names will be removed in version 2.0.

The following utility classes are meant to be applied to flex containers:

§ justify-content

• .justify-content:start
• .justify-content:end
• .justify-content:baseline
• .justify-content:center
• .justify-content:stretch
• .justify-content:space-between
• .justify-content:space-around
• .justify-content:space-evenly

§ align-items

• .align-items:start
• .align-items:end
• .align-items:baseline
• .align-items:center
• .align-items:stretch

§ flex-wrap

• .flex-wrap:nowrap
• .flex-wrap:wrap

§ Flex children

The following utility classes can be used on flex children:

§ align-self

• .align-self:start
• .align-self:end
• .align-self:baseline
• .align-self:center
• .align-self:stretch

§ flex-grow

• .flex-grow:0
• .flex-grow:1
• .flex-grow:2
• .flex-grow:3
• .flex-grow:4
• .flex-grow:5
• .flex-grow:6
• .flex-grow:7
• .flex-grow:8
• .flex-grow:9
• .flex-grow:10
• .flex-grow:11
• .flex-grow:12