guide2 min read

Flexbox Guide

Complete guide to CSS Flexbox layout with examples.

Flexbox layouts: Container properties: display: flex, flex-direction (row/column), justify-content (main axis: flex-start, center, flex-end, space-between, space-around, space-evenly), align-items (cross axis: stretch, center, flex-start, flex-end), flex-wrap (wrap/nowrap), gap (spacing between items). Item properties: flex-grow (expand to fill), flex-shrink (shrink to fit), flex-basis (initial size), align-self (override container alignment), order (visual order). Most common pattern: display: flex; justify-content: space-between; align-items: center.