折り返し（複ライン flex-wrap: wrap）flex 使用例

１、通常フロー（ max-width: 1000px; ）リキッドタイプ

２、flex: none ( flex: 0 0 auto )（伸びない、縮まない）

空きスペースがなくなると折返しますが、更にスペースがなくなると縮まずはみ出します。

３、flex: initial ( flex: 0 1 auto )（伸びない、空きスペースがなくなると縮む）

空きスペースがなくなると折り返しますが、更にスペースがなくなると縮みます。

４、flex: auto ( flex: 1 1 auto )

余白分を各コンテンツに伸張係数の比率で配分され、ここでは余白の 832px を 3 等分した 277px 位が各コンテンツに配分されます。画面幅が狭くなっても分割比率はそのままです。

５、均等分割 flex: 1 ( flex: 1 1 0px )

画面幅が狭くなっても、均等分割のまま折り返しません。

６、均等分割 flex: auto; width: 200px;（幅の値は何でもよい）

画面幅が既定の 600px まで維持し、600px 、400px 以下になると右端のボックスは下に折り返し各ボックス幅は再調整されます。

７、均等分割 flex-grow: 1; width: 200px;（幅の値は何でもよい）

画面幅が既定の 600px まで維持し、600px 、400px 以下になると右端のボックスは下に折り返し各ボックス幅は再調整されます。

８、個別に幅指定 width: 300px; width: 200px; width: 300px;

画面幅が既定の 800px 以下になると、float のカラム落ちのように下に折り返します。

９、例８の「個別に幅指定」を flex 伸張（ 伸張係数 1, 1, 2 ）
flex: 1 0 300px; flex: 1 0 200px; flex: 2 0 300px;

コンテナー幅 1000px 内の余白分 200px を、1, 1, 2 の比率で配分されるので、ボックス幅は 350px、250px、400px に伸張されます。画面幅が狭くなると余白がなくなる既定の幅 800px まで維持し、800px、500px 以下になると右端のボックスは下に折り返しコンテナ幅が 300px まで再調整され 300px 以下で外にはみ出します。

１０、例９の flex 縮小係数 " 0 "を " 1 " にする
flex: 1 1 300px; flex: 1 1 200px; flex: 2 1 300px;

例９と同じように折り返しますが、コンテナ幅 300px 以下でも縮小されます

※格子の最小目盛サイズは 5px、色合いにより 10px、50px、100px です。