CSSフレックスボックス・ジェネレーター

使い方

1. コンテナのプロパティを定義: flex-direction、justify-content、align-items、flex-wrap、gapでflexコンテナを構成します。
2. flex項目を追加して構成: 子項目を追加し、各項目に対してflex-grow、flex-shrink、flex-basis、align-self、orderを個別に定義します。
3. CSSをコピー: コンテナと項目用の完全なCSSを取得し、プロジェクトで使用する準備ができています。

なぜFlexboxジェネレーターを使うのか?

Flexboxは1次元CSSレイアウトに不可欠なツールです, 強力な分配および整列コントロールで項目を行または列に並べます。しかし、プロパティは多く、それらの相互作用は複雑です: justify-content対align-items、flex-grow対flex-basis、メイン軸対クロス軸。このインタラクティブジェネレーターは、各プロパティを変更すると瞬時に視覚的フィードバックを提供し、Flexboxを学習し、レイアウトに適したCSSを取得する最速の方法になります。

機能

• インタラクティブプレビュー: flex項目をドラッグし、プロパティを切り替えてリアルタイムで変更を確認します。
• すべてのコンテナプロパティ: flex-direction、flex-wrap、justify-content、align-items、align-content、gap。
• 項目ごとのコントロール: 各項目に対してflex-grow、flex-shrink、flex-basis、align-self、orderを個別に設定します。
• 視覚的軸インジケーター: 概念モデルを強化するために、メイン軸とクロス軸が強調表示されます。
• CSS出力: コンテナとすべての設定された項目のための完全なコピー可能CSS。

よくある質問

justify-contentとalign-itemsの違いは?

justify-contentは項目をメイン軸(デフォルトでは水平)に沿って分配します。align-itemsは項目をクロス軸(デフォルトでは垂直)に沿って整列します。flex-directionがcolumnの場合、軸が反転します, justify-contentは垂直になり、align-itemsは水平になります。

FlexboxとCSS Gridはいつ使い分けるべきですか?

Flexboxは1次元レイアウトに使用, ボタンの行、ナビゲーションバー、改行する必要のあるカードのリスト。CSS Gridは、完全なページレイアウトや複雑なカードグリッドなど、行と列を同時に制御する必要がある2次元レイアウトに使用します。

flex: 1は何を意味しますか?

flex: 1はflex-grow: 1; flex-shrink: 1; flex-basis: 0%のショートカットです。これは項目に、利用可能なスペースを埋めるために成長し、必要に応じて縮小し、スペースを分配する前にゼロから開始するように指示します。flex: 1を持つすべての項目はスペースを均等に共有します。

Flexboxが実際に行うこと

Flexbox (Flexible Box Layout) は、一次元方向 (行または列) でスペースを分配しアイテムを整列するために設計されたCSSレイアウトモデルです。すべての動作を決定する2つのコア概念を導入します: メイン軸 (アイテムが流れる主方向、デフォルトでは水平) とクロス軸 (メイン軸に垂直、デフォルトでは垂直)。メインとクロスを内在化すれば、すべてのFlexboxプロパティはどちらかにマップされます: justify-contentはメイン軸で動作、align-itemsはクロス軸で動作、flex-directionはどちらの軸がどちらかを入れ替えます。

Flexboxは、1998年から2014年までウェブ開発者を悩ませた一連のレイアウト問題を解決しました。Flexboxの前は、要素を垂直方向に中央に揃えるにはハック (display: table-cell、負のマージン、translate変換付きのposition: absolute) が必要でした。等しい高さのカラムには背景画像付きの偽カラムテクニックが必要でした。スティッキーフッターには正確なピクセル計算が必要でした。Flexboxはこれらすべてを些細なことにしました: 1行の宣言が何十年ものCSSの回避策に取って代わります。トレードオフはFlexboxが一次元であることです; 二次元レイアウト (行と列を同時に) には、CSS Grid (2017年リリース) が良いツールです。

Flexboxプロパティはきれいに2つのグループに分かれます: コンテナプロパティ (親に適用: display: flex、flex-direction、flex-wrap、justify-content、align-items、align-content、gap) とアイテムプロパティ (子に適用: flex-grow、flex-shrink、flex-basis、align-self、order)。コンテナプロパティはレイアウトパターンを制御します; アイテムプロパティは個々の例外を制御します。このジェネレーターは両方のセットを表面化させるので、コードを書かずにそれらがどう相互作用するかを実験できます。

このツールが内部でどのように動くか

ライブプレビューは、サンプル子要素を持つフレックスコンテナです。ドロップダウンと入力でコンテナプロパティ (flex-direction、justify-contentなど) を変更すると、JavaScriptがプレビューコンテナのインラインスタイルを更新し、ブラウザがレイアウトを再レンダリングします。プレビューは実際のブラウザのFlexbox実装であり、JavaScriptシミュレーションではありません: 実際のページであなたのCSSが生成するものを正確に見ることができます。

アイテムごとの制御は、各子を個別に調整できます。アイテムを追加または削除し、それらのflex-grow、flex-shrink、flex-basis、align-self、order値を設定し、コンテナがそれに応じてスペースを再分配する様子を見ることができます。視覚的な軸インジケータが現在の構成のメイン軸とクロス軸を示し、メンタルモデルを強化します。プロパティは実際のCSSで、トランスパイルやフレームワークの接頭辞を必要とせずに、そのままスタイルシートにコピーできます。

Generated CSSパネルは各操作で更新され、2つのCSSルールを生成します: コンテナ用 (選択したflexプロパティ付き) とアイテム用です。Copy CSSをクリックすると、ルールがクリップボードに書き込まれます。ツール自体はネットワークリクエストをまったく行いません; プレビューレンダリング、コード生成、クリップボード書き込みはすべてあなたのデバイス上のJavaScriptで起こります。ページをリロードすると、最初にCSSをコピーしない限り構成は消えます。

Flexboxの簡単な歴史

• CSS 2.1レイアウト混沌、1998年から2008年。Flexboxの前、ウェブ開発者はclearfixハック付きのfloat: left、ホワイトスペースのバグ付きのdisplay: inline-block、またはtable-cellトリック付きのdisplay: tableをレイアウトに使用していました。垂直中央揃えにはtable-cellのvertical-align、負のマージントリック、または絶対位置決めが必要でした。等しいカラムにはJavaScriptが必要でした。ウェブコミュニティは「CSSでXをする方法」の回避策に関する何千ものブログ投稿を生成します。
• 最初のFlexible Boxドラフト、2009年。W3C CSSワーキンググループは2009年7月にCSS Flexible Box Layout Moduleの最初のWorking Draftを公開し、その後5年間で3つの構文が進化しました: 元のbox-*構文 (急速に廃止)、2011年のflexbox中間構文 (まだレガシーIE 10コードで見られる)、そして今日使う最終的なflex構文です。
• ブラウザサポートが安定する、2014年。Chrome 29、Firefox 28、Safari 9、IE 11はすべて2014年までに動作するFlexboxを出荷し、IE 11はバグのあるエッジケースを保持します。Flexboxは未来からFlexboxは現在への移行は、本番サイトが主要レイアウトに採用する2014-2015年に起こります。Holy Grail Layout (ヘッダー、フッター、2つのサイドバー、メインコンテンツ) が些細なものになります。
• Chris CoyierのFlexboxへの完全ガイド、2013年。CSS-TricksはChris Coyierの包括的なFlexboxガイド (2013年4月) を公開し、これは正典的なリファレンスになります。2016年までに、ガイドは任意のFlexbox質問のトップ結果の中にあり、何十もの言語に翻訳されます。Flexboxの採用を劇的に加速させます。
• CSS Gridが補完として到着、2017年。CSS Grid LayoutはChrome 57、Firefox 52、Safari 10.1 (2017年3月) で出荷されます。Flexboxを置き換えるどころか、Gridはそれを補完します: Flexboxは一次元の行/列レイアウトに優れ、Gridは二次元レイアウトに優れます。現代のデザインは通常両方を使います: Gridはページレベルの構造、Flexboxはコンポーネント内部の配置 (navアイテム、ボタングループ、カードコンテンツ) に。
• gapプロパティとsubgridが登場、2020年から2024年。gapプロパティ (元々Gridのみ) はSafari 14.1 (2021年4月) までにすべての主要ブラウザでFlexbox互換になります。よりきれいなgap: 1rem構文は、古い「最後を除くすべての子のマージン」パターンを置き換えます。CSS Subgrid (2023年+) は、入れ子のグリッドが親のグリッドトラックに合わせることができるようにし、デザインシステムレイアウトに役立ちます。

実世界のワークフロー

• ナビゲーションバー。左にロゴ、右にリンクを持つ水平ナビは典型的なFlexboxの使用例です。navコンテナにdisplay: flex; justify-content: space-between; align-items: center;で完了です。リンク間のスペースにはgap: 1.5remを追加します。この4行のCSSは、float、clearfix、ピクセルパーフェクトなマージン計算を必要とするものを置き換えます。
• 垂直および水平中央揃え。古典的な「このdivを中央に揃えるには?」という質問にはFlexboxの答えがあります: 親にdisplay: flex; justify-content: center; align-items: center;です。子の固有サイズに関係なく、親の高さに関係なく、動的なコンテンツ変更に関係なく機能します。これはFlexboxがウェブ開発にもたらした単一の最大の生活の質の改善です。
• ラッピング付きのカードリストレイアウト。狭い画面で複数の行に折り返るカードの行: コンテナにdisplay: flex; flex-wrap: wrap; gap: 1rem;、各カードにflex: 1 1 250px。カードは利用可能なスペースを埋めるように成長し、250pxの最小まで縮小し、250pxが収まらないときに新しい行に折り返ります。メディアクエリなしのレスポンシブデザイン。
• ラベル付き入力のフォーム行。フォームはしばしばラベルと入力の整列が必要です: 行にdisplay: flex; gap: 0.5rem;、ラベルにflex: 0 0 120px (固定120px幅)、入力にflex: 1 (残りのスペースを埋める)。フォームコンテナのリサイズはラベルを固定に保ち、入力を伸ばします。2列フォーム行にはCSS Gridよりも簡単。
• スティッキーフッター。コンテンツが短いときにビューポートの底にフッターを固定し、長いときにコンテンツに従う: body { display: flex; flex-direction: column; min-height: 100vh; }とmain { flex: 1 }がフッターを下に押します。古典的なスティッキーフッター問題は、2010年代の負マージン回避策を置き換える3つのCSS宣言で解決します。
• タグとバッジグループ。水平に流れて新しい行に折り返るタグ、チップ、またはバッジのリスト: display: flex; flex-wrap: wrap; gap: 0.5rem;。各タグは自分自身でサイズを決め、コンテナが配置を処理します。フィルタリングUI、コンテンツタグ付け、検索インターフェースで多用されます。状態依存のスタイリングのために:has()セレクタとよく組み合わせます。

よくある落とし穴とその意味

• min-width: autoのトラップ。Flexアイテムには暗黙的なmin-width: auto (列方向の場合はmin-height: auto) があり、コンテンツの固有の最小サイズより下に縮小することを防ぎます。これはflexコンテナ内でoverflow: hiddenとtext-truncationパターンを予期せず失敗させます。修正: 問題のあるflexアイテムに明示的にmin-width: 0を設定します。これは「なぜ私のflexレイアウトが壊れているのか?」という最も一般的な原因です。
• flex-basisとwidthの混乱。flex-basisはflexアイテムのメイン軸に沿った初期サイズで、grow/shrink計算前です。width (列方向の場合はheight) は通常のCSSサイズです。両方が設定されている場合、flex-basisが勝ちます。shorthandのflex: 1 1 200pxはflex-basisを200pxに設定します。ほとんどのケースでは、明確さのためにflexコンテナ内でwidthよりflex-basisを優先します。
• 古いブラウザでのgapサポート。gapプロパティは元々Gridのみで、より最近Flexboxに到着しました: Safari 14.1 (2021年4月)、Chrome/Firefoxではそれ以前。古いSafari (またはiOSアプリの古いWebView) をサポートするプロジェクトには、子要素のマージンを使ったフォールバックを提供します。ほとんどの最新プロジェクトは安全にgapを使えます; あなたの特定のブラウザサポートターゲットを確認してください。
• デフォルトのflex-shrinkは予期しないサイズを引き起こす可能性がある。Flexアイテムはデフォルトでflex-shrink: 1で、つまりコンテナが狭すぎる場合に宣言された幅より下に縮小できます。利用可能なスペースに関係なく要素を宣言された幅に保つには、flex-shrink: 0を設定します。メインコンテンツエリアが押してもサイドバーが250px幅を維持すべき場合に一般的です: flex-basis: 250pxの代わりにflex: 0 0 250pxです。
• パーセントのflex-basisはコンテナに対して相対的。flex-basis: 50%は「flexコンテナのメイン軸サイズの50%」を意味します。これは典型的なレイアウトでは機能しますが、flex-wrapとは奇妙に相互作用します: コンテナ自体がネストしたflexコンテキストでパーセントベースのメイン軸サイズを持つ場合、数学が複合します。疑わしい場合は、パーセンテージの代わりにピクセル値またはmin()/max()/clamp()をflex-basisに使ってください。
• IE 11のFlexboxにはバグのあるエッジケースがある。Internet Explorer 11 (2022年6月廃止) は、いくつかのバグでFlexboxを実装しました: min-heightが尊重されない、ネストされたflexコンテナが壊れる、flex: 1がflex-basisを0%ではなく0pxとして扱う場合がある、2値flex shorthandの取り扱いが矛盾するなど。もうIEをサポートしないプロジェクトでは無視。レガシーエンタープライズソフトウェアでは、徹底的にテストするか代替レイアウトアプローチを使ってください。

プライバシー: すべてはブラウザ内で動作する

CSS学習とレイアウトツールは2つのフレーバーで提供されます: クライアントサイドJavaScriptを実行する単純なHTMLページ (プライベート、高速、セットアップなし) と保存されたプロジェクト付きのクラウドエディタ (協調的だがプライバシーのトレードオフあり)。このツールは最初の種類です。プロパティの選択、アイテム構成、生成されたCSS: すべてあなたのブラウザセッションに留まります。ページをリロードすると、最初にCSSをコピーしない限り状態は消えます。

Flexbox構成はめったに機密情報を含まないため、ここではプライバシーの賭けは低いです。それでも、分析の欠如が重要です: 試行錯誤プロセスが記録されることなく自由に実験できます。学生や研修生がサードパーティプラットフォームでアカウントを登録することが摩擦点となる教室や企業研修の設定で特に役立ちます。ツールはバックエンドなしの単一の静的ページであり、ロックダウンされたエンタープライズマシンを含む任意のブラウザで使用可能です。

別のツールが正しい選択になるとき

• 二次元レイアウトにはCSS Grid。Flexboxは一次元です; 行と列の両方でアイテムを同時に整列する必要がある場合 (例えば、サイズが混在したカードの雑誌スタイルレイアウト)、CSS Gridが大幅に適しています。その種類の作業には私たちのCSS Grid Generatorを使ってください。2つは一緒にうまく機能します: Gridはページレベルの構造、Flexboxはコンポーネント内の配置に。
• 表形式データにはHTMLテーブル。データが実際にテーブルである場合 (行がレコードを表し、列がフィールドを表す)、とを持つ本物の要素を使ってください。テーブルはスクリーンリーダーへの意味的な意味、ソート可能なヘッダー、組み込みの整列を提供します。テーブルにFlexbox/Gridを使うのは2010年代のアンチパターンです; 現代のアクセシビリティガイドラインは、表形式データには明示的に意味的なHTMLテーブルを推奨しています。
  オーバーレイとツールチップにはposition: absolute。モーダルオーバーレイ、ツールチップ、ドロップダウンメニュー、および同様のフローティングUI要素は、Flexboxよりもposition: absoluteまたはposition: fixedで最もよく機能します。Flex/Gridはレイアウトフローを管理します; 絶対位置決めは要素を完全にフローから持ち上げます。それらを組み合わせます: メインページレイアウトにはFlexbox、それを覆うモーダルには絶対位置決め。
  ネストされた整列にはCSS Subgrid。ネストされたレイアウトが親のグリッドに合わせる必要がある場合 (例えば、カードグリッド全体で整列するカードタイトル)、CSS Subgrid (Firefox 71 2019、Chrome 117 2023、Safari 16 2022) がネストされたFlexboxよりも適切です。Subgridは子が親からグリッドトラックを継承できるようにし、ネストされた構造全体で完璧な整列を保証します。デザインシステムコンポーネント作業で学ぶ価値があります。

  その他のよくある質問

  flex shorthandは正確に何を意味しますか?

  flex shorthandは一度に3つのプロパティを設定します: flex: 。一般的な値: 均等分配アイテムにはflex: 1 (1, 1, 0%)、固定サイズアイテムにはflex: 0 0 auto、250pxの出発点から成長/縮小するアイテムにはflex: 1 1 250px。shorthandは1つまたは2つの値だけが提供されたときに特別な初期値を持ちます; 明示的な3値形式は驚きを避けます。

  アイテムを複数の行に折り返すにはどうしますか?

  コンテナにflex-wrap: wrapを設定します。アイテムは収まらないときに新しい行にオーバーフローします。アイテムのflex-basisと組み合わせて、行ごとに何個収まるかを制御します: flex: 1 1 200pxは、アイテムが少なくとも200pxで、残りのスペースを埋めるように成長し、狭い画面では新しい行に折り返るレスポンシブグリッドを作成します。コンテナのgapプロパティが折り返された行とアイテム間のスペースを処理します。

  flexアイテムの順序を反転できますか?

  はい、複数の方法で。コンテナレベル: flex-direction: row-reverse (またはcolumn-reverse) はすべてのアイテムを順序で反転します。アイテムレベル: orderプロパティは数値の重みを割り当てます; より低い数のアイテムが最初に現れます。デフォルトの順序は0です; 1つのアイテムにorder: -1を設定すると前に移動します。アクセシビリティに関する注: 視覚的な並べ替えはタブ順序やスクリーンリーダーの読み取り順序に影響しません。これはキーボードや支援技術のユーザーを混乱させる可能性があります。控えめに使用してください。

  align-itemsとalign-contentの違いは何ですか?

  align-itemsはクロス軸に沿って行 (または列) 内のアイテムを整列します。align-contentはコンテナ内で行 (または列) 自体を整列し、複数の折り返された行がある場合にのみ意味があります。flex-wrapがnowrap (デフォルト) に設定されている場合、align-contentは効果がありません。行が1つしかないからです。シングルライン整列にはalign-itemsを、マルチライン整列にはalign-contentを使ってください。

  Flexboxで単一要素を中央に揃えるにはどうしますか?

  古典的な答え: 親コンテナにdisplay: flex; justify-content: center; align-items: center;。これは子を水平方向と垂直方向の両方で中央に揃えます。水平のみ: justify-content: centerのみを使ってください。垂直のみ: align-items: centerのみを使ってください。高さが不明な親内で中央に揃える必要がある場合、親にmin-height: 100vhを追加して中央に揃えるための垂直スペースを持たせます。パターン全体は20年間のCSS中央揃え回避策を置き換えます。

  なぜ私のflexコンテナでテキスト切り詰めが機能しないのですか?

  flexアイテムのデフォルトのmin-width: autoのせいです。Text-overflow: ellipsisは要素がコンテナを実際にオーバーフローすることを要求します; 最小幅がコンテンツの固有サイズに設定されているデフォルトでは、要素はオーバーフローしません。修正: 切り詰めるテキストを含むflexアイテムにmin-width: 0を追加します。これは史上最も一般的なFlexboxのバグStack Overflow回答です: 「flex text-overflow ellipsis not working」を検索すると、まさにこの答えの何千ものバージョンが返されます。

  関連ツール

  🎨

  CSSグラデーション

  🖼️

  Box-shadow

  ⬜

  Border-radius

  📐

  CSS単位