Direction
The following classes set display: flex
and set the flex-direction
based on the value in its name.
.flex-col
(column).flex-row
.flex-col-reverse
(column-reverse).flex-row-reverse
Grow and shrink
.flex-grow
: setsflex-grow: 1
. Allows elements to grow and take available space within a flexbox..flex-grow-0
: setsflex-grow: 0
. Disallows elements to grow and take available space within a flexbox..flex-shrink
: setsflex-shrink: 1
. Allows elements to shrink below its size when the flexbox shrinks..flex-shrink-0
: setsflex-shrink: 0
. Disallows elements to shrink below its size when the flexbox shrinks.
Wrap
.flex-wrap
: setsflex-wrap: wrap
. This allows items exceeding the flexbox to go to a new line..flex-nowrap
setsflex-wrap: nowrap
. Going to a new line is disallowed.
Justify/align/place
- Justify content: defines how content aligns around the main axis. Used with
.justify-<value>
. - Align content: defines how multi-line content aligns around the main axis. Used with
.content-<value>
. - Align items: defines how content aligns around the cross axis. Used with
.items-<value>
. - Self align: overwrites the default align items value set on the parent on individual elements within the Flexbox. Used with .self-
`. - place items: Used with
.place-<value>
.
All these classes follow the same pattern: .<type>-<value>
. Note that not all values are available for all types.
.<type>-start
(flex-start).<type>-end
(flex-end).<type>-center
.<type>-stretch
.<type>-baseline
.<type>-between
(space-between).<type>-around
(space-around).<type>-evenly
(space-evenly)
Grid
Classes for CSS grids.
.grid-<number>
: creates a grid with equal sized columns..grid-col-<number>
: sets thegrid-column
property to the number..grid-row-<number>
: sets thergrid-row
property to the number.
Gap
The new gap property can be accessed by using the gap-<name>
, where name is based on $feo-sizes
.