CSS Flexbox Cheat Sheet: Every Property Explained

What Is Flexbox?

CSS Flexible Box Layout (Flexbox) is a one-dimensional layout system for arranging items in rows or columns. It distributes space among items, handles alignment, and manages the relationship between container and content sizes. Flexbox solves layout problems that were frustratingly difficult with older CSS techniques: vertical centering, equal-height columns, responsive reordering, and dynamic space distribution.

Apply display: flex to a container, and all direct children become flex items with powerful layout capabilities.

Container Properties

flex-direction: Defines the main axis. row (default) arranges items horizontally. column arranges them vertically. row-reverse and column-reverse flip the order.

flex-wrap: Controls whether items wrap to new lines. nowrap (default) forces all items onto one line, potentially overflowing. wrap allows items to flow onto additional lines. wrap-reverse wraps upward.

justify-content: Aligns items along the main axis. flex-start packs items to the start. flex-end packs to the end. center centers them. space-between distributes items with equal space between them. space-around gives equal space around each item. space-evenly creates perfectly equal gaps.

align-items: Aligns items along the cross axis. stretch (default) fills the container height. flex-start aligns to the top. flex-end aligns to the bottom. center vertically centers items. baseline aligns by text baseline, useful for items with different font sizes.

align-content: Controls how multiple flex lines are distributed (only applies when flex-wrap: wrap creates multiple lines). Same values as justify-content but applied to the cross axis.

gap: Adds space between flex items without affecting the container edges. gap: 16px creates uniform spacing. row-gap and column-gap target individual axes. This eliminates the need for margin-based spacing hacks.

Item Properties

flex-grow: Determines how much an item grows relative to siblings when extra space is available. Default is 0 (no growth). Setting flex-grow: 1 on all items distributes space equally. Setting it to 2 on one item gives it twice the extra space.

flex-shrink: Determines how much an item shrinks when space is insufficient. Default is 1 (items shrink equally). Setting flex-shrink: 0 prevents an item from shrinking below its content size.

flex-basis: Sets the initial size of an item before flex-grow and flex-shrink apply. Can be a fixed value (200px), a percentage (25%), or auto (use the item’s width/height). flex-basis replaces width/height in the flex direction.

flex shorthand: Combines grow, shrink, and basis. flex: 1 is shorthand for flex: 1 1 0%, making the item grow and shrink equally from a zero base. flex: none means flex: 0 0 auto, preventing any size changes.

align-self: Overrides the container’s align-items for a specific item. One item in a row can be aligned to flex-end while others stay at flex-start.

order: Changes the visual order of items without changing the DOM order. Default is 0. Lower values appear first. This enables responsive reordering where sidebar content can move before or after main content on different screen sizes.

Common Patterns

Centering anything: display: flex, justify-content: center, align-items: center on the container perfectly centers a child both horizontally and vertically. This three-line centering solution replaced years of hacks.

Navigation bar: A flex container with justify-content: space-between for logo-left and nav-right layouts, or justify-content: center for centered navigation.

Card row with equal heights: Flex items in a row automatically stretch to equal height. This solves the classic problem of unequal card heights in a grid.

Sticky footer: A flex column layout on the body with flex-grow: 1 on the main content pushes the footer to the bottom even when content is short.

Use the CSS tools on CalcHub for Flexbox property references and experimentation, or explore our developer tools for layout utilities.

Master Flexbox layouts with CalcHub’s CSS tools and references.