Archipela / Dev / Flexboxプレイグラウンド

📐 Flexboxプレイグラウンド

CSS Flexboxの各プロパティを切り替えながら、アイテムの並びを視覚的に確認できます。justify-content や align-items の効果を体感でき、生成されたコンテナCSSをそのままコピーできます。すべての処理はブラウザ内で完結します。

10px
4

空欄の項目は初期値のまま出力されません。


        

          
        

      

    


    
    

    

      

        
📘 使い方

        
    
          
  1. 「コンテナ設定」で flex-direction・justify-content・align-items・flex-wrap・align-content・gap を切り替えます。プレビューが即座に更新されます。
    2. 
          
  2. 「アイテム数」スライダーでボックスの数を1〜8個に変更できます。ボックスは高さがまちまちなので align-items の効果が分かりやすくなっています。
    3. 
          
  3. 「選択アイテムの個別設定」で対象を選び、flex-grow・flex-shrink・flex-basis・align-self を指定すると、そのアイテムだけのCSSが追加出力されます。
    4. 
          
  4. 下の「生成されたCSS」を「CSSをコピー」でコピーして利用します。
    5. 
        

      

      

        
❓ よくある質問

        

          
justify-content と align-items の違いは？
            
justify-content は主軸（flex-direction の方向）に沿った配置、align-items は交差軸（主軸に直交する方向）の配置を制御します。direction を row にすると主軸は横方向、column にすると縦方向になります。

          
align-content はいつ効きますか？
            
align-content は flex-wrap を wrap にして複数行になったときに、行全体の交差軸方向の間隔を制御します。1行のときは効果がありません。

          
生成されるCSSに初期値が含まれないのはなぜ？
            
可読性のため、初期値と同じプロパティは省略しています。たとえば flex-wrap: nowrap は初期値なので出力されません。display: flex は常に出力されます。

          
設定内容はサーバーに送信されますか？
            
いいえ。レイアウトの計算とCSS生成はすべてお使いのブラウザ内（クライアントサイド）で行われ、設定内容がサーバーへ送信・保存されることはありません。