html - 如何使用 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为2和4的div会均匀分布，只要id为3和5的内容的宽度之和不超过id为1的dom的宽度即可。

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

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

score 19 · Accepted Answer

如果您希望元素根据其内容独立增长或缩小，请指定零弹性基础：

flex-basis: 0;

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

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

score 10 · Accepted Answer

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

2 回答 2