Skip to main content

CSS Flexbox Cheat Sheet

Web

CSS Flexbox Cheat Sheet

# CSS Flexbox Cheat Sheet

Flexbox lays out items in one dimension (a row or a column).

Container properties

PropertyCommon values
displayflex, inline-flex
flex-directionrow, row-reverse, column, column-reverse
flex-wrapnowrap, wrap, wrap-reverse
justify-contentflex-start, center, space-between, space-around, space-evenly
align-itemsstretch, flex-start, center, baseline
align-contentflex-start, center, space-between, stretch
gapany length, e.g. 1rem

Item properties

PropertyPurpose
flex-growHow much an item grows (default 0)
flex-shrinkHow much an item shrinks (default 1)
flex-basisInitial size before growing/shrinking
flexShorthand: flex: 1 = 1 1 0
align-selfOverride align-items for one item
orderReorder without changing HTML

Centering anything

css
12345 
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

More Web references

HTML5 Tags Cheat Sheet

A quick reference to the most-used HTML5 elements grouped by purpose.

 JavaScript Array Methods

The most useful array methods with what they return.
← All cheat sheets