如何使用flexbox强制分成相等的部分

Question

在像这样的dom结构中:

<div id="1">
  <div id="2">
    <div id="3">
    </div>
  </div>
  <div id="4">
    <div id="5">
    </div>
  </div>
</div>

用css指定为:

#1{
  display: flex;
  flex-direction: row;
}
#2, #4{
  flex: 1;
}

只要id 3和5中内容宽度的总和不超过id为1的dom的宽度,id为2和4的div就会均匀分布.

当总和超过宽度时,它们不是均匀分布的,而具有更宽内容的一个将占用更多宽度.即使在这种情况下,如何使用flexbox强制2和4占用均匀宽度？

我不想按百分比使用宽度规格.我想坚持使用flexbox.

Answer 1

如果您希望元素独立增长或缩小到其内容,请指定零弹性基础:

flex-basis: 0;

但是,我的演示在Chrome中无法正常工作:无论零基础设置如何,大图像都会拉伸它的父容器.作为解决方法,可以设置最大宽度:

img {
  max-width: 100%;
  height: auto;
}

Answer 2

要强制平均分配，您必须添加width: 0到所有弹性项目。在阅读了 Manuel Matuzovic 的文章后，我想到了这一点，该文章对如何flex-grow工作有一个非常好的深入总结。