Flexbox プレイグラウンド
無料のオンライン Flexbox プレイグラウンド。flex-direction・justify-content・align-items・flex-wrap を切り替えてボックスの再配置をリアルタイムで確認し、CSS をコピーできます。
Flexbox プレイグラウンド
無料のオンライン Flexbox プレイグラウンド。flex-direction・justify-content・align-items・flex-wrap を切り替えてボックスの再配置をリアルタイムで確認し、CSS をコピーできます。
CSS flexbox について
Flexbox の役割
Flexbox は一連のボックスを一方向に並べ、余った空間をそれらの間で分配します。コンテナに display: flex を設定すると、直接の子要素が flex アイテムになり、行（または列）に並んで一緒に伸縮・整列できます。このツールは各プロパティをボタンにして、効果をすぐに確認できるようにしています。
主軸と交差軸
flex-direction が主軸を決めます：row は左から右、column は上から下です。justify-content はその主軸に沿ってアイテムを配置し、align-items は垂直な交差軸に沿って配置します。どの軸に効くプロパティかが分かれば、justify-content と align-items で迷わなくなります。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
justify-content と align-items の違いは何ですか？
justify-content は主軸（flex-direction で決まる方向）に沿ってアイテムを配置し、align-items は交差軸（それに垂直）に沿って配置します。ここで flex-direction を row と column で切り替え、どちらがボックスを動かすか確認してください。
flex: 0 1 auto はどういう意味ですか？
flex は flex-grow、flex-shrink、flex-basis をこの順にまとめた省略記法です。0 1 auto はアイテムが伸びず、空間が足りなければ縮み、コンテンツサイズから始まることを意味します。ボックスを選んで 3 つの値を編集すると、生成される CSS でこの省略記法を確認できます。
データはサーバーに送信されますか？
いいえ。すべてブラウザ内で実行され、入力した内容が端末外に出ることはありません。