作業フローを簡素化：miniwebtoolを検索。
追加
ホームページ > ウェブマスターツール > 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日

 
 
 
                          
    
 
その他の関連ツール:
 
 
カラースキームジェネレーター
CSS整形ツール新しい
CSSコンプレッサー
CSS Grid生成ツール新しい
グラデーションジェネレーター
htmlコンプレッサー
SCSSからCSSへのコンパイラー新しい
SVGからReact/JSXへの変換器新しい
 
  
 
 
 
 
  
 
 
  
 
 
 
  
    
 
 
ウェブマスターツール:


 
 
  
 
 
 
   
 
   
おすすめ:

            
標準偏差電卓 - 高精度パーセント増加電卓パーセンテージ減少電卓筆算割り算電卓シグマ記法電卓 総和ランダムカラージェネレーターランダム誕生日ジェネレーターwar電卓フィートとインチからセンチメートルへのコンバーター合計電卓パーセント誤差電卓HEX電卓円錐展開図テンプレートジェネレーター画像分割ツールランダム絵文字ジェネレーターランダム名前ジェネレーターMACアドレス検索空の行を削除する英単語ランダム生成ツールInstagramユーザーID検索中央値電卓弧長電卓楕円円周電卓👙 ブラサイズ電卓CAGR電卓番号を並べ替える分散電卓 高精度売上総利益率電卓逆テキスト手数料電卓小数時間から普通の時間へのコンバーターFPSコンバーターYouTubeチャンネル統計平方完成電卓クロスワードパズルメーカーMP3ルーパー動画を逆再生センチメートルからフィートとインチへのコンバーター対数電卓関数電卓分数から小数への電卓モジュロ電卓ai句読点追加動画を結合指数電卓-高精度血糖値コンバーター上下反転テキストジェネレーターマスターナンバー電卓相関係数計算機ランダム超能力ジェネレーター相対標準偏差電卓エンジェルナンバー電卓平方根電卓ASCIIコード表ビンゴカードジェネレーターボウリングスコア計算機労働時間計算ツールランダムトーナメント表作成ツール迷路ジェネレーターランダム名ピッカーパスワード強度テスター圧力電卓バイナリ電卓log-base-2電卓t検定電卓デシベル (dB) 電卓変動係数電卓💧 露点電卓動画を回転比率電卓斜辺電卓ランダム国ジェネレーター歩数距離変換電卓SRT 時間シフト 電卓XMLバリデーター土星回帰電卓配当利回り電卓変化率電卓3d距離電卓ホームランの打席電卓積分電卓平均電卓-高精度オンライン句読点削除ツール階段電卓ランダム日付ジェネレーター太陽・月・上昇星座電卓 🌞🌙✨マン・ホイットニーのU検定計算機中国剰余定理電卓BUN対クレアチニン比電卓csvからsrtへ桁数電卓fena電卓ボルト締付トルク計算機ランダムアニマルジェネレーター文字数による改行複数分数電卓⚔️ DPS電卓HEXコンバーターアナグラム生成器多項式因数分解電卓トルク電卓論理ゲートシミュレーター四捨五入電卓動画から画像抽出ツール表面積電卓CRC32チェックサム電卓タンジェント電卓アークタンジェント電卓双子素数ファインダービデオ速度を調整比較分数電卓筆算かけ算計算機加速度電卓有効数字電卓筆算足し算・引き算計算機10進数からBCDへのコンバーターZalgoテキストジェネレーターTwitch収益計算ツール面積分電卓分数電卓自然対数電卓ランダム時刻ジェネレーター絶対値電卓三角関数グラフ作成ツールカイ二乗検定電卓ピタゴラスの定理電卓正多角形電卓TikTok収益計算ツール🎮 ゲーム感度変換器並列抵抗電卓割引率電卓確率分布電卓ビデオをループ再生素数ですかVTTからtxtへのコンバーターカロリー赤字電卓不可視文字除去ツールSRTからTXTへの変換ツールノノグラムジェネレーター (ピクロス)ベーカーズパーセント電卓年の日電卓 - 今日は今年の何日目🖱️ クリックカウンターコラッツ予想電卓沸点計算ツールグレイコード・バイナリ変換電卓周波数波長変換ツール行番号を追加階乗電卓音節カウンター血液型計算機野球のバッティング平均電卓円錐台電卓画像回転ツール身長パーセンタイル電卓平方数リスト魔方陣ジェネレーター🔊 トーンジェネレーターワードサーチパズルジェネレーター散布図作成ツール関数グラフ作成ツールエラー関数電卓水泳ペース計算機配管流量電卓hba1c電卓二乗平均平方根電卓小文字生成器 ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾atan2電卓馬力電卓テキストからバイナリ/16進数/ASCII変換器ランニングペース電卓ヒストグラムメーカーCPM 電卓RC時定数電卓インタラクティブ単位円ビジュアライザーブール代数簡略化ツール標準誤差電卓psiからkPaへのコンバーターオーディオ スプリッター円周率の最初のn桁割り切れるテスト電卓連分数電卓10進数からバイナリへのコンバーターANC電卓Cohen's d 電卓FIP電卓ランダム整数ジェネレーターレシピ分量計算ツール乗算電卓二重積分電卓四分位範囲電卓線積分計算機HTMLからテキストコンバータIPアドレスから16進数への変換ビデオ反転塁打数電卓平方和の計算点つなぎジェネレーター素数のリストFacebookユーザーID検索四次方程式計算機副業ROI電卓サブスクリプション費用トラッカーSaaS料金計算ツールフリーランスプロジェクト料金計算機スモークウッド・ペアリングガイド発酵時間計算機マリネ時間計算機食事制限レシピフィルタースパイス代用品ファインダーカフェイン半減期トラッカー標準ドリンク計算ツールワインペアリング提案ツールクライミンググレード変換器自転車ギア比計算機釣り結び強度計算機ヨガポーズホールドタイマー水泳SWOLF電卓レースタイム予測計算機ボクシングパンチ力計算機ラグビー得点電卓クリケット・ランレート電卓サッカーxg期待ゴール電卓テニススコアトラッカーWellsスコア電卓 (DVT/PE)グラスゴー・コーマ・スケール計算機アプガースコア計算機FFMI 電卓クーパー12分間走計算ツール1マイルウォークテストロックポート電卓除脂肪体重から筋力計算炭水化物インスリン比計算機インスリン感受性係数計算機ヘブライ暦変換器ヒジュラ暦変換器旧暦変換ツール文化別年齢電卓どれくらい前計算機あと何日カウントダウン電卓日付パターンジェネレーター中間日計算機日付に営業日を追加営業日計算機単語頻度アナライザー文の長さばらつき分析ツールヘミングウェイ風リーダビリティエディタ発音IPA変換ツールヴィジュネル暗号ツールアトバッシュ暗号ツールROT13エンコーダー・デコーダーEXIFデータビューア・削除ツールピッグラテン翻訳機バックロニム ジェネレーター頭字語ジェネレーターパングラムチェッカーリポグラム チェッカー画像からSVGトレーサー画像からASCIIアートへの変換器JSONスキーマジェネレーターTypeScriptプレイグラウンドLessからCSSへのコンパイラーSCSSからCSSへのコンパイラーSVGからReact/JSXへの変換器クエリ文字列ビルダーURLパーサーUUID検証・デコーダーHTTPステータスコードリファレンスcURLコマンドビルダーシェルピンスキーの三角形ジェネレーター3D曲面プロッター極方程式プロッタージュリア集合生成器マンデルブロ集合エクスプローラーL-Systemフラクタルジェネレータードロネー三角形分割ジェネレーターボロノイ図ジェネレータースピログラフジェネレーターテッセレーションジェネレーターシックスシグマ工程能力計算機パレート図ジェネレーターNPSネットプロモータースコア計算機コホート維持率電卓解約率計算機顧客獲得コストCAC計算機顧客生涯価値CLV電卓コンバージョン率電卓A/Bテスト サンプルサイズ電卓A/Bテスト有意性電卓レンズの式計算機導線の磁場電卓電場計算機クーロンの法則電卓スネルの法則計算機慣性モーメント計算機角速度計算機求心力計算機振り子周期電卓ばね定数電卓ドップラー効果電卓ソルティノレシオ電卓トレイナー・レシオ電卓株式ベータ計算機インフレ連動米国債TIPS電卓住宅ローン リキャスト 電卓フォワードレート電卓債券デュレーション電卓 マコーレーと修正債券コンベクシティ電卓インデックス連動年金電卓変額年金電卓リバースモーゲージ電卓年金支払い計算機そろばんシミュレーターロシア農民式乗算ヴェーダ数学トリック電卓古代エジプト式乗算電卓ローマ数字計算ソルバー暗算トレーナー九九クイズ繰り上がりと繰り下がりビジュアライザー数の合成と分解生成ツール硬貨文章題ソルバー距離・速さ・時間の三角形電卓仕事算ソルバー混合問題ソルバー年齢文章題ソルバー列車出会い問題ソルバー水分補給計算機ペース カロリー電卓薬剤投与量計算機アルコールカロリー電卓ボディリコンポジション電卓ランダム討論トピックジェネレーターランダムな猫犬の名前ジェネレーターランダム聖句ジェネレーターランダム算数問題ジェネレーターランダム段落ジェネレーターランダム英文ジェネレーター砂利・砂・表土計算機鋼材重量電卓梁の電卓ドルから金への変換ツールオプション電卓株式分割電卓ESPP電卓請求書遅延手数料電卓フリーランス時給電卓リース対購入電卓高度なチップ割り勘電卓持ち物リストジェネレーター時差ぼけ電卓旅行予算電卓飛行距離電卓熱損失電卓発電コスト電卓水使用量電卓家電電気代計算機家庭エネルギー監査電卓太陽光ROI電卓太陽光パネル電卓堆肥cn比計算機芝生肥料電卓霜の日付電卓レイズドベッド用土電卓NPK肥料電卓種子発芽率電卓動画ビットレート電卓音楽キー移調ツール音楽BPMタッパー写真ファイルサイズ推定電卓メガピクセルから印刷サイズ計算機クロップファクター電卓露出トライアングル電卓車両牽引能力電卓カーリース計算機0–60とクォーターマイル電卓EV充電時間電卓EV航続距離計算機トーラス電卓不規則多角形面積電卓円錐曲線識別ツール双曲線電卓Twitter/X 文字数カウンターYouTubeコメントピッカーYouTubeタグ抽出ツールyoutubeサムネイルダウンローダーyoutube収益見積もりツールランダムRPGキャラクタージェネレーター