フレックスボックスとフレックスのある奇妙なもの

Question

フレックスがどのように働くのか分かりません。

このフィドルを参照してください：https://jsfiddle.net/k89twr8e/

flex-growは右ではなく、最初の2つの緑色のボックスの境界線が、それは右...最初の2はokですが、残りの1つに合わせて、私は適切な値を見つけるカント今です。

任意のヘルプをお願い申し上げ.wrap、.childと.separator

の正しいflex-grow値とは何かです。

おかげ

Answer 1

各列は、他の列のコンテンツのサイズ/位置を完全に認識していないので、私は、これはあなたがそれがしたいように動作するように起こっているとは思いません。

Flex-Growは、必要に応じてを拡張して、特定の行/列のスペースを分散する能力を定義し、その特定の列の他の要素と比例関係を定義します。 （例：flex-grow:4を持つ要素がflex-grow:1を持つ要素のサイズ4Xになります）

「必要に応じて」の部分は、あなたの最初の列に遊びに来ること。最初に.containerに定義された高さがないので、配布する余分なスペースはありません。したがって、各要素はデフォルトの高さで列に挿入されます。この場合、線の高さはliです。

以下は、物の大きさがどのように決定されているかを明確に示すのに役立ちます。