如何在具有嵌套弹性盒的弹性盒子项之间均匀分布宽度？

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

Answer 2

您为将所有元素设置为 flex-basis: 100% 付出了代价。

因为您要告诉所有元素（无论它们可能有多少兄弟姐妹）占据容器的整个宽度，所以您迫使 flex-shrink 计算容纳所有元素所需的空间。

这涉及到一个相对复杂的 flexbox 算法，当您考虑填充和 box-sizing: border-box 时，它会变得更加复杂，这两者都存在于您的代码中。

算法解释在这里：How does flex-shrink factor in padding and border-box?

最快和最简单的解决方案是指定容器的实际宽度。

对于说明问题的行（使用容器，以及容器中的容器），不要将它们设置为flex-basis: 100%，这会触发flex-shrink，而是将它们设置为flex-basis: 50%。现在flex-shrink 过程被避免了，你得到了你想要的。

我将此添加到您的代码中：

.container > .demo50 {
  flex-basis: 50%;
}

revised demo

div.content {
  float: left;
  width: 100%;
  height: 100%;
  background-color: var(--background-color2);
  padding: 2% 10%;
}

div.banner {
  background-color: var(--scheme-color2);
  box-shadow: 0px 0px 50px 10px rgba(23, 196, 167, 0.5);
  padding: 1rem;
  text-align: center;
  margin-bottom: 2em;
}

.content-box {
  background-color: var(--background-color1);
  box-shadow: 0px 0px 10px 5px rgba(84, 84, 84, 1);
  padding: 1rem;
  overflow-wrap: break-word;
  margin-bottom: 2em;
}

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

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

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

.two-thirds {
  flex-basis: calc(100% / 3 * 2);
}

.container > .demo50 {
  flex-basis: 50%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --background-color1: #707070;
  --background-color2: #424242;
  --background-color3: #afafaf;
  --scheme-color1: #20f9d5;
  --scheme-color2: #17c4a7;
  --scheme-color3: #89e5d6;
  --text-color: #e3edeb;
}

body {
  font-family: "Open Sans", sans-serif;
  color: var(--text-color);
}

<div class="content">
  <div class="container">
    <div class="banner">
      <h1>Example</h1>
    </div>
  </div>
  <div class="container">
    <div class="content-box">
      <p>Using 'flex-basis: 100%' seems to work perfectly well for evenly sizing and spacing elements in a row. However, when you put a .container inside a .container and attempt to do something like you see two rows below, the .container element and the
        element that follows do not space themselves at half and half width.</p>
    </div>
  </div>
  <div class="container">
    <div class="content-box">
      One Half
    </div>
    <div class="content-box">
      One Half
    </div>
  </div>
  <div class="container">
    <div class="container demo50">
      <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 demo50">
      One half
    </div>
  </div>
  <div class="container">
    <div class="content-box">
      One Third
    </div>
    <div class="content-box">
      Two Thirds
    </div>
    <div class="content-box">
      Three Thirds
    </div>
  </div>
  <div class="container">
    <div class="content-box two-thirds">
      Two Thirds
    </div>
    <div class="content-box">
      One Third
    </div>
  </div>
  <div class="container">
    <div class="content-box">
      One Third
    </div>
    <div class="content-box two-thirds">
      Two Thirds
    </div>
  </div>
</div>