Cheat Sheets/CSS Flexbox Visual Guide

css

CSS Flexbox Visual Guide

Interactive flexbox properties and values

CSSFlexboxLayout

Container Properties

display: flex

display: flex;

Enable flexbox on container

flex-direction

flex-direction: row | column | row-reverse | column-reverse;

Main axis direction

justify-content

justify-content: flex-start | center | space-between | space-around | space-evenly;

Align items along main axis

align-items

align-items: stretch | flex-start | center | flex-end | baseline;

Align items along cross axis

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

Allow items to wrap

gap

gap: 10px;

Space between flex items

Item Properties

flex-grow

flex-grow: 1;

How much item should grow

flex-shrink

flex-shrink: 0;

How much item should shrink

flex-basis

flex-basis: 200px;

Initial size before grow/shrink

flex shorthand

flex: 1 0 200px;

grow shrink basis

align-self

align-self: flex-end;

Override container align-items

order

order: 2;

Reorder items visually

css