Back to Reference Guides
Frontend ReferenceModern CSS3 Standards
CSS Flexbox & CSS Grid Visual Guide
Quick visual syntax reference for flexbox axes, grid alignment, gap spacing, and responsive auto-fit layouts.
Flexbox Container (Parent) Properties
display: flex | inline-flexDefines a flex container; enables a flex context for all its direct children.flex-direction: row | row-reverse | column | column-reverseEstablishes the main-axis along which flex items are laid out.justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyAligns items along the main-axis (horizontal in row, vertical in column).align-items: stretch | flex-start | flex-end | center | baselineAligns items along the cross-axis (perpendicular to main axis).flex-wrap: nowrap | wrap | wrap-reverseControls whether flex items are forced onto a single line or can wrap.gap: <length>Explicitly controls the space between items without requiring margins.Flexbox Item (Child) Properties
flex-grow: <number> (default: 0)Ability for a flex item to grow if necessary to fill available space.flex-shrink: <number> (default: 1)Ability for a flex item to shrink if necessary when space is scarce.flex-basis: <length> | auto (default: auto)Default size of an element before remaining space is distributed.align-self: auto | flex-start | flex-end | center | baseline | stretchOverrides container default align-items for an individual item.CSS Grid Layout Superpowers
display: gridDeclares an element as a CSS Grid container.grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))Responsive auto-wrapping grid columns with zero media queries.grid-template-rows: auto 1fr autoStandard header / main body / footer layout.grid-column: 1 / -1Makes an element span across all columns from the first line to the last line.place-items: centerShorthand that sets both align-items and justify-items to center simultaneously.