Sponsored Link
プロパティ・値の解説
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| flex-wrap | フレックスアイテムがフレックスコンテナの横幅や高さを超えたら折り返すかを指定 | nowrap(初期値)・wrap・wrap-reverse |
CodePenで動作チェック
flex-wrap・・・フレックスアイテムを折り返すのかどうか
上記のそれぞれの値の挙動をCodePenで見てみましょう。
変化がなければブラウザウィンドウの横幅を縮めてみてください。
See the Pen プロパティ:flex-wrap(主軸は縦方向) by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
プロパティ「flex-wrap」の値によるそれぞれの挙動は以下でも確認できます。
flex-wrapプロパティの値による挙動の違い
CSS Demo: flex-wrap(mozilla.net)
フレックスアイテムを折り返すのか折り返さないのかを指定するプロパティ
フレックスボックスは「フレックスコンテナ」と「フレックスアイテム」の親子関係で成り立ちますが、主軸方向に描画されたフレックスアイテムが、フレックスコンテナの横幅や高さに収まりきらない場合のレイアウトは、アイテムを折り返して表示するかどうかがポイントになります。
折り返しの有無を「flex-wrap」というプロパティで指定を行い、初期値は「折り返さない:nowrap」です。
値に「nowrap」を指定すると折り返さずに縮小して表示し、
「wrap」を指定すると1行目に収まりきらない場合は続きを2行目から表示し、
「wrap-reverse」を指定すると「wrap」の表示を逆方向から再現します。