最近使ったもの

    ツールを開くと、ここに表示されます。

    CSS Flexboxプレイグラウンド

    Flexboxレイアウトを学んで生成できる対話型のプレイグラウンドです

    このツールを共有

    問題を報告

    非公開の入力内容やファイルは含めずに、問題を説明してください。

    このツールはどのくらい役に立ちましたか?

    このツールはどのくらい役に立ちましたか?

    レイアウト設定

    レイアウトのプリセット

    アイテムごとの上書き設定

    プレビューまたは一覧でアイテムを選択し、プロパティを編集してください。

    Flexboxクイックリファレンス

    主軸

    justify-contentは、主軸 (flex-directionで決まる方向) に沿った配置を制御します。

    交差軸

    align-itemsは、交差軸 (flex-directionに垂直な方向) に沿った配置を制御します。

    複数行

    align-contentは、flex-wrapがwrapまたはwrap-reverseに設定され、複数行がある場合にのみ適用されます。

    ライブプレビュー

    生成されたCSS

    .container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
}

    設定を変更するか、アイテムを選択してください。プレビューとCSSが同時に更新されます。

    CSS Flexboxプレイグラウンドについて

    CSS Flexboxプレイグラウンドは、CSS Flexboxレイアウトを学び、試すための視覚的でインタラクティブなツールです。Flexbox(Flexible Box Layout)は、CSSで最も強力かつ広く使われているレイアウトモジュールのひとつで、コンテナ内の要素を柔軟でレスポンシブに配置するために設計されています。このツールでは、フレックスコンテナとフレックスアイテムのあらゆるプロパティをリアルタイムで操作し、レイアウトがどう変わるかをそのまま確認できます。

    デザイン

    最近追加されたツール

    すべてのツール

    プライバシー設定

    分析、広告、パーソナライズの設定を選択してください。必須ストレージは、テーマや保存したツールなどの機能を維持するために使われます。

    必須ストレージは常に有効です。