FlexBox サイズの決まり方の疑問

Question

前提・実現したいこと

FlexBoxを使用したツーカラムレイアウトを知人が作りましたが、なぜうまくｙ動いてるのかがわかりません
友人にたずねたら「flex-growで半分ずつにしたからツーカラムになった」らしいです

発生している問題・エラーメッセージ

調べたらフレックスコンテナーの残りのうちどれだけがそのアイテムに割り当てられるか比率をflex-growは決めるようです。それなら0.5なので二つ目の緑は黒の半分になるはずですよね？
なのでこれがうまくいく理由がわかりません

該当のソースコード

問題のソースコード

<article>
    <section></section>
    <footer></footer>
</article>


article {
    height: 10vh;
    background-color: purple;
    display: flex;
}

footer,section {
    flex-grow: 0.5;
    background-color: black;
}

footer {
    background-color: green;
}

試したこと

FlexBox　基本などで調べましたがやはりわかりませんでした

Comments

[m.ts10806]

タグ「Flex」は本件には不適当なタグと思います。
https://teratail.com/tags/Flex

[noumennsann]

勘違いしてました。ありがとうございました。

Answer 1

まず下記のようにfooterとsectionを flex-grow: 0;(初期値)に設定してみます。

article {
    height: 10vh;
    background-color: purple;
    display: flex;
}
footer, section {
  flex-grow: 0;
}
section {
    background-color: black;
}
footer {
    background-color: green;
}

するとarticleブロックはすべて紫になります。
そのときデベロッパーツールでsectionとfooterの幅を確認してみると0になってます。
flex-grow: 0;は幅を拡張させないということで、中身がないので幅も0ということです。

次に下記のように1に設定してみます。

footer, section {
  flex-grow: 1;
}

ブロックは黒と緑で半分に分割されます。
これは余白部分（今回は100%余白）を footer:section = 1:1 の比率で分割するという意味になります。

今度は下記のようにそれぞれ 1 と 2 に設定してみます。

section {
  flex-grow: 1;
}
footer {
  flex-grow: 2;
}

ブロックは黒と緑で1：2に分割されます。
それぞれのflexアイテムに指定した比率で余白が分割されるという意味です。

footer, section {
  flex-grow: 0.5;
}

は 0.5:0.5の比率で余白が分割されるという意味です。
0.5:0.5=1:1 なので半分に分割されます。

つまり0.5だろうが1だろうが100だろうが同じ値を設定すれば同じ比率なので半分に分割されるということです。

Comments

[noumennsann]

残りx1になるということですね
ねっとくできました
ありがとうございました！

Answer 2

親要素の余っている幅に対する割合の話なので、
２つとも同じ値を指定している限り、大きさは半分ずつになるかと思います。
（0.5:0.5だろうが999:999だろうが、結果は変わりません。）

緑が黒の半分の幅になるようにしたい場合は、
緑を0.5、黒を1と指定する必要があります。
（割合の話なので、1:2とか100:200とかでも同じことになります。）

Comments

[noumennsann]

回答いただきありがとうございました！

[noumennsann]

あれ、でも「親要素の余っている幅に対する割合」なら
親要素の半分に対する0.5倍になりませんか？

[noumennsann]

またわからなくなったかもしれませんｎ・・・

[H40831]

日本語が下手ですみません^^;
「親要素の余っている幅に対する割合」というか、
「親要素の余っている幅に対して、子要素を何対何で伸ばすか」という感じでしょうか。

今回の状況（子要素が２つあり、どちらも flex-grow が 0.5 ）では、
「親要素の余っている幅に対して、子要素を 0.5 対 0.5 で伸ばす」という意味合いになります。

これが、子要素が３つあり、最後の一つだけ flex-grow を 0 に指定した場合は
「親要素の余っている幅に対して、子要素を 0.5 対 0.5 対 0 で伸ばす」という意味になるのですが…
こんな説明でわかりますかね…？？
全部で100%になるように伸びるんです。

今回の場合、緑も黒も、もともとの幅がゼロになっているので、
親要素の余っている幅は１００％です。