---
title: "CSS Flexbox Cheatsheet | FindUtils"
description: "Flex container and item properties, alignment, ordering, and common layout patterns"
url: https://findutils.com/cheatsheets/css-flexbox/
---

# CSS Flexbox Cheatsheet

Flex container and item properties, alignment, ordering, and common layout patterns 36 commands in 6 sections, filed under [Web Development](https://findutils.com/cheatsheets/web/).

## Container Properties

- `display: flex`: Enable flex layout on container
- `display: inline-flex`: Inline-level flex container
- `flex-direction: row`: Main axis: left to right (default)
- `flex-direction: row-reverse`: Main axis: right to left
- `flex-direction: column`: Main axis: top to bottom
- `flex-direction: column-reverse`: Main axis: bottom to top
- `flex-wrap: nowrap`: Single line (default)
- `flex-wrap: wrap`: Wrap to multiple lines
- `flex-wrap: wrap-reverse`: Wrap in reverse direction

## Alignment (Main Axis)

- `justify-content: flex-start`: Pack items to start (default)
- `justify-content: flex-end`: Pack items to end
- `justify-content: center`: Center items along main axis
- `justify-content: space-between`: Equal space between items
- `justify-content: space-around`: Equal space around items
- `justify-content: space-evenly`: Equal space between and around

## Alignment (Cross Axis)

- `align-items: stretch`: Stretch items to fill (default)
- `align-items: flex-start`: Align items to cross-start
- `align-items: flex-end`: Align items to cross-end
- `align-items: center`: Center items on cross axis
- `align-items: baseline`: Align items by text baseline
- `align-content: flex-start`: Pack lines to start (multi-line)
- `align-content: center`: Center lines (multi-line)
- `align-content: space-between`: Space between lines (multi-line)

## Gap

- `gap: 16px`: Equal row and column gap
- `gap: 16px 24px`: Row gap and column gap
- `row-gap: 16px`: Gap between rows only
- `column-gap: 24px`: Gap between columns only

## Item Properties

- `flex: 1`: Shorthand: grow=1, shrink=1, basis=0%
- `flex: 0 0 200px`: Fixed 200px, no grow/shrink
- `flex-grow: 1`: Allow item to grow (proportion)
- `flex-shrink: 0`: Prevent item from shrinking
- `flex-basis: 200px`: Initial size before grow/shrink
- `flex-basis: auto`: Use content size as basis
- `align-self: center`: Override align-items for this item
- `order: -1`: Change visual order (lower = first)

## Sources

- `https://www.w3.org/TR/css-flexbox-1/`: W3C Flexbox specification: axes, flexible sizing, alignment, and ordering.

## Related

- Cheatsheet: [React Hooks](https://findutils.com/cheatsheets/react-hooks/)
- Cheatsheet: [CSS Grid](https://findutils.com/cheatsheets/css-grid/)
- Cheatsheet: [HTTP Status Codes](https://findutils.com/cheatsheets/http-status-codes/)
- Guide: [How to Extract a Color Palette From an Image](https://findutils.com/guides/image-color-extractor-guide/)
- Guide: [How to Build a Custom CSS Easing Curve](https://findutils.com/guides/cubic-bezier-generator-guide/)
- Guide: [How to Use CSS Border Radius Properly](https://findutils.com/guides/border-radius-generator-guide/)
- Tool: [CSS Animation Generator](https://findutils.com/design/css-animation-generator/)
- Tool: [CSS Minifier](https://findutils.com/developers/css-minifier/)