CSS Flexbox & Grid Master Reference
Production-ready syntax grids for modern CSS layouts and container alignment.
Flexbox Container (Parent)
| Property | Common Values | Function |
|---|---|---|
| flex-direction | row | column | row-reverse | Sets the primary axis of the container. |
| justify-content | flex-start | center | space-between | Aligns items along the **Main Axis**. |
| align-items | stretch | center | flex-end | Aligns items along the **Cross Axis**. |
| flex-wrap | nowrap | wrap | wrap-reverse | Defines if items should force onto a new line. |
CSS Grid Layout (Parent)
| Property | Syntax Example | Function |
|---|---|---|
| grid-template-columns | repeat(3, 1fr) | 200px 1fr | Defines the width of track columns. |
| gap | 10px | 1rem 2rem | Sets the spacing between rows and columns. |
| grid-area | header | 1 / 2 / 3 / 4 | Assigns an item to a specific grid location. |
Performance Note: Use **Flexbox** for one-dimensional layouts (a row of buttons, a navigation bar) and **CSS Grid** for two-dimensional layouts (full page structures, complex image galleries).