Flexbox Cheatsheet
Interactive reference for CSS Flexbox properties, default values, syntax options, and common layout patterns.
Run tool
The CSS Flexbox cheatsheet provides a structured reference for both container and item properties in modern web design. When working with flex containers, you can inspect options for display modes, main-axis direction, multi-line wrapping, main-axis distribution, cross-axis alignment, multi-line alignment, and gap spacing with standard units such as pixels or rems. For flex items, the reference outlines rules for flex grow, flex shrink, initial flex basis, flex shorthand declarations, individual item alignment, and custom item ordering. Standard defaults are clearly identified, including row direction, nowrap behavior, start alignment on the main axis, stretch alignment on the cross axis, zero growth, a shrink factor of one, automatic alignment for items, and zero ordering. The reference also supplies ready-to-use CSS snippets for standard interface layouts, such as centering elements horizontally and vertically, building navigation bars, wrapping card collections, creating sidebar layouts, pinning sticky footers, and organizing equal-width columns.
Instructions
- Open the Flexbox reference tool in your browser.
- Select a container or item property section to view supported values, descriptions, and defaults.
- Check the layout patterns section to find starter CSS rules for common interface components.
- Copy the property declarations or layout rules directly into your stylesheet.
Examples
- Centering an element in both directions using justify-content: center and align-items: center on a display: flex container.
- Creating a responsive card grid using flex-wrap: wrap with a gap of 1rem or 16px between items.
FAQ
What are the default values in CSS Flexbox?
By default, a flex container sets flex-direction to row, flex-wrap to nowrap, justify-content to flex-start, and align-items to stretch. Flex items default to flex-grow: 0, flex-shrink: 1, flex-basis: auto, align-self: auto, and order: 0.
What is the difference between justify-content and align-items?
justify-content aligns flex items along the main axis (horizontally in a default row layout), whereas align-items controls alignment along the cross axis (vertically in a row layout).
What common layouts does this reference cover?
The reference provides example CSS snippets for centering items, navigation bars, wrapping card grids, sidebar layouts, sticky footers, and equal-width columns.