When should I use Flexbox vs Grid?

Flexbox is for one-dimensional layouts — a row OR a column. Grid is for two-dimensional layouts — rows AND columns simultaneously. Use Flexbox for navbars, centering, button groups, list items. Use Grid for page layouts, image galleries, dashboard widgets. They compose well — Grid for the page skeleton, Flexbox inside each grid cell.

Why doesn't justify-content work the way I expect?

justify-content acts on the MAIN axis (defined by flex-direction). With flex-direction: row, justify-content: center horizontally centers; align-items: center vertically centers. With flex-direction: column, the axes swap — justify-content: center now vertically centers, align-items: center horizontally centers. Always check your flex-direction first.

How do I make items equal width with Flexbox?

Set flex: 1 on each item. That expands to flex: 1 1 0, meaning grow factor 1, shrink factor 1, basis 0 — all items get equal share of available space. If you want minimum content width, use flex: 1 1 auto. For three columns of equal width: parent display: flex, each child flex: 1.

Why are my flex items not wrapping?

Default flex-wrap is nowrap — items shrink to fit instead of wrapping. Add flex-wrap: wrap on the parent. Combined with min-width on children, this gives you responsive grids: parent is { display: flex; flex-wrap: wrap; gap: 16px; }, children are { flex: 1 1 250px } — wraps when items can't be 250px wide.

What's the difference between gap, margin, and padding in Flexbox?

gap (or row-gap / column-gap) adds spacing BETWEEN items only — no margin around the outer edges. margin on items also creates spacing but doubles up at the boundaries. padding on the parent adds inner space without affecting between-item spacing. gap is cleaner and easier to reason about than margins; use it whenever the browser supports it (Safari 14.1+, Chrome 84+ — basically everywhere).

CSS Flexbox Cheat Sheet

Complete Flexbox reference: container properties, item properties, common patterns, and gotchas.

Container properties

Property	Values	Effect
`display`	`flex` / `inline-flex`	Activate flexbox
`flex-direction`	`row` \| `row-reverse` \| `column` \| `column-reverse`	Main axis direction (default: row)
`flex-wrap`	`nowrap` \| `wrap` \| `wrap-reverse`	Allow items to wrap onto multiple lines
`justify-content`	`flex-start` \| `center` \| `flex-end` \| `space-between` \| `space-around` \| `space-evenly`	Distribute along main axis
`align-items`	`stretch` \| `flex-start` \| `center` \| `flex-end` \| `baseline`	Align on cross axis (single line)
`align-content`	Same as `justify-content` values	Distribute multi-line content on cross axis
`gap`	`1rem`, `16px 24px`	Space between items (replaces margins)

Item properties

Property	Values	Effect
`flex-grow`	Number (default 0)	Share of remaining space (1 = take available)
`flex-shrink`	Number (default 1)	How much to shrink if overflow (0 = never)
`flex-basis`	`auto`, `0`, `250px`, `30%`	Initial size before grow/shrink
`flex`	Shorthand: `flex: 1` = `1 1 0`	Combines grow/shrink/basis
`order`	Number (default 0)	Reorder visually without changing DOM
`align-self`	Override `align-items` for one item	Per-item cross-axis alignment

Common patterns

Goal	CSS
Center horizontally + vertically	`display: flex; justify-content: center; align-items: center;`
Sticky footer	Body: `display: flex; flex-direction: column; min-height: 100vh;` Main: `flex: 1`
Equal columns	Parent: `display: flex`; Children: `flex: 1`
Navbar (logo left, links right)	`display: flex; justify-content: space-between; align-items: center;`
Wrap on small screens	`display: flex; flex-wrap: wrap; gap: 1rem;` + child `flex: 1 1 250px`
Push one item to end	That item gets `margin-left: auto`
Reverse visual order	`flex-direction: row-reverse` or `order: -1` on specific item

Browser support & gotchas

• Flexbox itself: 99%+ support (IE11 had a buggy implementation; if you still need IE, use Autoprefixer).
• gap in flexbox: 95%+ (Safari 14.1+ from April 2021). Older Safari needs margin fallback.
• Default min-width of flex items is auto, not 0 — items can overflow if content is wider than the container. Add min-width: 0 on items if text is overflowing.
• Flexbox children must be direct DOM children. Wrapping with extra divs breaks flex behavior.
• Percentage flex-basis doesn't include gap — use flex: 1 1 calc(50% - 0.5rem) for two columns with 1rem gap.

Build flexbox layouts visually with our CSS Flexbox Playground.

CSS Flexboxチートシート — コンテナとアイテムのプロパティ完全リファレンス

CSS Flexboxは、ナビゲーションバー、ボタングループ、カード行、画面中央への単一要素の配置、サイドバーをページの残りの高さに合わせるなど、1次元の配置にWebの最も実用的なレイアウトツールです。2015年以来ブラウザで広くサポートされているにもかかわらず、開発者はalign-contentとalign-itemsの違い、正しいflexショートハンドの値、行の末尾に1つのアイテムを押し出すマージントリックなどを定期的に調べます。このチートシートはそのすべてを1か所にまとめています。

リファレンスは4つのセクションに整理されています：コンテナプロパティ（display: flexの親要素に適用するCSS）、アイテムプロパティ（個別の子要素に適用するCSS）、一般的なレイアウトパターン（最もよく必要とされるFlexboxソリューションの完全なCSSスニペット）、ブラウザサポートの注意点（本番環境でレイアウトバグを引き起こすエッジケース）。各エントリはプロパティ名、受け入れる値、各値が実際に何をするかを示します。

align-contentはFlexboxで最も誤解されているプロパティです。flex-wrap: wrapが設定されており、かつ複数行のコンテンツがある場合にのみ適用されます。単一行のコンテナでは効果がなく、何もしないように見えて混乱を招きます。flexショートハンド（flex: 1）はflex: 1 1 0と同等です。成長係数1、収縮係数1、ベース0で、すべての子が利用可能なスペースを均等に共有するための正しい方法です。min-width: 0の注意点：flexアイテムはデフォルトでmin-widthがautoです。つまり利用可能なスペースより幅の広いコンテンツは折り返しではなくオーバーフローを引き起こします。自然なサイズ以下に縮小する必要がある長いテキスト、コードブロック、または幅の広い画像を含むflexアイテムにmin-width: 0を追加してください。

フロントエンド開発者は、MDNやStack Overflowを開かずに必要な正確なプロパティと値の組み合わせを調べるためのブックマークとして使います。CSSレイアウトを学ぶブートキャンプの学生は、プロジェクトを完成させる際のリファレンスとして使います。パターンセクションはコースで最もよく課題に出されるレイアウトの完全なソリューションを提供するからです。フロントエンドに時々触れるバックエンド開発者は、レイアウトの問題が発生したときにドキュメントに迷い込まずに素早いリファレンスが必要な場合に使います。

これは静的なリファレンスページです。データを収集するインタラクティブな入力はなく、サーバーに送信されるものもありません。レイアウトを視覚的に構築・テストするには、リンクされたFlexbox Playgroundを使用してください。

よくある質問

When should I use Flexbox vs Grid?: Flexbox is for one-dimensional layouts — a row OR a column. Grid is for two-dimensional layouts — rows AND columns simultaneously. Use Flexbox for navbars, centering, button groups, list items. Use Grid for page layouts, image galleries, dashboard widgets. They compose well — Grid for the page skeleton, Flexbox inside each grid cell.
Why doesn't justify-content work the way I expect?: justify-content acts on the MAIN axis (defined by flex-direction). With flex-direction: row, justify-content: center horizontally centers; align-items: center vertically centers. With flex-direction: column, the axes swap — justify-content: center now vertically centers, align-items: center horizontally centers. Always check your flex-direction first.
How do I make items equal width with Flexbox?: Set flex: 1 on each item. That expands to flex: 1 1 0, meaning grow factor 1, shrink factor 1, basis 0 — all items get equal share of available space. If you want minimum content width, use flex: 1 1 auto. For three columns of equal width: parent display: flex, each child flex: 1.
Why are my flex items not wrapping?: Default flex-wrap is nowrap — items shrink to fit instead of wrapping. Add flex-wrap: wrap on the parent. Combined with min-width on children, this gives you responsive grids: parent is { display: flex; flex-wrap: wrap; gap: 16px; }, children are { flex: 1 1 250px } — wraps when items can't be 250px wide.
What's the difference between gap, margin, and padding in Flexbox?: gap (or row-gap / column-gap) adds spacing BETWEEN items only — no margin around the outer edges. margin on items also creates spacing but doubles up at the boundaries. padding on the parent adds inner space without affecting between-item spacing. gap is cleaner and easier to reason about than margins; use it whenever the browser supports it (Safari 14.1+, Chrome 84+ — basically everywhere).