About CSS Flexbox Cheatsheet

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.