Flex Container
A container holding flex items. Declared by setting the display property to flex or inline-flex.
Example — display: flex;
Properties
- flex-direction
- items direction on the flex line || main axis
- row
- row-reverse
- column
- column-reverse
- flex-wrap
- when needed, wraps items onto a new flex line
- no-wrap
- wrap
- wrap-reverse
- justify-content
- item's position on the flex line || main axis
- flex-start
- flex-end
- center
- space-between
- space-around
- align-content
- flex lines' position ⊥ main axis, 2+ flex lines
- stretch
- flex-start
- flex-end
- center
- space-between
- space-around
- align-items
- item's position on the flex line ⊥ main axis
- stretch
- flex-start
- flex-end
- center
- baseline
- flex-flow
- shorthand for flex-direction and flex-wrap
flex-flow: {flex-direction} {flex-wrap};- row
- no-wrap
Flex Item
The immediate children of a flex container. Positioned along a flex line. Direction depends on the writing
mode. Example — flex: auto;
Properties
- flex
- how extra space is distributed along the flex line || main axis
-
in the form of
flex: {grow} {shrink} {basis}; -
{grow}and{shrink}must be positive number values -
- initial
- inflexibly grow, flexibly shrink, auto basis
flex: 0 1 auto;
-
- auto
- fully flexible, auto basis
flex: 1 1 auto;
-
- none
- fully inflexible, auto basis
flex: 0 0 auto;
-
- {number}
- number for grow, flexible shrink, 0% basis
flex: {number} 1 0%;
-
- {number-a} {number-b}
- number-a for grow, number-b for shrink, 0% basis
flex: {number-a} {number-b} 0%;
-
- {number-a} {number-b} {value}
- number-a for grow, number-b for shrink, value for basis
flex: {number-a} {number-b} {value};
- align-self
- overrides container align-items property
- auto
- stretch
- flex-start
- flex-end
- center
- baseline
- order
- item's order relative to other sibling items
- any positive or negative integer
- 0
- margin
- not specific to flex items
- 0
-
- auto
- a quick way to center an item along both axes
- visibility
- changes the behavior of the cross size rendering
- not specific to flex items
- visible
-
- collapse
- keeps the cross size as if the item were visible but does not render the item
-
- hidden
- does not keep the cross size as if the item were visible and does not render the item