flex-grow

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

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

計算式を見れば自明mrsekut.icon

Flex Itemに指定するprops

defualtは0

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

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

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

(ContainerWidth) - Σ (ItemWidth)

この図がわかりやすい ref

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

https://gyazo.com/2fe699c7abcc36dac10a07c1403a7717 https://css-tricks.com/flex-grow-is-weird/

https://gyazo.com/035cf28bdf558fecde2b0f3fe6e9af74 https://css-tricks.com/flex-grow-is-weird/

https://gyazo.com/e6ea484d4aa1cc6ee40d730589116f6d https://css-tricks.com/flex-grow-is-weird/

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

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

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

計算式

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

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

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

https://gyazo.com/aa23ea5db61a9a2ff0e2bbdc839903ae https://mobile.twitter.com/samantha_ming/status/1175846647714041856

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

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

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

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

というか、説明もおかしいmrsekut.icon

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

注意する点

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

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

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

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

上と言っていることは同じmrsekut.icon

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

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

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