2010年から · 毎月200万回以上のツール利用を支えています
2010年から
Chrome に追加

私のツールボックス

自動モード

保存したツールはまだありません。

プレミアムバージョンにアップグレード
関連ツール
CSS Grid生成ツールCSSボックスシャドウジェネレーターグラデーションジェネレーター
ホームページ > ウェブマスターツール
 

CSS Flexbox プレイグラウンド

ライブプレビュー付きの対話式CSS Flexboxプレイグラウンドです。項目ごとの設定、実践的なプリセット(ホーリーグレイル、カードグリッド、ナビバー、モーダル)、ワンクリックCSS書き出しでflex-direction、justify-content、align-items、gapを体験しながら学べます。

無料で利用可能登録不要すぐに結果表示
CSS Flexbox プレイグラウンド今すぐ無料で試す ▼
⚡ クイックスタートレイアウト （クリックして読み込み）
▦ ライブプレビュー
→ 主軸 (main axis) ↓ 交差軸 (cross axis) 0 個のアイテム ヒント: アイテムをクリックして編集
⚙ コンテナ (.flex-container)
flex-direction ?
flex-wrap ?
justify-content ?
align-items ?
align-content ?
gap 8px
8px
✦ 選択したアイテム (.flex-item)
プレビュー内のアイテムをクリックしてプロパティを編集します。
📖 クイック・チートシート — 一般的なパターン
▼
やりたいことこれを使う
1つのアイテムを完全に中央揃えにするjustify-content: center; align-items: center
均等な幅のカラムを作る各アイテムに flex: 1
1つのアイテムを右側に寄せるそのアイテムに margin-left: auto
小さな画面でカードを折り返すflex-wrap: wrap + flex: 1 1 240px
モバイルで順序を逆にするメディアクエリ内で flex-direction: row-reverse
ビューポート下部にフッターを固定するbody: display: flex; flex-direction: column; min-height: 100vh
アイテム間に均等なスペースを作るjustify-content: space-between
アイテムを縮小させないアイテムに flex-shrink: 0
生成された CSS

    


    

      

        
生成された HTML

        
      

      

    

  






 
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. 
  
  2. コンテナのプロパティを調整する： 右パネルのセグメントコントロールを使用して、flex-direction、flex-wrap、justify-content、align-items、align-content、および gap を設定します。ビジュアルステージがすぐに更新されます。
    3. 
  
  3. 個々のアイテムを編集する： プレビュー内のアイテムをクリックして選択します。そのアイテムの order、flex-grow、flex-shrink、flex-basis、および align-self を他のアイテムとは独立して上書きします。上書きされたアイテムには小さなバッジが表示されます。
    4. 
  
  4. アイテムを追加または削除する： 「アイテムを追加」と「選択したアイテムを削除」を使用してアイテム数を変更し、レイアウトがどのように反応するかを確認します。
    5. 
  
  5. コードをコピーする： 下部の「生成されたコード」セクションには、常に現在のレイアウトが反映されます。ワンクリックで CSS、HTML、またはその両方をコピーできます。
    6. 




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


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






  
    
プロパティ値効果

  
  
    

      flex-direction
      row · row-reverse · column · column-reverse
      主軸の方向を設定します。row はアイテムを左から右に配置し（デフォルト）、column は垂直に積み上げます。
    

    

      flex-wrap
      nowrap · wrap · wrap-reverse
      スペースがなくなったときに、アイテムを1行に収めるか複数行に折り返すかを制御します。
    

    

      justify-content
      flex-start · center · flex-end · space-between · space-around · space-evenly
      主軸に沿ってアイテムを整列させます。空きスペースを側面やアイテム間に分配します。
    

    

      align-items
      stretch · flex-start · center · flex-end · baseline
      交差軸（主軸に垂直な軸）に沿ってアイテムを整列させます。
    

    

      align-content
      stretch · flex-start · center · flex-end · space-between · space-around
      折り返された行を交差軸に沿って整列させます。アイテムが複数行に折り返された場合にのみ効果があります。
    

    

      gap
      長さ（例：8px, 1rem）
      フレックスアイテム間の溝（ギャップ）を設定します。古い margin ベースの間隔パターンの代わりとなります。
    

  






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


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






  
    
プロパティ値効果

  
  
    

      order
      整数（デフォルト 0）
      HTMLを変更せずにアイテムを視覚的に並べ替えます。数値が小さいほど先にレンダリングされ、負の値はアイテムを開始位置に移動させます。
    

    

      flex-grow
      数値（デフォルト 0）
      コンテナの空きスペースを兄弟要素と比較してどれだけ吸収するかを定義します。すべてのアイテムに 1 を設定すると、スペースが均等に分割されます。
    

    

      flex-shrink
      数値（デフォルト 1）
      十分なスペースがないときにアイテムがどれだけ縮小できるかを定義します。0 は決して縮小しないことを意味し、アイテムは宣言されたサイズを維持します。
    

    

      flex-basis
      auto · 長さ · パーセンテージ
      空きスペースが分配される前のアイテムの初期サイズを設定します。実質的にアイテムの「理想的な」主軸サイズを設定します。
    

    

      align-self
      auto · align-itemsと同じ値
      単一のアイテムに対してコンテナの align-items を上書きします。
    

  






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


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



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


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



3つのステップ：

display: flex;

justify-content: center;  /* 水平方向 */

align-items: center;  /* 垂直方向 */



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



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


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


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


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



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




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


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 Flexbox プレイグラウンド"（https://MiniWebtool.com/ja/css-flexbox-プレイグラウンド/）、MiniWebtool、https://MiniWebtool.com/ 

miniwebtool チームによる。更新日: 2026年4月25日

 
 
 
 
 
 
                          
  
 
 
 
  
 
 
  
    
 
 
ウェブマスターツール:


 
 
  
 
 
 
   
   
   
人気・最新のツール:



LessからCSSへのコンパイラーSCSSからCSSへのコンパイラーCSSコンプレッサーすべて見る →
     
ホームページ > ウェブマスターツール > CSS Flexbox プレイグラウンド