css - 改善 flexbox 行的平衡

Question

假设我有一个 flexbox，为了举例，每个元素都包含一个图像。在这种情况下，flexbox 的目的是将它们均匀分布。

看起来很简单。让我们试试吧。

#flex {
  width: 350px;
  display: flex;
  flex-wrap: wrap;
}
#flex>div {
  flex: 1 1 auto;
  border: 1px solid black;
  text-align: center;
}
#flex>div>img {vertical-align:bottom}

<div id="flex">
  <div><img src="http://placehold.it/100x32" /></div>
  <div><img src="http://placehold.it/100x32" /></div>
  <div><img src="http://placehold.it/100x32" /></div>
  <div><img src="http://placehold.it/100x32" /></div>
</div>

... 哦，亲爱的。这不是很平衡，是吗？

在我的实际用例中，宽度为 100%，因为它是响应式设计的一部分。问题在于，在某些宽度下，元素最终只会多出一两个，无法放在给定的行中，从而使尾随元素的宽度不合理。在较小的屏幕上，这不是问题。但是，如果元素最终宽度为 1920 像素，而所有其他元素都接近 200，那么......你明白了。

有什么方法可以改善 flex 元素包装的平衡，或者这是我所能期望的最好的方法吗？

Answer 1

这似乎是目前不可能的事情，但计划在 Flexbox Level 2 中实现。

planned features list不是很详细，但我认为它是其中之一:

• Solve the “items on the last line get way too big when you're flexing” problem. More generally, “make items have a consistent flexed size, regardless of how much extra space is on each line”.
  • Possible solution - calculate minimum values of 1fr and alignment free space across the entire flexbox (instead of per-line) and use that.
• Flex line balancing.