CSS
CSS Flexbox Cheat Sheet — Properties Reference
Flexbox properties split into two groups — those you set on the container, and those you set on the items. This reference covers both.
Put it into practice with the matching tool.
Try the Flexbox playground →Advertisement
Container properties
display: flexMake the element a flex containerflex-direction: row | columnMain axis direction (also row-reverse, column-reverse)justify-content: centerAlign items along the main axisjustify-content: space-betweenEven gaps, no space at the endsalign-items: centerAlign items along the cross axisalign-items: stretchItems fill the cross axis (default)flex-wrap: wrapAllow items to wrap onto multiple linesalign-content: centerAlign wrapped lines (only with wrapping)gap: 12pxSpace between itemsItem properties
flex: 1Grow to fill available space (shorthand)flex-grow: 1How much the item grows relative to siblingsflex-shrink: 0Prevent the item from shrinkingflex-basis: 200pxStarting size before growing/shrinkingalign-self: flex-endOverride align-items for one itemorder: -1Change visual order without changing the HTMLCommon recipes
display:flex; justify-content:center; align-items:centerPerfectly center a child both waysdisplay:flex; justify-content:space-betweenNavbar — logo left, links rightmargin-left: autoPush one item to the far rightdisplay:flex; flex-wrap:wrap; gap:16pxResponsive wrapping card rowflex-direction: column; min-height: 100vhSticky footer layout