Flexbox Cheat Sheet
Container
display: flex
ordisplay: inline-flex
: creates a flex context (or an inline flex context) for direct children of this elementflex-direction
determines the main and cross axis for the container, valid values are:row
(default): horizontal, in the direction of writing (left to right for English)row-reverse
: horizontal, in the opposite direction of writing (right to left for English)column
: vertical, top to bottomcolumn-reverse
: vertical, bottom to top
flex-wrap
determines if flex items will try to fit in one line, valid values are:nowrap
(default): all flex items will be on one linewrap
: flex items will wrap onto multiple lines, top to bottomwrap-reverse
: flex items will wrap onto multiple lines, bottom to top
flex-flow
: shorthand combiningflex-direction
andflex-wrap
- Formal syntax:
flex-flow: <'flex-direction'> || <'flex-wrap'>
- Formal syntax:
justify-content
defines the alignment along the main axis, valid values are:flex-start
(default): pack flex items from the startflex-end
: pack flex items from the endstart
: pack items from the startend
: pack items from the endleft
: pack items from the leftright
: pack items from the rightcenter
: pack items around the centerspace-around
: distribute items evenly with equal space around themspace-between
: distribute items evenly with equal space between themspace-evenly
: distribute items evenly, ensuring equal space between any two itemsstretch
: distribute items evenly, stretching auto-sized items to fit the container
align-items
defines the alignment along the cross axis, valid values are:flex-start
(default): pack flex items from the startflex-end
: pack flex items from the endstart
: pack items from the startend
: pack items from the endcenter
: pack items around the centerbaseline
: align items based on their baselinesstretch
: stretch items to fill the container
align-content
defines the alignment of extra space along the cross axis, valid values are:flex-start
(default): pack flex items from the startflex-end
: pack flex items from the endstart
: pack items from the startend
: pack items from the endcenter
: pack items around the centerspace-around
: distribute items evenly with equal space around themspace-between
: distribute items evenly with equal space between themspace-evenly
: distribute items evenly, ensuring equal space between any two itemsstretch
: distribute items evenly, stretching auto-sized items to fit the container
Items
flex-grow
determines how much the item can grow if necessary- Accepts a single positive number (unitless), default value is
0
- Specifies how much of the remaining space in the flex container should be assigned to the item
- The remaining space is the size of the flex container minus the size of all flex items' sizes together
- If all items have the same
flex-grow
, all items will receive an equal share of the remaining space - If not all items have the same
flex-grow
, the remaining space is distributed according to the ratio defined by these values
- Accepts a single positive number (unitless), default value is
flex-shrink
determines how much the items can shrink if necessary- Accepts a single positive number (unitless), default value is
1
- If the size of all flex items is larger than the flex container, items shrink to fit according to
flex-shrink
- Accepts a single positive number (unitless), default value is
flex-basis
determines the initial size of a flex item before the remaining space is distributedflex
: shorthand combiningflex-grow
,flex-shrink
andflex-basis
- Formal syntax:
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
- Formal syntax:
align-self
allows the item to override the defaultalign-items
specified by the container- Valid values are the same as those of the
align-items
property in the container
- Valid values are the same as those of the
order
determines the ordering of the item- Accepts an integer value
- Items in a container are sorted by ascending
order
value and then by their source code order - Might cause accessibility issues if used incorrectly