Flexbox

§ Flex containers

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

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

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

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

§ align-items

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

§ 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

Last updated 2022-08-17