FlexboxとCSS Gridの違いは？

Flexboxは1次元（横or縦）のレイアウト、Gridは2次元（横×縦）のレイアウトに向いています。ナビゲーションやボタン配置はFlexbox、ページ全体の構成はGridが一般的です。

IE11に対応していますか？

Flexboxの基本機能はIE11でも動作しますが、gap プロパティなど一部は非対応です。出力コードにはIE11対応の注釈を付けています。

レスポンシブ対応は？

メディアクエリと組み合わせたレスポンシブ対応コードも出力可能です。

flex-shrinkが効かないのはなぜ？

min-widthの初期値（auto）が原因の場合が多いです。min-width: 0を追加することで解決します。

このサイトはJavaScriptを有効にする必要があります。ブラウザの設定でJavaScriptを有効にしてください。

メインコンテンツへスキップ

ToolShare Lab

無料・登録不要

Flexboxジェネレーター

Flexboxレイアウトを視覚的に作成

このツールをシェア

シェア送るシェア

コンテナ設定

flex-direction

justify-content

align-items

flex-wrap

align-content

gap

10px

アイテム数

CSSコード

前回の設定があります

履歴

このツールについて

CSS Flexboxのレイアウトを視覚的に構築できる無料ツールです。コンテナとアイテムのプロパティをGUIで設定し、リアルタイムで結果をプレビュー。Flexboxの学習にも最適なインタラクティブツールです。

全プロパティ対応

justify-content、align-items等すべてのFlexboxプロパティ

リアルタイムプレビュー

設定変更が即座にレイアウトに反映

学習モード

各プロパティの効果を視覚的に理解

活用シーン

Webデザイナー

ナビゲーションやカードの並びをFlexboxで組みたいとき

GUIでプロパティを試しながら最適なレイアウトを構築

フロントエンドエンジニア

justify-contentやalign-itemsの挙動を素早く確認したいとき

リアルタイムプレビューでプロパティの効果を視覚的に理解

コーディング学習者

Flexboxの各プロパティがどう動くか分からないとき

インタラクティブに操作しながらFlexboxの仕組みを体感で学習

使い方

コンテナを設定
flex-direction、justify-content、align-itemsなどのコンテナプロパティを設定します。
アイテムを追加
子要素を追加し、flex-grow、flex-shrink、orderなどを設定します。
プレビューで確認
リアルタイムで更新されるプレビューでレイアウトを確認します。
CSSをコピー
生成されたFlexbox CSSをコピーして使用します。

よくある質問

FlexboxとCSS Gridの違いは？: Flexboxは1次元（横or縦）のレイアウト、Gridは2次元（横×縦）のレイアウトに向いています。ナビゲーションやボタン配置はFlexbox、ページ全体の構成はGridが一般的です。
IE11に対応していますか？: Flexboxの基本機能はIE11でも動作しますが、gap プロパティなど一部は非対応です。出力コードにはIE11対応の注釈を付けています。
レスポンシブ対応は？: メディアクエリと組み合わせたレスポンシブ対応コードも出力可能です。
flex-shrinkが効かないのはなぜ？: min-widthの初期値（auto）が原因の場合が多いです。min-width: 0を追加することで解決します。