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为2和4的div将均匀分布，只要id 3和5中内容宽度的总和不超过id为1的dom的宽度。

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

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

Answer 1

如果您希望元素独立增长或缩小到其内容，请指定零flex basis：

flex-basis: 0;

但是，my demo在Chrome中无法正常工作：无论是否设置了零基础，大图片都会拉伸它的父容器。作为解决方法，可以设置最大宽度：

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

Answer 2

要强制平均分配，您必须向所有弹性项目添加width: 0。在阅读了曼努埃尔·马图佐维奇的文章后，我想到了这一点，该文章对flex-grow的工作原理有很好的深入总结。