100% Client-Side • 0 B Data Leaves Browser
css
CSS Flexbox Layout Properties Cheat Sheet
Complete visual and syntax reference for CSS Flexible Box layout properties on parent containers and flex children.
Parent Container Properties
Defines container as flex formatting contextdisplay: flex | inline-flex;
Defines main axis direction along which items are arrangedflex-direction: row | row-reverse | column | column-reverse;
Aligns flex items along the main axisjustify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
Aligns flex items along the cross axisalign-items: stretch | flex-start | center | flex-end | baseline;
Controls whether flex items are forced into single line or wrapflex-wrap: nowrap | wrap | wrap-reverse;
Defines gutter spacing between flex items without negative marginsgap: 1rem 1.5rem; /* row-gap column-gap */
Child Item Properties
Shorthand for flex-grow, flex-shrink, and flex-basisflex: 1 1 auto; /* grow shrink basis */
Defines ability for flex item to grow if extra space is availableflex-grow: 1;
Prevents flex item from shrinking smaller than its intrinsic widthflex-shrink: 0;
Allows individual flex item to override parent align-itemsalign-self: auto | flex-start | center | flex-end | baseline | stretch;
Controls visual display order of items without altering HTML sourceorder: 2;
Frequently Asked Questions
• What is the most modern way to center a div both horizontally and vertically?
On parent: `display: flex; justify-content: center; align-items: center;` or with CSS Grid: `display: grid; place-items: center;`.