Stax
Tools

CSS Flexbox Playground

Experiment with Flexbox properties visually and copy the CSS.

1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

CSS Flexbox プレイグラウンド — Flexboxをビジュアルで学びレイアウトを素早く実装する

CSS Flexboxはすべてのフロントエンド開発者のツールキットで最も強力なレイアウトツールです。しかし多くの開発者は、レイアウトを書くたびにプロパティ名と値の組み合わせを調べています。このインタラクティブなプレイグラウンドでは、すべてのFlexboxプロパティをリアルタイムで試せます — プロダクションコードを1行も書く前に、各組み合わせが生み出す結果を正確に確認できます。

左側のコントロールを使ってコンテナプロパティ — flex-direction、justify-content、align-items、flex-wrap、align-content、またはgap — を調整してください。右側のライブプレビューパネルが即座に更新され、プロパティの変更に応答する色付きのフレックスアイテムが表示されます。希望のレイアウトが得られたら、「CSS をコピー」をクリックしてスタイルシートに貼り付ける準備ができた正確な宣言を取得してください。また、各子要素のflex-grow、flex-shrink、flex-basis、order、align-selfなどの個別アイテムプロパティを独立して調整することもできます。

justify-contentのMDNドキュメントを読めば各値の意味がわかります。5つのアイテムのプレビューでspace-aroundとspace-evenlyがライブで更新されるのを見ることで、特定のレイアウトにどちらを選ぶかがわかります。Flexboxをビジュアルで学ぶ開発者は精神モデルをより素早く内面化し、ナビゲーションバー、カードグリッド、センタリングされたヒーローセクションを構築する際に迷わなくなります。このプレイグラウンドはまさにそのような学習ループのために設計されています — 試す、観察する、理解する、繰り返す。

初心者開発者はFlexboxを初めて学ぶときに使用します — 即時フィードバックループがコードエディタでの何時間もの試行錯誤を置き換えます。経験豊富な開発者は、スティッキーフッターや残りの高さを埋める必要があるサイドバーレイアウトなどのエッジケースに直面したときの素早いスクラッチパッドとして使用します。デザインからコードへのワークフローでは、コンポーネントライブラリにコミットする前に特定のコンポーネントレイアウトを素早くプロトタイプするために使用されます。

このプレイグラウンドは完全にブラウザ内で動作します — CSSコード、レイアウト設定、セッションデータはいかなるサーバーにも送信されません。社内プロジェクトやファイアウォールの内側でも、デバイスからデータが出ることなく使用できます。

よくある質問

What is CSS Flexbox?
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It makes it easy to distribute space and align items in a container, even when their sizes are unknown or dynamic.
What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (row = horizontal, column = vertical). align-items controls alignment along the cross axis (perpendicular to the main axis). Together they position items both horizontally and vertically.
When should I use flex-wrap: wrap?
Use flex-wrap: wrap when you want items to wrap onto a new line when they don't fit in one row. Without wrapping, items either shrink to fit or overflow the container.
What does align-content do?
align-content distributes space between rows of a multi-line flex container (only applies when flex-wrap is wrap or wrap-reverse and there are multiple lines). It has no effect on single-line containers.
How do I centre an element with Flexbox?
Set display: flex on the parent, then use justify-content: center and align-items: center. This centres the child element both horizontally and vertically inside the parent.

関連ツール