Flexbox Layout
Flexbox Layout — Complete guide to CSS Flexbox for one-dimensional layouts: flex containers, items, alignment, and responsive patterns. The guide walks through Flex Container, Flex Items. `display:flex` — enables flexbox. `flex-direction: row | column | row-reverse | column-reverse` — main axis. `flex-wrap: wrap | nowrap` — multi-line. `justify-content: center | space-between | space-around | space-evenly | flex-start | flex-end` — main axis alignment. `align-items: center | stretch | flex-start | flex-end | baseline` — cross axis alignment. `flex-grow: 1` — how much to grow relative to siblings. `flex-shrink: 0` — prevent shrinking. `flex-basis: 200px` — initial size before growing/shrinking. Shorthand: `flex: 1 0 200px`. `align-self: center` — override alignment for individual item. `order: -1` — reorder items (use sparingly). Common: `flex:1` for equal width items. The guide is organized into 2 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is. Related guides: CSS Introduction, CSS Selectors, CSS Box Model, CSS Flexbox, CSS Grid.