CSS Flexbox Cheat Sheet

All Flexbox container and item properties with values and examples

What is CSS Flexbox Cheat Sheet?

CSS Flexbox Cheat Sheet is an interactive visual reference for all Flexbox properties, showing live previews of how each property affects a flex container and its children. It covers container properties (display, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) and item properties (flex-grow, flex-shrink, flex-basis, order, align-self) with concrete visual examples.

Flexbox is the layout model for one-dimensional layouts — rows or columns. It replaced float-based and table-based layouts for most UI patterns and is now supported in 99%+ of browsers globally. Despite its ubiquity, many developers still look up the difference between justify-content (main axis) and align-items (cross axis), or between flex-grow and flex-basis, or what stretch means for align-items.

This reference shows the visual output of each property value, not just the text description. Seeing that justify-content: space-between pushes items to the edges while space-evenly distributes gaps equally — including at the edges — is faster than reading a paragraph about it. Live examples make the difference between similar values immediately obvious.

How to Use

  1. Browse the container properties section to understand how the flex parent controls layout.
  2. Browse the item properties section to understand how individual flex children can override defaults.
  3. Click any property value to see a live visual demo in the preview pane.
  4. Use the interactive editor at the bottom to apply multiple properties simultaneously and observe the combined result.
  5. Copy the CSS snippet from any example and paste it directly into your stylesheet.

Examples

justify-content: space-between on a row of 3 items

Result: Items are flush to both ends, remaining space distributed between items — no gap at edges

flex-grow: 1 on one item, flex-grow: 2 on another

Result: The second item takes twice as much of the remaining space as the first

align-self: flex-end on one item in a row

Result: That item aligns to the bottom of the row while others maintain their alignment

Frequently Asked Questions

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis (horizontal in a row, vertical in a column). align-items aligns items along the cross axis (vertical in a row, horizontal in a column). Think of it as: justify = main direction, align = perpendicular direction.

What is the difference between flex-basis and width?

flex-basis sets the initial size before flex-grow and flex-shrink are applied. Width is the final computed size. In flex context, flex-basis takes precedence over width along the main axis. If flex-direction is column, flex-basis controls height.

What does flex: 1 mean?

flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. It makes the item take as much available space as possible while still shrinking if needed.

When should I use Grid instead of Flexbox?

Use Flexbox for one-dimensional layouts (a row of buttons, a navigation bar, a card's internal layout). Use Grid for two-dimensional layouts (page structure, a photo gallery, a calendar). They complement each other — Grid for the outer layout, Flexbox for components within.

Why don't my flex items shrink below a certain size?

By default, flex items cannot shrink below their minimum content size (the narrowest their content can be without overflow). Override with min-width: 0 or overflow: hidden on the flex item.

Related Tools