Flex Lesson

flexプロパティはflex-growと flex-shrink、そしてflex-basisの短縮記法です。 値はスペースで区切って記述され、flex-grow、flex-shrink、flex-basisの順番になります。 flex-basisプロパティとはすでに指定しているflexアイテムのwidthの値をflex-basisの値に書き換えるものです。すでにwidhで幅を指定しているのに、わざわざflex-basisを使う必要はないと考えてしまいますが、Flexboxではwidhで幅を指定しても、先のflex-growやflex-shrinkを使われると指定したいた幅が無効になってしまいます。 そんなときに、flex-basisを使えばwidthの値を固定することができるわけです。
flex-grow、flex-shrinkの値を1にしてflex-basisに固定の値を設定するとフレックスコンテナがflex-basisの固定値の合計よりも拡大縮小したら、フレックスアイテムは固定幅の比率を保ち続けて拡大縮小します。