Web Development · Cheatsheet
CSS Flexbox Cheatsheet
Flex container and item properties, alignment, ordering, and common layout patterns
36 commands 6 sections
No entry matches that filter.
-
display: flexEnable flex layout on container -
display: inline-flexInline-level flex container -
flex-direction: rowMain axis: left to right (default) -
flex-direction: row-reverseMain axis: right to left -
flex-direction: columnMain axis: top to bottom -
flex-direction: column-reverseMain axis: bottom to top -
flex-wrap: nowrapSingle line (default) -
flex-wrap: wrapWrap to multiple lines -
flex-wrap: wrap-reverseWrap in reverse direction
-
justify-content: flex-startPack items to start (default) -
justify-content: flex-endPack items to end -
justify-content: centerCenter items along main axis -
justify-content: space-betweenEqual space between items -
justify-content: space-aroundEqual space around items -
justify-content: space-evenlyEqual space between and around
-
align-items: stretchStretch items to fill (default) -
align-items: flex-startAlign items to cross-start -
align-items: flex-endAlign items to cross-end -
align-items: centerCenter items on cross axis -
align-items: baselineAlign items by text baseline -
align-content: flex-startPack lines to start (multi-line) -
align-content: centerCenter lines (multi-line) -
align-content: space-betweenSpace between lines (multi-line)
-
gap: 16pxEqual row and column gap -
gap: 16px 24pxRow gap and column gap -
row-gap: 16pxGap between rows only -
column-gap: 24pxGap between columns only
-
flex: 1Shorthand: grow=1, shrink=1, basis=0% -
flex: 0 0 200pxFixed 200px, no grow/shrink -
flex-grow: 1Allow item to grow (proportion) -
flex-shrink: 0Prevent item from shrinking -
flex-basis: 200pxInitial size before grow/shrink -
flex-basis: autoUse content size as basis -
align-self: centerOverride align-items for this item -
order: -1Change visual order (lower = first)
-
https://www.w3.org/TR/css-flexbox-1/W3C Flexbox specification: axes, flexible sizing, alignment, and ordering.