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 は常に出力されます。

          
🔊 버튼으로 8비트풍 배경음을 켜고 끌 수 있습니다(설정은 기억됩니다)
            
いいえ。レイアウトの計算とCSS生成はすべてお使いのブラウザ内（クライアントサイド）で行われ、設定内容がサーバーへ送信・保存されることはありません。