作業フローを簡素化：miniwebtoolを検索。
追加
こちらもどうぞ
CSS Grid生成ツールCSSボックスシャドウジェネレーター通貨換算ツールグラデーションジェネレーター
ホームページ > ウェブマスターツール > CSS Flexbox プレイグラウンド
 

CSS Flexbox プレイグラウンド

リアルタイムのビジュアルプレビュー、アイテムごとのコントロール、実用的なレイアウトプリセット（ホーリーグレイル、カードグリッド、ナビゲーションバー、モーダル）、およびワンクリック CSS エクスポートを備えたインタラクティブな CSS Flexbox プレイグラウンドです。リアルタイムで実験しながら、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

        
      

      

    

  






 
Embed CSS Flexbox プレイグラウンド Widget
 
  
  
  
 
    
 
 
  
 
 
  
	




 
 
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日

 
 
 
                          
  
 
 
 
 
  
 
 
  
 
 
 
  
    
 
 
ウェブマスターツール:


 
 
  
 
 
 
   
   
   
おすすめ:

            
InstagramユーザーID検索パーセンテージ減少電卓パーセント増加電卓弧長電卓ランダムカラージェネレーターwar電卓動画を結合MACアドレス検索画像分割ツールフィートとインチからセンチメートルへのコンバーター標準偏差電卓 - 高精度円錐展開図テンプレートジェネレーターエンジェルナンバー電卓ランダム誕生日ジェネレーター番号を並べ替える引用検索 (英語)動画を逆再生ランダム日付ジェネレーターランダムポーカーハンドジェネレーター合計電卓シグマ記法電卓 総和FPSコンバーターランダム超能力ジェネレーターパーセント誤差電卓平方完成電卓売上総利益率電卓相対標準偏差電卓YouTubeチャンネル統計モジュロ電卓英単語ランダム生成ツールランダムトーナメント表作成ツール外れ値電卓熱膨張計算機HEX電卓ASCIIコード表血糖値コンバーター動画を回転オンライン句読点削除ツールMP3ルーパーデシベル (dB) 電卓逆テキスト中央値電卓マスターナンバー電卓ai句読点追加kva計算機楕円円周電卓手数料電卓センチメートルからフィートとインチへのコンバーターボウリングスコア計算機表面積電卓CAGR電卓太陽位置計算機空の行を削除する労働時間計算ツール圧力電卓🖱️ クリックカウンターマン・ホイットニーのU検定計算機ビデオ速度を調整小数時間から普通の時間へのコンバーター筆算足し算・引き算計算機ボルト締付トルク計算機ビンゴカードジェネレーターt検定電卓比率電卓コラージュメーカー桁数電卓筆算割り算電卓四分位範囲電卓私のIPアドレスは何ですかHEXコンバーター中間日計算機加速度電卓土星回帰電卓ポアソン分布電卓配管流量電卓パーセント成長率電卓変化率電卓求人検索ランダムクレジットカードジェネレーター不可視文字除去ツール熱伝達計算機パレットジェネレーターランダム絵文字ジェネレーターオーディオ スプリッター画像回転ツール関数電卓TikTok収益計算ツール愛の相性電卓SRT 時間シフト 電卓指数電卓（高精度）斜面計算機身長パーセンタイル電卓動画から画像抽出ツール配当利回り電卓散布図作成ツールSHA256 ハッシュジェネレーター年の日電卓 - 今日は今年の何日目Twitch収益計算ツール正多角形電卓車両重量配分計算機週番号計算機底2の対数電卓パーセントからppmへのコンバーター分数電卓アンテナ長計算機階段電卓XMLバリデーター世界時計atan2電卓相関係数計算機ANC電卓CRC32チェックサム電卓fena電卓BUN対クレアチニン比電卓GIFメーカーヒストグラムメーカーサイコロローラータンジェント電卓飛行距離電卓ランダムトランプカードジェネレーター角度変換ツールジニ係数電卓平方根電卓CMYKからHEXへの変換ツール動画分割ツール小文字生成器 ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾沸点計算ツールAIテキストヒューマナイザーアナグラム生成器ランダム名前ジェネレーターFacebookユーザーID検索カラースキームジェネレータークロスワードパズルメーカーワイヤーゲージ電卓対数電卓💧 露点電卓PSIからbarへの変換器クーパー12分間走計算ツールサッカーxg期待ゴール電卓バーコードジェネレーターローマ数字のコンバーター三相電力計算機取り消し線テキスト生成ツールトルク電卓ランニングペース電卓三角関数グラフ作成ツール割り切れるテスト電卓周波数波長変換ツール直線の方程式電卓角速度計算機じゃんけんジェネレータービデオをループ再生ランダム時刻ジェネレーター服のサイズ変換猫カロリー電卓ベーカーズパーセント電卓SRTからTXTへの変換ツール動画圧縮積分電卓迷路ジェネレーターBCD?????psiからkPaへのコンバーターそろばんシミュレーター文字数による改行日割り家賃計算魔方陣ジェネレーター🔊 トーンジェネレーター点つなぎジェネレーターhba1c電卓タイル目地計算機バイナリ電卓平均寿命電卓ポンドからキログラム変換分圧器計算電卓素数ですかカレンダー電卓hcg倍加時間計算ツール変動係数電卓水星逆行カレンダー自転車サイズ電卓IPアドレスから16進数への変換慣性モーメント計算機斜辺電卓AIお礼状ジェネレーターダイスロール確率電卓ペース カロリー電卓分散電卓 高精度直角三角形電卓10進数から16進数へのコンバーターHTMLからテキストコンバータmcgからmgへの変換ツールVTTからtxtへのコンバーターボロノイ図ジェネレーターヴィジュネル暗号ツール外接円電卓平方数リスト直列抵抗計算機グロスアップ計算機ジェスチャーゲームジェネレーターレシピ栄養計算ツールTwitter (X)用動画変換ゲーマータグジェネレーターチーム名ジェネレーターニックネームジェネレーターラップネームジェネレーターバンド名ジェネレーターファンタジー名前ジェネレーターフォーチュンクッキージェネレーターお絵描きアイデアジェネレータージャーナルプロンプトジェネレーターデイリーアファメーションジェネレーター褒め言葉ジェネレーター口説き文句ジェネレーター親父ギャグジェネレーターランダムジョークジェネレーターランダム雑学ジェネレータートリビアクイズジェネレーターハングマン単語ジェネレーターピクショナリー単語ジェネレーターアイスブレイク質問ジェネレーターNever Have I Ever ジェネレーターどっちを選ぶジェネレーターランダム質問ジェネレーターAI夢占いAI結婚式スピーチジェネレーターAIプレスリリースジェネレーターAI商品説明ジェネレーターAI動画スクリプトジェネレーターAI YouTubeタイトル・概要欄ジェネレーターInstagramキャプションジェネレーターAI LinkedInヘッドライン・自己紹介ジェネレーターAI職務経歴書ブレットジェネレーターAIカバーレター作成ツールAIラップ歌詞ジェネレーターPDFフラット化ツールPDFロック解除（オーナーパスワード削除）PDFテキスト抽出PDFページ抽出PDF単語カウンターPDFにパスワードを設定PDFにページ番号を追加PDFページ並べ替えPDFページ削除PDF回転JPGをPDFに変換PDFをJPGに変換PDF圧縮PDF分割PDF結合PTからPXへの変換器PXからREMへの変換器トラからグラムへの変換器インドの土地単位変換器AI歌詞ジェネレーターAI詩ジェネレーターAIストーリージェネレーターAI翻訳AIテキスト要約ツールmgからmlへの変換器MPHからKMHへの変換器ノットからマイル毎時変換器立方メートルから立方フィート立方フィートから立方ヤード変換器平方フィートから平方メートル換算平方メートルから平方フィート変換器オンスからmlへの変換器mlからオンスへの変換器ガロンからリットル変換器リットルからガロン変換器キログラムからストーンへの変換器ストーンからキログラム変換器インチからミリメートルへの変換器ミリメートルからインチへの変換器マイルからキロメートル変換器キロメートルからマイル変換器華氏から摂氏への変換器摂氏から華氏への変換器バックパックサイズ電卓サーフボード容量電卓テニスグリップサイズ電卓ヘルメットサイズ電卓手袋サイズ電卓帽子サイズ変換スノーボードサイズ電卓スキーサイズ電卓スピードランスプリットタイマーステーブルフォード計算機ダーツチェックアウト電卓ボウリング・エコノミーレート電卓打撃ストライクレート電卓ネットランレート計算機KDレシオ計算機Eloレーティング計算機心拍数回復電卓ハイキング時間計算機ローイングペース計算機ランニング年齢グレード計算機FTP・パワーゾーン計算機Beepテスト電卓ACFTスコア電卓Wilks & DOTS 電卓ホイールオフセット電卓タイヤ負荷指数・速度レーティング検索マイルあたりコスト電卓リース買取電卓オクタン価ブレンド電卓2ストロークオイル混合電卓エンジン排気量計算ソファ搬入電卓薪コード計算機空気清浄機CADR電卓除湿機サイズ計算シーリングファンサイズ電卓カーテンサイズ計算機ラグサイズ電卓額縁の掛け高さ計算機テレビ取り付け高さ計算機テレビサイズ電卓池の容量・ライナー電卓プール塩量計算機プール容量計算給湯器サイズ電卓エポキシ樹脂計算機手すり子間隔電卓巾木とトリムの電卓サイディング計算機デッキ用ステインの計算芝生の種計算機芝生電卓アスファルト電卓立方ヤード電卓電線管充填率電卓直列並列コンデンサ電卓誘導リアクタンス計算機部屋の照明計算機ルクスからルーメン電卓ルーメンからワット変換器発電機サイズ計算機mAh Wh 変換器 電卓アンペアからワット電卓ワットからアンペア電卓摩擦計算機機械的倍率計算機音速計算機波の速度計算機浮力電卓終端速度計算機ド・ブロイ波長計算機光子エネルギー計算機emc2電卓時間の遅れ計算機ケプラーの第三法則計算機脱出速度計算機万有引力計算機ベール・ランベルトの法則電卓ネルンストの式計算機浸透圧計算機沸点上昇電卓凝固点降下計算パーセント組成計算機規定度計算機質量モル濃度計算機pKa→Ka変換器ヘンダーソン・ハッセルバルヒ電卓理論収量計算機制限反応物計算機電子配置計算機インタラクティブ周期表AI授業計画ジェネレーターAIクイズ作成ツール引用ジェネレーター (APA/MLA/Chicago)出席率計算APスコア計算機ACTスコア計算機SATスコア電卓youtube収益見積もりツールランダムRPGキャラクタージェネレーター