「Flex Containerの残り空間を、各Flex Itemに、割り振る比率」を指定する

故に、残り空間がそもそもなければ、何を指定しようと何も変わらない

計算式を見れば自明

Flex Itemに指定するprops

defualtは0

伸びる方向はflex-directionに依存する

「残り空間」はどのようにして定義されるのか

全Flex Itemが flex-grow:0 の状態での、Flex Containerの余っている部分の幅

この図がわかりやすい ref

残り空間をgrowの比率で割って、それぞれに割り振っている

「元の幅(赤や青)」に「灰色*n」を足しているだけなので、

結果が n : m みたいにきれいな比率になるとは限らないし、

growはそもそもそういう話をしているのではない、ということがわかりやすい

計算式

\text{new width}:=(\frac{\text{flex-grow}}{\text{total flex-grow}}*\text{free space})+\mathrm{width}

widthは、何も指定しなかったときの元のwidth

free spaceは、「残り空間」のこと

total flext-growは、全てのFlex Itemの flex-grow の総和

上の画像なら、itemは3つあって 1,0,3 なので total flex-grow=4

計算式から分かる通り、 free space=0 なら、growに何を指定しようとも何も変化はない

なのでこの図とかはおかしい

というか、説明もおかしい

playgroundでchildを2つ、children widthを50%にして試してみると良い

注意する点

growを指定すれば、Flex Itemが等幅になるわけではない

flex-growはそもそもそういう話をしていない

等幅になることもあるが、そういう話じゃない

必ずしも比率になるわけではない

上と言っていることは同じ

1から2に変えても倍にならないこともある

flex-growはそもそもそういう話をしていない

計算式など、わかりやすい