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

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

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

空きスペースがなくなると縮まずはみ出します。

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

空きスペースがなくなると縮みます。

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

余白分を各コンテンツに伸張係数の比率で配分され、ここでは余白の 831px を 3 等分した 277px 位が各コンテンツに配分されます。

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

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

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

flex-basis: auto 以外の「絶対的 flex」ですべての空間がフリー空間としてあてがわれ、同一比なので均等になります。

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

flex: initial 状態なので、画面幅が既定の 800px 以下になると各アイテム幅の比率で縮小します。

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

コンテナー幅 1000px 内の余白分 200px を、1, 1, 2 の比率で配分されるので、ボックス幅は 350px、250px、400px に伸張されます。縮小係数（flex-shrink）が " 0 " の場合、画面幅が狭くなって余白がなくなると既定の幅 800px を維持し続けます。（800px 以下で外にはみだす）

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

縮小係数（flex-shrink）が " 1 "の場合、余白がなくなる既定の 800px 以下では既定幅の比率を維持しながらリキッドタイプを維持します。

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