Flexbox Cheat Sheet: The Complete CSS Layout Reference

Why Flexbox Matters

Before flexbox, developers struggled with vertical centering, equal-height columns, and sticky footers using workarounds like float, table display, or absolute positioning. Flexbox solves these common layout challenges with a declarative, predictable model.

The key advantage lies in its flexibility: elements can grow to fill available space, shrink to prevent overflow, and automatically adjust their layout based on the container's dimensions. This makes flexbox ideal for navigation menus, card layouts, form controls, and any interface component requiring precise alignment.

Beyond visual appeal, proper layout structure also impacts how search engines interpret page content. When combined with search engine optimization best practices, well-structured flexbox layouts help crawlers understand content hierarchy and improve discoverability.

Sources: W3C CSS Flexible Box Layout Module Level 1

Container Properties

The flex container establishes the layout context for all child elements. Understanding these properties unlocks the full potential of flexbox layouts.

display: The Foundation

The display property activates flexbox formatting for the container and its direct children.

.container {
 display: flex; /* Creates a block-level flex container */
}

.inline-container {
 display: inline-flex; /* Creates an inline-level flex container */
}

Using display: flex establishes a block-level box that participates in the normal block formatting flow. The inline-flex value creates a container that behaves like an inline-level element while maintaining flex context for its children.

flex-wrap: Controlling Overflow Behavior

The flex-wrap property determines whether flex items force onto a single line or wrap across multiple lines.

.container {
 flex-wrap: nowrap; /* All items on one line (default) */
 flex-wrap: wrap; /* Items wrap to additional lines */
 flex-wrap: wrap-reverse; /* Items wrap from bottom to top */
}

By default, nowrap forces all flex items onto a single line, potentially causing them to shrink below their minimum content size. The wrap value allows items to flow to subsequent lines when space is insufficient.

Source: CSS-Tricks - Flexbox Guide

justify-content: Aligning Along the Main Axis

The justify-content property distributes space between and around flex items along the main axis.

.container {
 justify-content: flex-start; /* Items packed toward start (default) */
 justify-content: flex-end; /* Items packed toward end */
 justify-content: center; /* Items centered */
 justify-content: space-between; /* Equal space between items */
 justify-content: space-around; /* Equal space around items */
 justify-content: space-evenly; /* Uniform spacing including edges */
}

The flex-start value packs items toward the beginning, while flex-end packs them toward the end. Centering with center creates balanced layouts ideal for hero sections. The space distribution values provide different approaches for spacing items evenly.

align-items: Aligning Along the Cross Axis

The align-items property defines how flex items are aligned along the cross axis, perpendicular to the main axis.

.container {
 align-items: stretch; /* Items stretch to fill container (default) */
 align-items: flex-start; /* Items aligned to cross-start edge */
 align-items: flex-end; /* Items aligned to cross-end edge */
 align-items: center; /* Items centered along cross axis */
 align-items: baseline; /* Items aligned by text baseline */
}

For row layouts, this property handles vertical alignment. The stretch value (default) causes flex items to extend across the entire cross axis dimension.

Item Properties

Individual flex items can override container-level alignment and control their own sizing behavior through these properties.

order: Customizing Item Sequence

The order property specifies the order in which flex items appear, independent of their source order.

.item {
 order: 0; /* Default value for all items */
 order: -1; /* Appears before items with order: 0 */
 order: 1; /* Appears after items with order: 0 */
}

Items with the same order value appear in their original source order. This enables visual reordering without HTML modifications, useful for responsive layouts.

flex-grow: Controlling Growth

The flex-grow property defines the proportion by which a flex item grows when positive space is available.

.item {
 flex-grow: 0; /* Item does not grow (default) */
 flex-grow: 1; /* Item grows equally with others */
 flex-grow: 2; /* Item grows twice as much */
}

When the container has extra space, items with positive flex-grow values expand proportionally.

align-self: Overriding Item Alignment

The align-self property allows individual flex items to override the container's align-items setting.

.item {
 align-self: auto; /* Inherits from align-items (default) */
 align-self: flex-start; /* Override: align to cross-start */
 align-self: flex-end; /* Override: align to cross-end */
 align-self: center; /* Override: center alignment */
 align-self: stretch; /* Override: stretch to fill */
}

This property proves useful when most items should follow one alignment rule but a specific element requires different positioning. For example, a navigation bar might center most items but position a logo at the start edge.

Common Layout Patterns

Perfect Centering

The most celebrated use case for flexbox is centering elements both horizontally and vertically.

.centered-container {
 display: flex;
 justify-content: center; /* Horizontal centering */
 align-items: center; /* Vertical centering */
}

This pattern eliminates the need for transform-based centering hacks and works predictably regardless of content size.

Card Layouts with Equal Height

Flexbox automatically creates equal-height columns without requiring JavaScript.

.card-container {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
}

.card {
 flex: 1 1 300px; /* Grow, shrink, 300px base width */
}

Responsive Navigation

Navigation menus benefit from flexbox's alignment and distribution capabilities.

.nav-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

Sticky Footer

Creating a footer that stays at the bottom when content is short.

.page-wrapper {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

main {
 flex: 1 0 auto; /* Grow to fill available space */
}

Source: GeeksforGeeks - Flexbox Guide

Browser Support

Flexbox enjoys excellent browser support across all modern browsers, including Chrome, Firefox, Safari, Edge, and mobile browsers. The W3C specification reached Candidate Recommendation status, indicating stable implementation across major browsers.

For projects requiring support for older browsers like Internet Explorer, specific prefixes and partial implementations may be necessary. Most modern web development can rely on unprefixed flexbox properties without fallback concerns.

Source: W3C CSS Flexible Box Layout Module Level 1

Sources

1. CSS-Tricks: A Complete Guide to Flexbox
2. MDN Web Docs: Basic Concepts of Flexbox
3. W3C: CSS Flexible Box Layout Module Level 1
4. GeeksforGeeks: Complete Guide to CSS Flexbox