flexbox和flex-grow

Question

我似乎并不了解弹性增长是如何工作的。

看到这个小提琴：https://jsfiddle.net/k89twr8e/

flex-grow不对，我找不到合适的值，所以前2个绿框边框与右边的那个对齐...前两个是好的，但其余的都是现在。

这与flex-grow，.wrap和.child

的正确.separator值有关

感谢任何帮助。

由于

Answer 1

每列完全没有意识到其他列中内容的大小/位置，因此我认为这不会像您希望的那样工作。

Flex-grow定义了在必要时增长的能力，在特定行/列中分配空间，然后这些数字只定义与该特定列中其他元素的比率关系。 （例如：flex-grow:4元素的大小是flex-grow:1元素的4倍

＆＃34; 如有必要＆＃34;部分与你的第一篇专栏发挥作用。由于最初.container没有定义的高度，因此没有额外的空间可供分配。因此，每个元素都以默认高度插入列中，在这种情况下，它将是li

的行高

下面是一个视觉表示，希望有助于阐明如何确定事物的大小。