FlexboxとGridのチートシート
FlexboxとGridのチートシート（インタラクティブ）Tailwind対応 | We.Inc
flexboxとCSS gridのすべてのプロパティを、値を変えられるライブのコンテナーで確認できます。grid-template-areasビルダー、flexとgridの使い分けガイド、Tailwindのクラスも掲載しています。
FlexboxとGridのチートシート
Flexboxは要素を行または列の一方向に並べるもので、ツールバー、ナビゲーションバー、中央寄せに最適です。Gridは要素を行と列の両方に同時に配置するもので、ページ全体のレイアウトやカードのギャラリーに向いています。親要素にdisplay: flexまたはdisplay: gridを設定し、下のプロパティを使いましょう。どれもこのページのライブのコンテナーに即座に反映されます。
FlexboxとGrid、どちらを使う？
- ボックス内で1つのものを中央に置く
- どちらでも可。gridとplace-items: centerが最も短い
- ボタンやナビゲーションリンクを横に並べる
- Flexbox
- 幅が不定で、折り返すべき要素
- Flexboxとflex-wrap
- 等幅の列に並ぶカード
- Gridとrepeat(auto-fill, minmax())
- ヘッダー、サイドバー、メイン、フッター
- Gridとgrid-template-areas
flexとgridの2つのライブのコンテナーを用意し、コンテナーのすべてのプロパティと、選んだ1つの要素のプロパティを操作できるようにしています。変更するたびに、CSSとTailwindのクラスが表示されます。その下のgrid-template-areasビルダーでは、ページのレイアウトを塗り分けて結果をコピーできます。リファレンスの表はきれいに印刷できます。
- flexboxのコントロールでコンテナーを変更し、要素を1つ選んで伸長、縮小、基準サイズ、順序、個別の配置を試します。
- gridのプレイグラウンドでも同じように操作します。1つの要素を複数の列や行にまたがらせるspanも試せます。
- エリアビルダーでは、エリア名を選んでセルをクリックし、塗り分けます。コンテナーと各エリアのCSSが下に表示されます。
- 「印刷」を押すと、プロパティの表を紙やPDFで入手できます。
- 要素間の余白には、マージンではなくまずgapを使いましょう。gapは要素の間にだけ余白を加え、外側の端には加えません。
- すべての要素にflex: 1を付けると、内容にも反応する等幅の列になります。1frの列を使うgridは、内容の幅を無視します。
- 順序の変更やgridでの配置は、見た目の調整だけに使いましょう。キーボードやスクリーンリーダーの利用者はソースの順序に沿って移動するので、HTMLの順序自体も意味が通るようにしておく必要があります。
- 1frの代わりにminmax(0, 1fr)を使うと、長い単語や幅の広い画像のせいでgridの列が割り当てより広がるのを防げます。
よくある質問
justify-contentとalign-itemsの違いは？
justify-contentは主軸に沿って働き、flexの行では左から右の方向です。align-itemsはそれと交差する方向に働き、行では上から下です。flex-directionをcolumnに切り替えると2つの物理的な方向が入れ替わるため、中央寄せで間違ったプロパティを使っているように感じることがあるのです。
justify-contentが効かないのはなぜですか？
主軸に余白があるときにしか効果がないからです。要素にflex-grow: 1があったり、要素が行を埋めていたりすると、分配する余白が残りません。gridでは、justify-contentはトラック全体を動かし、justify-itemsは各セル内で要素をそろえます。
grid-template-areasはどのように機能しますか？
"header header" "side main"のように、各セルに名前を付けた文字列を1行に1つずつ書いてレイアウトを描きます。各子要素は、grid-area: headerのように名前を指定して領域を確保します。エリアは長方形でなければならず、ドットは空のセルを表します。
gridの中でflexboxを使えますか？
はい、よくある使い方です。gridで大きな領域やカードを配置し、flexboxで各領域の中身を並べます。たとえば、ラベルの横にアイコンを置いたり、カードの下端にフッターを固定したりする場合です。
flexboxでgapは使えますか？
はい。現在の主要ブラウザーはすべて、gridだけでなくflexコンテナーでもgapに対応しているので、コンテナーに負のマージンを付ける昔のテクニックはもう不要です。
2つの軸
- すべてのflexコンテナーには、flex-directionで決まる主軸と、それに直交する交差軸があります。justifyで始まるプロパティは主軸に、alignで始まるプロパティは交差軸に作用します。これが腑に落ちれば、flexboxの疑問のほとんどは、どちらの軸のことを言っているのかという問題になります。
- 一方、gridの軸は固定の2つです。インライン軸（通常は水平）とブロック軸（通常は垂直）です。justify-*はインライン軸に沿って、align-*はブロック軸に沿って、グリッド全体とセル内の要素の両方をそろえます。
flexの要素がサイズを決める仕組み
- 各要素はflex-basisから、基準サイズがautoの場合は内容のサイズからスタートします。行に余裕があれば、余った空間がflex-growの比率で分配されます。行があふれる場合は、flex-shrinkに基準サイズを掛けた値の比率で要素が縮みます。
- ショートハンドのflex: 1は、伸長1、縮小1、基準サイズ0%を意味するため、内容にかかわらずすべての要素が同じ幅になります。flex: autoは内容のサイズを出発点として保つので、長いラベルほど幅の広いボックスになります。
メディアクエリなしのレスポンシブなグリッド
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))は、コンテナーに収まるだけ最低220ピクセルの列を入れ、それらを行いっぱいに引き伸ばします。ブレークポイントなしで、カードがスマートフォンの1列から広い画面の4〜5列まで自動で並び替わります。
- auto-fitは、要素の数が列より少なくなるまではauto-fillと同じ動作です。要素が少ないとき、auto-fillは空の列を残し、auto-fitは空の列をつぶして既存の要素を行いっぱいに広げます。
flexコンテナーのプロパティ
display: flexを指定した要素に設定します
- row | row-reverse | column | column-reverse
- 主軸の方向
- flex-row, flex-row-reverse, flex-col, flex-col-reverse
- nowrap | wrap | wrap-reverse
- 要素を折り返して新しい行にするかどうか
- flex-nowrap, flex-wrap, flex-wrap-reverse
- flex-start | center | flex-end | space-between | space-around | space-evenly
- 主軸に沿って要素を配置する
- justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly
- stretch | flex-start | center | flex-end | baseline
- 交差軸で要素をそろえる
- items-stretch, items-start, items-center, items-end, items-baseline
- normal | flex-start | center | flex-end | space-between | space-around | stretch
- 折り返した行を交差軸に沿って配置する
- content-normal, content-start, content-center, content-end, content-between, content-around, content-stretch
- 0 | 8px | 16px | 32px
- 要素間の余白
- gap-0, gap-2, gap-4, gap-8
flexアイテムのプロパティ
子要素に設定します
- 要素が受け取る余白の割合
- grow-0, grow, grow-[2]
- 基準サイズより小さく縮んでよいかどうか
- shrink, shrink-0
- auto | 0 | 120px | 50%
- 伸縮する前の初期サイズ
- basis-auto, basis-0, basis-[120px], basis-1/2
- 見た目の順序（読み上げの順序ではない）
- order-none, -order-1, order-1, order-5
- auto | flex-start | center | flex-end | stretch
- 1つの要素だけalign-itemsを上書きする
- self-auto, self-start, self-center, self-end, self-stretch
gridコンテナーのプロパティ
display: gridを指定した要素に設定します
- 1fr 1fr 1fr | 200px 1fr | repeat(auto-fill, minmax(120px, 1fr)) | 1fr 2fr 1fr
- 1fr 1fr 1fr
- 列のサイズ
- grid-cols-3, grid-cols-[200px_1fr], grid-cols-[repeat(auto-fill,minmax(120px,1fr))], grid-cols-[1fr_2fr_1fr]
- auto | 80px | minmax(60px, auto)
- 自動で作られる行の高さ
- auto-rows-auto, auto-rows-[80px], auto-rows-[minmax(60px,auto)]
- row | column | row dense
- 要素がグリッドを埋める方法
- grid-flow-row, grid-flow-col, grid-flow-row-dense
- stretch | start | center | end
- 各要素をセル内で水平方向にそろえる
- justify-items-stretch, justify-items-start, justify-items-center, justify-items-end
- stretch | start | center | end
- 各要素をセル内で垂直方向にそろえる
- items-stretch, items-start, items-center, items-end
- 0 | 8px | 16px | 32px
- 行と列の間の余白
- gap-0, gap-2, gap-4, gap-8
gridアイテムのプロパティ
子要素に設定します
- auto | span 2 | 1 / -1 | 2 / 4
- 要素がどの列にまたがるか
- col-auto, col-span-2, col-span-full, col-start-2 col-end-4
- auto | span 2 | 1 / 3
- 要素がどの行にまたがるか
- row-auto, row-span-2, row-start-1 row-end-3
- auto | start | center | end | stretch
- 1つの要素の水平方向の配置
- justify-self-auto, justify-self-start, justify-self-center, justify-self-end, justify-self-stretch
- auto | start | center | end | stretch
- 1つの要素の垂直方向の配置
- self-auto, self-start, self-center, self-end, self-stretch
レシピ
grid-template-areasによるページレイアウト
広い画面では名前付きの3行になります。エリアを1か所変えるだけでページを並べ替えられます。
ツールバー：ロゴを左、リンクを右に
最後のグループにmargin-left: autoを付けると反対の端まで押し出されます。flexboxでよく使われるテクニックです。
メディアクエリなしで並び替わるカードグリッド
ウィンドウの幅を変えてみてください。列の数が自動で変わります。
CSSをコピー
クラスをコピー
（既定値のみ）
Flexboxプレイグラウンド
Gridプレイグラウンド
要素を削除
{n}個の要素
要素を追加
リセット
ライブのflexコンテナー
ライブのgridコンテナー
長めのラベル
ボックスの右下の角をドラッグすると幅を変えられます。要素をクリックすると編集できます。
コンテナー
要素 {n}
grid-template-areasビルダー
塗るエリア
空（.）
行
列
{row}行目、{col}列目：{area}。{brush}として塗る
まだ有効ではありません：{names}は長方形にする必要があります。長方形になるまで、ブラウザーはgrid-template-areasの値全体を無視します。
有効なレイアウトです。すべてのエリアが長方形になっています。
チートシートを印刷
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る