The following classes set
display: flex and set the
flex-direction based on the value in its name.
Grow and shrink
flex-grow: 1. Allows elements to grow and take available space within a flexbox.
flex-grow: 0. Disallows elements to grow and take available space within a flexbox.
flex-shrink: 1. Allows elements to shrink below its size when the flexbox shrinks.
flex-shrink: 0. Disallows elements to shrink below its size when the flexbox shrinks.
flex-wrap: wrap. This allows items exceeding the flexbox to go to a new line.
flex-wrap: nowrap. Going to a new line is disallowed.
- Justify content: defines how content aligns around the main axis. Used with
- Align content: defines how multi-line content aligns around the main axis. Used with
- Align items: defines how content aligns around the cross axis. Used with
- Self align: overwrites the default align items value set on the parent on individual elements within the Flexbox. Used with .self-
All these classes follow the same pattern:
.<type>-<value>. Note that not all values are available for all types.
The new gap property can be accessed by using the
flex-g-<name>, where name is based on