使い方
- クラス名に、コンテナーのクラス名を入力します（例：toolbar）。CSSはこれをクラスセレクターとして使います。
- flex-direction、flex-wrap、配置の値を選びます。それぞれの先頭に初期値が表示されます。
- アイテムの数（1から12）を入力し、各アイテムのflex-grow、flex-shrink、flex-basisを設定します。
- プレビューを確かめてから、CSSをスタイルシートにコピーし、そのクラスをコンテナーに付けます。
コンテナーのプロパティ
CSSフレキシブルボックスレイアウト・モジュール（英語）は、フレックスコンテナーの子要素を主軸に沿って並べます。flex-directionは軸を選び、flex-wrapは子要素が新しい行に移れるかどうかを選びます。justify-contentは子要素を主軸に沿って配り、align-itemsとalign-contentは交差軸の方向に配置します。
- flex-directionの初期値はrowで、row、row-reverse、column、column-reverseを取ります。
- flex-wrapの初期値はnowrapで、wrapとwrap-reverseも取ります。
- justify-contentの初期値はflex-startで、align-itemsとalign-contentの初期値はstretchです。
アイテムのプロパティ
コンテナーの各子要素がアイテムで、3つのflexプロパティが、どれだけの余地を受け取るかを決めます。flex-growの初期値は0で、余った空きを係数に比例して受け取ります。flex-shrinkの初期値は1で、空きが足りないときにアイテムがどれだけ縮むかを表します。flex-basisの初期値はautoで、アイテムがもつ大きさを使います。長さか割合を指定すると、先にその大きさを使います。
flex: flex-grow flex-shrink flex-basis; 初期値：0 1 autoこのツールが書かないもの
- order、align-self、gapのプロパティ。これらはコンテナーかアイテムに手で追加できます。
- 12番目を超えるアイテム。ツールは12個までなので、それより長い一覧のルールは手で書く必要があります。
計算例：折り返す3つのアイテムをもつツールバー
クラス名はtoolbar、flex-wrapはwrap、justify-contentはspace-between、align-itemsはcenterです。1つめのアイテムは初期値のままなので、ルールはありません。2つめは、flex-basisを0にして余った空きを受け取るように伸びます。3つめは、flex-basisを200pxにして大きさを保ちます。ツールが書くルールは、2つめと3つめのアイテムだけです。
| アイテム | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
よくある質問
flex-growとflex-basisはどう違いますか？
flex-basisは、余った空きが分けられる前に、アイテムが始まる大きさです。その後、flex-growが余った空きを、各アイテムの係数に比例して分ける方法を決めます。basisが0でgrowが1のアイテムは、ほかのアイテムが残した空きを受け取ります。
例の1つめのアイテムにルールがないのはなぜですか？
その値は、プロパティの初期値、つまりflex-grow 0、flex-shrink 1、flex-basis autoだからです。ブラウザはルールがなくてもこれらの値を使うので、ツールは初期値と違うアイテムにだけルールを書きます。
align-itemsの初期値がstretchなのはなぜですか？
CSSフレキシブルボックスレイアウト・モジュールは、align-itemsの初期値をstretchと定めています。そのため、別の値を選ばない限り、アイテムは交差軸いっぱいに広がります。ツールも同じ値から始めるので、宣言がないときのブラウザの動作と一致します。
basisにpx、rem、em、%だけを使えるのはなぜですか？
それらはツールが確かめる単位だからです。autoや単位のない0も使えます。vwなどのほかの単位はここでは選べないので、必要な場合は手で書いてください。
アイテムの間にgapを追加できますか？
このツールではできません。ツールが書くのは、コンテナーの5つのプロパティと、アイテムのflexの値だけです。CSSをコピーした後で、gapをコンテナーのルールに手で追加してください。
作成したCSSはどこかに送られますか？
いいえ。プレビューとCSSはブラウザの中で作られます。何も保存されず、当サイトのサーバーにも送られないので、ページを離れる前にCSSをコピーしてください。
出典
数値と文章の最終確認日：2026年11月12日木曜日。