flexbox/flex-wrap

ドキュメント：flex-wrap - CSS: カスケーディングスタイルシート MDN

フレックスアイテムの折り返し指定。

flex-wrap: nowrap

初期値。フレックスコンテナをはみ出してもフレックスアイテムを折り返さない。

フレックスアイテムにwitdhプロパティを指定しても、フレックスコンテナに収まる長さに縮小される。min-widthを指定した場合は縮小されない。

<div style="display: flex; flex-wrap: nowrap; align-items: start; width: 80px; height: 40px; background:#ddd">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="min-width: 50px; background:#b7b7ff">b</div>
  <div style="min-width: 50px; background:#ffb7b7">c</div>
</div>
a
b
c

flex-wrap: wrap

フレックスコンテナをはみ出すフレックスアイテムがある場合に折り返す。

<div style="display: flex; flex-wrap: wrap; align-items: start; width: 120px; height: 80px; background:#ddd">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="min-width: 50px; background:#b7b7ff">b</div>
  <div style="width: 30px; background:#ffb7b7">c</div>
</div>
a
b
c

flex-wrap: wrap-reverse

wrapと逆方向に折り返す。

<div style="display: flex; flex-wrap: wrap-reverse; align-items: start; width: 120px; height: 80px; background:#ddd">
  <div style="width: 50px; background:#ffb7b7">a</div>
  <div style="min-width: 50px; background:#b7b7ff">b</div>
  <div style="width: 30px; background:#ffb7b7">c</div>
</div>
a
b
c