フレックスアイテムの伸縮設定

親要素が最大1000pxに設定されているケースでの動作。

デフォルト値:コンテンツが収まる幅以上に伸長しない (0) / 収縮する (1) / ベース幅自動

flex: 0 1 auto;

Item1
Item2
Item3
Item4
Item5だけ幅が広い

全フレックスアイテムが 伸長しない (0) / 収縮しない (0) / ベース幅300px

flex: 0 0 300px;

Item1
Item2
Item3
Item4
Item5

全フレックスアイテムが 伸長しない (0) / 収縮する (1) / ベース幅300px

flex: 0 1 300px;

フレックスアイテムが5つだと親要素に収まらないので300pxより収縮する

Item1
Item2
Item3
Item4
Item5

フレックスアイテムが3つだと、親要素に収まるので300pxになる。

Item1
Item2
Item3

全フレックスアイテムが 伸長する (1) / 収縮する (1) / ベース幅300px

flex: 1 1 300px;

フレックスアイテムが3つ(ベース幅では100px余る)。フレックスアイテムは伸長するのでいっぱいになるまで伸びる

Item1
Item2
Item3

高度:フレックスアイテムが (1:3:1) で伸長する / (1:3:1) で収縮する / ベース幅300px

flex: 1 1 300px;
flex: 3 3 300px;
flex: 1 1 300px;

真ん中のフレックスアイテムは、前後のアイテムより3倍伸縮する

Item1
Item2
Item3