CSS Flexbox プレイグラウンド

CSS Flexbox プレイグラウンド

CSS Flexbox プレイグラウンドは、現代的な CSS Flexible Box Layout モジュールのためのインタラクティブな学習環境およびコードジェネレーターです。コンテナのプロパティ（flex-direction、justify-content、align-items、gap）やアイテムごとのプロパティ（flex-grow、flex-shrink、flex-basis、align-self、order）を調整し、レイアウトがリアルタイムで更新されるのを確認できます。気に入ったものができたら、すぐに貼り付けられる CSS と HTML をプロジェクトに直接コピーしてください。

CSS Flexboxとは何ですか？

CSS Flexbox（Flexible Box Layout）は、単一の軸（行または列）に沿ってスペースを分配し、コンテナ内のアイテムを整列させるために設計された1次元レイアウトモデルです。ナビゲーションバー、カードの行、中央揃えのコンテンツ、および要素をコンテナに合わせて自然に伸縮させる必要があるUIにおいて、floatやinline-blockハックなどの古い手法に代わるものです。2次元である CSS Grid とは異なり、Flexbox は一度に1つの方向の配置のみを制御するシンプルな配置に優れています。

このプレイグラウンドの使い方

1. プリセットを選択する（任意）： Holy Grail、Card Grid、Navbar、Hero、Modal、または Sticky Footer を選択して、実際の開始点を読み込みます。各プリセットは、学習や修正が可能な完成されたレイアウトです。
2. コンテナのプロパティを調整する： 右パネルのセグメントコントロールを使用して、flex-direction、flex-wrap、justify-content、align-items、align-content、および gap を設定します。ビジュアルステージがすぐに更新されます。
3. 個々のアイテムを編集する： プレビュー内のアイテムをクリックして選択します。そのアイテムの order、flex-grow、flex-shrink、flex-basis、および align-self を他のアイテムとは独立して上書きします。上書きされたアイテムには小さなバッジが表示されます。
4. アイテムを追加または削除する： 「アイテムを追加」と「選択したアイテムを削除」を使用してアイテム数を変更し、レイアウトがどのように反応するかを確認します。
5. コードをコピーする： 下部の「生成されたコード」セクションには、常に現在のレイアウトが反映されます。ワンクリックで CSS、HTML、またはその両方をコピーできます。

コンテナプロパティ リファレンス

フレックスコンテナは display: flex を持つ親要素です。これらのプロパティは、すべての子要素がどのように動作するかを制御します。

アイテムプロパティ リファレンス

これらのプロパティは個々のフレックスアイテム（フレックスコンテナの子要素）に適用され、そのアイテムのコンテナのデフォルト設定を上書きします。

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

justify-content は 主軸 に沿った整列を制御し、align-items は 交差軸 に沿った整列を制御します。主軸は flex-direction が設定する方向（row の場合は水平、column の場合は垂直）です。flex-direction を row から column に変更すると、2つの軸が入れ替わるため、justify-content が垂直方向、align-items が水平方向になります。この入れ替えは、Flexbox を学ぶ際に最も混乱しやすいポイントの1つです。プレビューの下にあるプレイグラウンドの軸インジケーターは、これを視覚的に理解するのに役立ちます。

Flexbox で要素を中央に配置するにはどうすればよいですか？

単一の要素を水平方向と垂直方向の両方で中央に配置するには：

これは、margin: auto、transform: translate(-50%, -50%)、または position: absolute を伴う古い中央揃えハックに代わる現代的な方法です。プレイグラウンドで Modal Center プリセットを選択して試してみてください。

実用的なレイアウトプリセットの解説

Holy Grail Layout（聖杯レイアウト）

ヘッダーとフッターがあり、左サイドバー、メインコンテンツ、右サイドバーという伝統的な3カラムのページレイアウトです。歴史的に float で構築するのは非常に困難でしたが、Flexbox を使えば簡単です。中央のカラムに flex: 1 を使用することで、サイドカラムが宣言された幅を維持したまま、残りのすべての水平スペースを吸収します。

Card Grid（カードグリッド）

ビューポートが狭くなるにつれて新しい行に流れる、折り返しのあるカードの行です。flex-wrap: wrap を使用し、各カードに flex: 1 1 240px を設定します。これは、カードが伸縮するものの 240px より狭くならないことを意味します。

Navbar（ナビゲーションバー）

左側にロゴ、右側にリンクがある水平方向のナビゲーションバーです。コツは、ロゴとリンクグループを2つの子要素として justify-content: space-between を設定し、さらにリンク自体にも内部的なフレックスコンテナを使用することです。

Hero Section（ヒーローセクション）

コンテンツを水平・垂直の両方で中央に配置した垂直スタックで、ランディングページのヒーローエリアに最適です。高さのあるコンテナに flex-direction: column、justify-content: center、および align-items: center を使用します。

Modal Center（モーダル中央）

オーバーレイ内で完全に中央に配置されたモーダルダイアログです。上記の3ステップの中央揃えレシピを、フルスクリーンのオーバーレイコンテナに適用したものです。

Sticky Footer（スティッキーフッター）

コンテンツが少ないときはビューポートの最下部にあり、コンテンツが長いときは押し下げられるフッターです。body に display: flex; flex-direction: column; min-height: 100vh を、メインコンテンツに flex: 1 を設定することで実現します。

flex-grow、flex-shrink、flex-basis の違いは何ですか？

これら3つのプロパティ（ショートハンド flex で組み合わされます）は、アイテムがスペースをどのように処理するかを記述します。

• flex-basis は、空きスペースが分配される前のアイテムの 理想的な サイズを設定します。アイテムの「開始点」と考えてください。
• flex-grow は、「余ったスペースがある場合、その一部をどの程度受け取るか」を指定します。値 0 は成長を拒否することを意味し、1 は比例して成長し、2 は 1 のアイテムの2倍のシェアを受け取ることを意味します。
• flex-shrink は、「スペースが足りない場合、どれだけ縮小するか」を指定します。デフォルトは 1（比例して縮小）で、0 は縮小を拒否することを意味します。

ショートハンドの flex: 1 は flex: 1 1 0% に展開されます。これは、均等な成長、均等な縮小、ゼロベースを意味し、コンテンツに関係なくすべてのアイテムがコンテナを均等に分け合うことになります。flex: auto は flex: 1 1 auto に展開され、コンテンツのサイズをベースとして尊重します。

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

アイテムが単一の方向（ボタンの行、ナビバー、カードの単一のカラム）に流れる 1次元 レイアウトには Flexbox を使用してください。Flexbox はコンテンツを認識し、アイテムに自身のサイズを決めさせたい場合に適しています。

行と列の両方を同時に制御する必要がある 2次元 レイアウト（フルページレイアウト、画像ギャラリー、ダッシュボード）には CSS Grid を使用してください。Grid はレイアウトを認識し、名前付きのトラックにアイテムを配置できます。

この2つは補完的なものであり、競合するものではありません。多くの実際のデザインでは、Grid ページレイアウトの中に Flexbox のナビバーやカードの行を組み合わせるなど、両方を組み合わせています。

Flexbox マスターのためのヒント

• 軸を可視化する。 どちらが「メイン」軸でどちらが「交差」軸かを常に意識してください。プレイグラウンドの軸表示はこれを明確にします。
• マージンの代わりに gap を使用する。 現代のブラウザはフレックスコンテナの gap を完全にサポートしており、最後の子要素に面倒なマージン処理をする必要がなくなりました。
• flex: 1 を活用する。 アイテムにスペースを均等に分け合わせたい場合、このショートハンドはほぼ常に正解です。
• フレックスアイテムに min-width: 0 を設定する。 アイテムには、コンテンツに基づいた暗黙の最小幅があります。URL のような長い文字列によってレイアウトが崩れる場合は、アイテムに min-width: 0 を設定してこれを上書きしてください。
• パーセンテージのみの幅指定を避ける。 パーセンテージの幅と flex-grow を混ぜると、意外な結果になることがあります。適切なデフォルト値を持つ flex-basis を優先してください。

ブラウザのサポートと互換性

CSS Flexbox は、Chrome、Firefox、Safari、Edge、およびすべての主要なモバイルブラウザを含む、あらゆるモダンブラウザでサポートされています。フレックスコンテナの gap プロパティは2021年に主要ブラウザで普遍的なサポートに達しました。古いレガシーブラウザ（IE10/11）ではベンダープレフィックスが必要であり、いくつかの既知のバグがあります。それらのユーザー向けには flexbugs を参照してください。

よくある質問

フレックスアイテムがコンテナからはみ出すのはなぜですか？

フレックスアイテムには、コンテンツに基づく暗黙の min-width: auto があります。長い単語、コードブロック、または整形済みテキストにより、アイテムがコンテナよりも広くなることがあります。これを修正するには、アイテムに min-width: 0（カラムレイアウトの場合は min-height: 0）を設定します。

space-between、space-around、space-evenly の違いは何ですか？

space-between は両端にスペースを置かず、アイテム間に等間隔のスペースを置きます。space-around は両端に半分のギャップ、アイテム間にフルギャップを置きます。space-evenly は両端とアイテム間に完全に等間隔のスペースを置きます。プレイグラウンドで切り替えて違いを確認してください。

Flex プロパティをアニメーション化できますか？

はい。flex-grow、flex-shrink、flex-basis、order、および gap は遷移（transition）させることができます。flex-direction、justify-content、および align-items は離散的な列挙プロパティであるため、アニメーションはサポートされていません。

プレイグラウンドはオフラインで動作しますか？

すべての Flexbox 計算は、ネイティブ CSS を使用してブラウザ内で実行されます。ページが読み込まれた後は、API コールやサーバー側の計算がないため、インターネット接続なしでプレイグラウンドを使用できます。

生成されたコードは本番環境で使用できますか？

はい。エクスポートされた CSS は、すべての最新ブラウザでサポートされている標準プロパティを使用しています。HTML はセマンティックなクラス名（flex-container、flex-item）を使用しており、プロジェクトの規則に合わせて変更することも可能です。

追加リソース

• CSS フレキシブルボックスレイアウト - MDN
• CSS Flexible Box Layout Module Level 1 - W3C 仕様書 (英語)
• CSS Flex Box Layout - Wikipedia (英語)

その他の関連ツール:

ウェブマスターツール:

• CPC 電卓
• CPM 電卓
• CSSコンプレッサー
• ファビコンジェネレーター
• グーグルアドセンス電卓
• cronジョブジェネレーター
• crontab式ジェネレーター
• htmlコンプレッサー
• HTMLからテキストコンバータ
• キーワード密度チェッカー
• markdown表ジェネレーター
• メタタグジェネレーター
• スマート引用符削除ツール
• urlスラッグジェネレーター
• ページビュー価値の電卓
• 訪問者の価値の電卓
• unixパーミッション電卓
• htmlエンティティエンコーダーデコーダー
• Lorem Ipsumジェネレーター
• json文字列エスケープアンエスケープ
• cURLからJSONへ変換ツール
• SQLフォーマッター
• SVG最適化ツール
• .htaccessリダイレクトジェネレーター
• Googlebot クロールサイズチェッカー
• robots.txt生成ツール 新しい
• XMLサイトマップ生成ツール 新しい
• ドメイン年齢チェッカー 新しい
• Open Graphチェッカー 新しい
• WHOIS検索 新しい
• DNSルックアップ 新しい
• ページ速度チェッカー 新しい
• ドメイン信頼度チェッカー 新しい
• リダイレクトチェッカー 新しい
• Hreflang タグジェネレーター 新しい
• リンク切れチェッカー 新しい
• CSS Flexbox プレイグラウンド 新しい
• CSS Grid生成ツール 新しい
• Gitコマンド生成ツール 新しい
• .env ファイルジェネレーター 新しい