開発者 / CSSレイアウト

Flexbox Playground：コンテナとアイテムのCSSコントロール

flex-direction、折り返し、整列、間隔を試し、各アイテムのgrow、shrink、basis、order、整列を調整できます。レイアウトの変化を確認してCSSをコピーしましょう。

Flexbox Playground：コンテナとアイテムのCSSコントロール: 編集可能なアイテムプロパティを備えたFlexコンテナをリアルタイムで表示し、各コントロールの横に簡単な説明を表示します。プレビューは交差軸の効果を確認しやすいよう、高さを固定しています。行と列を共有するグリッドレイアウトには、CSS Gridジェネレーターをご利用ください。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。

カテゴリ
開発者ツール
実行回数
ブラウザ内で
コスト
無料 · 登録不要
提供状況
すぐに使えます
Flexboxレイアウトベンチローカル処理

完全にブラウザ内で実行します

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

行または列にはflexboxを使用してください。行と列の両方でトラックを共有する必要がある場合はCSS Gridを使用してください。 CSS Gridジェネレーターを開く

選択中の項目1

フレックスレイアウトモデル

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ 。メイン軸に沿った余白は、フレックスの拡大係数と縮小係数を使って分配されます。

整列とアクセシビリティ

MDN basic concepts of flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox 。交差軸はメイン軸に対して垂直です。見た目の並べ替えによって、ドキュメントの順序が変わることはありません。

使い方

  1. コンテナの方向、折り返し、整列を設定します。
  2. アイテムをクリックし、個別のサイズと整列を変更します。
  3. アイテムを追加または削除し、レイアウトを確認して生成されたCSSをコピーします。

プライバシーと制限事項

レイアウト設定はブラウザ内でローカルに処理されます。

関連ツール

CSS gridクリップパスCSSフォーマッター

よくある質問

align-contentが何も変更しないことがあるのはなぜですか？

align-contentはFlexの行を分配します。効果を表示するには、折り返しが有効で複数の行があり、交差軸に余白が必要です。

orderはスクリーンリーダーの読み上げ順も変更しますか？

いいえ。変更されるのは視覚的な順序だけで、文書の読み上げ順とキーボード操作の順序は変わりません。文書の順序は論理的に保ってください。

Gridはどのような場合に使うべきですか？

行と列でトラックを共有する場合はGridを使います。Flexboxは、主に一つの軸に沿ってアイテムを配置する場合に適しています。

無料ツール · ブラウザ内で · アカウント不要