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, 58 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
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. | ||
.container { display: inline-flex;} | • The container becomes an inline-level flex container — only takes width of its content, flows horizontally with siblings, children still become flex items • Does not affect flex item behavior, only container's outer display |