CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that revolutionized web layout design by providing powerful alignment, distribution, and sizing capabilities for items within a container. Unlike older layout methods (floats, positioning), Flexbox automatically handles space distribution, wrapping, and responsive behavior with minimal code. It operates along a main axis and a cross axis, allowing precise control over how child elements (flex items) are aligned, ordered, and sized within a parent container (flex container). Flexbox is ideal for components, navigation bars, card layouts, forms, and any interface where one-dimensional flow is the primary concern.
What This Cheat Sheet Covers
This topic spans 26 focused tables and 111 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Container Display Types
The display property activates flexbox on a container, determining whether the container itself behaves as a block-level or inline-level element in the document flow while turning its direct children into flex items.
| Property | Example | Description |
|---|---|---|
.container { display: flex;} | The container becomes a block-level flex container — spans full width of parent, stacks vertically with siblings, and children become flex items laid out in a row by default. |