CSS Flexbox Reference

Tuesday, 16 March 2021

Style Option Explanation
Parent styles
display: flex Set flex rendering on this item and its children
flex-flow: direction wrap Recommended shorthand
flex-direction: row, row-reverse One single horizontal row
  column, column-reverse One single vertical column.
flex-wrap: nowrap All items on one line
  wrap, wrap-reverse Wrap onto multiple lines if necessary.
justify-content: flex-start, flex-end Start/end of flex area
  center Center items
  space-between Align with edges
  space-around Apply equal padding to all boxes
  space-evenly Apply equal margin to all boxes
align-items: flex-start, flex-end How each box align itself on the cross axis
  center (may affect box size)
align-content: flex-start, flex-end How all boxes align in the parent
  center, stretch (does not affect box size)
Children styles
order: n Defines the position of the box in the order (-1, 1, 1, 1, 2, 3, 99 etc).
flex: grow shrink basis Recommended shorthand
flex-grow: n Relative grow size compared to others.
flex-shrink: n Relative shrink size compared to others. Negative numbers are invalid.
flex-basis: size, auto Default size of element. 5em, 20px, etc.
align-self: align-items Overrides individual box alignment.

float, clear, and vertical-align have no effect on flex items.