flex wrap flexの折り返しと逆方向の折り返し

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/04/30 02:10

flex wrap flexの折り返しと逆方向の折り返し

Flexアイテムの折り返し

Flexアイテムの折り返し方を変更する場合は、flex-wrapプロパティ（旧仕様ではbox-linesプロパティ）を使用します。
Flexアイテムは、通常Flexアイテムの合計幅がFlexコンテナーの幅を超えると、Flexアイテムの幅は自動的に縮小していきます（flex-growに応じて縮小の仕方は異なる）が、flex-wrapプロパティを設定することで、折り返すようになります。
flex-wrapはflex-directionの指定によって折り返す方向が変わります。

http://shanabrian.com/web/css3/flex-wrap.php