html - 如何在具有嵌套 flex 盒的 flex 盒子级之间均匀分配宽度？

Question

我正在为我正在构建的网站开发一些 css3。我正在尝试创建一个“容器”类，它使用 Flexbox 使其所有子级具有相同的宽度。这工作正常，但是当我将一个“容器”和一个普通元素放入另一个“容器”中时，两个子元素的宽度不相等。

我不确定为什么这不起作用，因为它适用于任何非容器的元素。

HTML:

<div class="container">
  <div class="container">
    <div class="content-box">
      One Sixth
    </div>
    <div class="content-box">
      One Sixth
    </div>
    <div class="content-box">
      One Sixth
    </div>
  </div>
  <div class="content-box">
    One half
  </div>
</div>

CSS:

.container {
    display: flex;
    align-items: flex-start;
}

.container > * {
    flex-basis: 100%;
    min-width: 0;
}

.container > :not(:first-child) {
    margin-left: 2%;
}

Codepen 示例:https://codepen.io/NetworkOverflow/pen/XLbdqa

Answer 1

问题是，当您将一个容器放入另一个容器时，它会添加边距，因此您会看到右侧的空间加倍。

我会将您的容器设置为 justify-content: space- Between; ，它将内容元素推送到外部边缘。我使用 flex:1 而不是 flex-basis 来告诉浏览器每个元素应该占用相同的空间量。

你的 CSS 变成:

.container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.container > * {
    flex: 1;
    margin-left: 2%;
    min-width: 0;
}

.container > *:first-child {
    margin-left:0;
}

/* not needed
.container > :not(:first-child) {
    margin-left: 2%;
}
*/

---

更新:

根据使用情况，添加“调整大小”类有时会很有帮助，这些类会根据元素的数量强制使用flex-basis。这是 codepen示例。

.third {
  flex-basis: calc(33.3333% - 2%);
}
.half {
  flex-basis: calc(33.3333% - 2%);
}