このツールについて
コンテナー用の標準的なFlexbox宣言を生成するツールです。番号付きの要素をプレビューに表示し、設定の変更をすぐに反映するため、さまざまな配置方法を比較できます。
使い方
- flex-directionを設定し、主軸の方向を決めます。
- justify-contentとalign-itemsを選びます。
- flex-wrapとgapを設定します。
- プレビューでアイテムの位置を確認し、.containerのCSSをコピーします。
使用例
- row + centerで、アイテムを水平方向の中央に配置できます。
- columnにすると、主軸が垂直方向になります。
- wrapは空間が足りないときに折り返し、nowrapは1行に保ちます。
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}仕組みとCSSの解説
justify-contentは主軸方向の配置、align-itemsは交差軸方向の配置を制御します。通常、rowでは主軸が水平方向、columnでは垂直方向になります。flex-wrapは空間が足りないときに折り返すかどうかを決め、gapは隣り合うアイテムや行の間隔を設定します。
主な用途
- ナビゲーション、ボタン群、カードの並びを作る。
- 主軸と交差軸の関係を理解する。
- space-between、space-around、space-evenlyを比較する。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
justify-contentとalign-itemsの違いは何ですか？
前者は主軸上の配置、後者は交差軸上の配置を制御します。常に水平・垂直に対応するわけではありません。
flex-directionを変えると主軸はどうなりますか？
rowは行方向、columnは列方向を使います。reverse付きの値では、対応する主軸の並び順が逆になります。
flex-wrapはどんなときに使いますか？
アイテムを1行に収めるために縮小させたくなく、コンテナー内で複数行に並べられる場合にwrapを使います。
Flexboxでgapは使えますか？
はい。アイテム間や行間の間隔を設定できます。出力には標準のgapプロパティを使用します。