Does it cover every flexbox property?

All 12 container props and 6 item props. Plus common patterns (centered box, sidebar layout, sticky footer, card grid).

What's the difference from CSS Grid?

Flexbox is one-dimensional (row or column); Grid is two-dimensional (row and column simultaneously). Use the Grid Cheatsheet for 2D layouts.

Are the examples live?

The cheatsheet has visual diagrams and copyable code. For interactive experimentation use the Flexbox Playground.

What about gap and row-gap?

Yes — `gap` is covered including the newer `row-gap` and `column-gap` shorthand. Supported in all modern browsers since 2021.

CSS Flexbox Cheatsheet | DevTools Surf

DevTools Surf

Example: CSS Flexbox Cheatsheet

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

center

Output

─── Flexbox Cheatsheet: ALL ───

justify-content           flex-start | center | flex-end | space-between | space-around | space-evenly   Align on main axis
align-items               stretch | flex-start | center | flex-end | baseline                            Align on cross axis
align-content             flex-start | center | space-between | stretch                                  Multi-line alignment
align-self                auto | flex-start | center | flex-end | stretch                                Override align-items for one item
margin                    auto                                                                           Center item or push with space
justify-content: center   Center on main axis                                                            Horizontally centered (row) or vertically (column)
align-items: center       Center on cross axis                                                           Vertically centered (row) or horizontally (column)

About CSS Flexbox Cheatsheet

CSS Flexbox Cheatsheet preview - Cheatsheets tool

Container + item props, common patterns (centered, sidebar, sticky footer). Part of the DevTools Surf developer suite. Browse more tools in the Cheatsheets collection.

Use Cases

Looking up alignment properties when centering elements vertically
Referencing flex shorthand values for responsive card layouts
Finding the right combination of properties for a sticky footer
Reviewing flex-wrap behavior for responsive grid-like layouts

Tips

Start with the container props: display, direction, and wrap
Check the common patterns section for centered and sidebar layouts
Review the align-items vs align-content distinction

Fun Facts

CSS Flexbox reached Candidate Recommendation status in 2012 after 3 major syntax revisions — the original 2009 spec used display: box with completely different properties.
The justify-content: space-evenly value was not in the original Flexbox spec; it was added later and still isn't supported in some older browsers.
Flexbox was specifically designed for one-dimensional layouts (row OR column), while CSS Grid handles two-dimensional layouts — they are meant to be complementary.

FAQ

Does it cover every flexbox property?: All 12 container props and 6 item props. Plus common patterns (centered box, sidebar layout, sticky footer, card grid).
What's the difference from CSS Grid?: Flexbox is one-dimensional (row or column); Grid is two-dimensional (row and column simultaneously). Use the Grid Cheatsheet for 2D layouts.
Are the examples live?: The cheatsheet has visual diagrams and copyable code. For interactive experimentation use the Flexbox Playground.
What about gap and row-gap?: Yes — `gap` is covered including the newer `row-gap` and `column-gap` shorthand. Supported in all modern browsers since 2021.

Related Cheatsheets Tools

Git Cheatsheet Docker Cheatsheet Makefile Cheatsheet Regex Cheatsheet Markdown Cheatsheet Vim Cheatsheet Bash / Shell Cheatsheet SQL Cheatsheet