Flexboxプレイグラウンド
CSSFlexboxを視覚的に実験。
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
Flexboxプレイグラウンド：CSSフレックスボックスを視覚的に実験
CSS Flexboxは1次元レイアウトのための強力なシステムです。このプレイグラウンドでは、flex-direction、justify-content、align-items、flex-wrap、gapなど、Flexboxのすべてのプロパティをインタラクティブに実験できます。
各プロパティの値を変更するたびにプレビューがリアルタイムで更新されるため、Flexboxの動作を視覚的に理解できます。CSSコードも同時に生成されるため、学習とコーディングを同時に進められます。
Flexboxの初心者から上級者まで、レイアウトの設計と検証に最適なツールです。すべての処理はブラウザ内で行われます。
よくある質問
FlexboxとGridの使い分けは？
Flexboxは1次元レイアウト（横方向または縦方向の配置）に最適で、ナビゲーションバー、カードの並び、フォーム要素の配置などに使います。Gridは2次元レイアウト（行と列の同時制御）に優れ、ページ全体の構造設計に適しています。多くの場合、両方を組み合わせて使用します。
flex: 1とは何ですか？
flex: 1はflex-grow: 1、flex-shrink: 1、flex-basis: 0%の短縮形です。これにより、要素が利用可能なスペースを均等に分配します。同じコンテナ内の複数の要素にflex: 1を設定すると、すべて同じ幅（または高さ）になります。
align-itemsとalign-contentの違いは？
align-itemsは各行内のアイテムの交差軸方向の配置を制御します。align-contentは複数行がある場合（flex-wrap: wrap）の行同士の間隔と配置を制御します。1行のみの場合、align-contentは効果がありません。
もっと知りたいですか？ 完全ガイドを読む →