html - 如何使用嵌套的 flexboxes 在 flexbox child 之间均匀分配宽度？

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%);
}