Flexboxプレイグラウンド

Flexbox Playground

実例の上でflexの各プロパティを切り替え、出来上がるCSSと各プロパティが何を変えたのかを表示します。

flexboxのすべてのプロパティを、動く実例の上で扱います。操作部ごとに、それが実際に何をするのかを1行で説明します。プレビューはブラウザ自身のflexレイアウトで、CSSはその状態を書き写したものなので、見えているとおりにページでも起きます。

🔒 ブラウザの中だけで動きますcssflexboxlayoutlearn

プレビュー

高さ

項目を押すと、その項目の設定を右側で変えられます。

コンテナ

flex-direction主軸の向きです。row なら横に、column なら縦に並びます。-reverse は順序を逆にします。flex-wrap入りきらないときに次の行へ送るかどうかです。nowrap なら、どれだけ小さくなっても縮めて 1 行に収めます。justify-content主軸で余った空間の配り方です。space-between は両端に寄せ、space-evenly はすべての間隔を同じにします。align-items交差軸で項目をどこに置くかです。既定値は stretch で、だから高さを決めていない項目はコンテナいっぱいに伸びます。align-content行が複数あるとき、その行の塊を交差軸のどこに置くかです。1 行だけなら何も起きません。gap: 12px項目のあいだの間隔です。margin と違って、外側の縁には付きません。

項目 1

flex-grow: 0この項目が余った空間をどれだけ取るかの比です。全部 1 なら等分、ひとつだけ 2 ならその項目が 2 倍取ります。flex-shrink: 1場所が足りないとき、この項目がどれだけ譲るかです。0 なら縮まず、代わりにはみ出します。flex-basis伸び縮みする前の基準の大きさです。auto は内容の大きさ、0 は内容を無視して grow の比だけで分けます。align-selfこの項目だけ align-items を上書きします。order: 0表示の順序です。小さいほど先に来て、同じ値ならマークアップの順のままです。スクリーンリーダーとタブ順はマークアップに従うので注意してください。内容

コード

.container {
  display: flex;
  gap: 12px;
}

· 主軸は横に走ります。
· flex-grow がすべて 0 なので、余った空間を分けるのは justify-content です。

既定値のままの property は書き出しません。変えたところだけが出ます。

プレビューはブラウザ自身の flexbox で、CSS はその状態を書き写したものなので、ここで見えるとおりにページでも動きます。二次元の配置が必要なら CSSグリッド作成へどうぞ。

使い方

コンテナのプロパティを決めます
方向、折り返し、そして3つの配置プロパティです。それぞれ何を変えるのかが下に1文ずつ付いています。とくに`align-content`は、1行しかないときにはまったく何もしません。
項目を押して編集します
grow、shrink、basis、align-self、orderは項目ひとつに適用されます。項目を足したり減らしたりして、コンテナが幅をどう配り直すか見てください。
説明を読んでCSSをコピーします
いまの配置が実際にどう振る舞うかをパネルが説明し、出力からは既定値のままのプロパティをすべて外します。コピーされるのは変えたものだけです。