フレックスアイテムの伸縮設定
親要素が最大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