このツールについて
flex-direction、flex-wrap、justify-content、align-items、gap を変更すると、サンプルのアイテムが即座に並び替わり、仕様書を読むよりも早く各プロパティの働きを理解できます。align-content は flex-wrap が nowrap 以外のときだけ表示されます。単一行のレイアウトでは効果がないため、意味のない宣言をコピーしてしまうことがありません。
CSS / FRONTEND · ブラウザ内で処理
Flexbox ジェネレーター
flex コンテナのプロパティを調整し、並び方の変化をその場で確認。
プレビューのアイテムは最大 12 個。コンテナのプロパティのみを生成し、個別の flex-grow は出力しません。
1
2
3
4
5
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
}コンテナのプロパティ
align-content は折り返しが許可され、実際に折り返した場合のみ作用します。
flex-wrap
プレビュー設定
操作手順
- 主軸の方向と折り返しの有無を設定します。
- 両軸の揃え方と間隔を調整します。
- .flex-container の完全な CSS をコピーします。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- justify-content と align-items の違いは。
- justify-content は主軸方向の配置、align-items は交差軸方向の揃え方を制御します。どちらが主軸かは flex-direction で決まり、row では水平、column では垂直となるため、2 つのプロパティが作用する向きも入れ替わります。
- align-content が効かないのはなぜですか。
- align-content は複数行があるときにのみ作用します。つまり flex-wrap が wrap または wrap-reverse で、実際に折り返しが発生している必要があります。単一行では align-items を使ってください。