CSS Flexbox Cheat Sheet

CSS Flexbox Cheat Sheet

Every Flexbox property in one quick reference.

Container Properties

display: flex;              /* activate */
flex-direction: row | column;
justify-content: center;   /* main axis */
align-items: center;       /* cross axis */
flex-wrap: wrap;
gap: 16px;

justify-content (Main Axis)

Value	Effect
flex-start	Pack to start
center	Center
space-between	Space between
space-around	Space around
space-evenly	Equal space

align-items (Cross Axis)

Value	Effect
stretch	Fill (default)
center	Center
flex-start	Top
flex-end	Bottom

Item Properties

flex: 1;            /* grow to fill */
flex-grow: 2;       /* growth ratio */
flex-shrink: 0;     /* don't shrink */
align-self: center; /* override align-items */
order: 2;           /* reorder */

Perfect Center

display: flex;
justify-content: center;
align-items: center;

FAQs

justify-content vs align-items?

justify = main axis; align = cross axis. More in our cheat sheets and CSS guides.

Flexbox or Grid?

Flexbox for 1D, Grid for 2D layouts.