用于包装列的 Flex-Basis

Question

我在 flex 中有一个非常基本的网格设置，但我最近遇到了一个疏忽。

我的列具有右边距：3em 和 flex-basis：calc(33% - 3em)。

我的问题是，这些中的第 4 和第 5 不会排成一行，直到有 3 个完整的“行”。

关于为什么会发生这种情况的任何见解？我想我可能像往常一样把事情复杂化了。

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: 33%;
  flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  text-align: center;
}

<section>
  <div class="flex wrap">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

Codepen

Answer 1

由于您使用flex: 1，它将使元素占用所有可用空间，flex-basis 收回后剩下的空间。

阻止最后 2 个项目填充整行的是 max-width，由于它的值比 flex-basis 宽，它们将扩展到它。

要么从column 中删除flex: 1，要么对max-width 使用与flex-basis 相同的计算方法

堆栈sn-p

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: calc(33% - 3em);            /*  changed  */
  flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  text-align: center;
}

<section>
  <div class="flex wrap">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

---

根据评论更新

如果还要使项目在其父项内均匀分布，则需要将实际边距/装订线/间隙空间的总和除以项目的数量。

所以在这种情况下，它将是 (2 gaps * 3em) / 3 items = 2em

另外，需要最接近 1/3 的值，例如可以是33.33333% 或 (100% / 3)

堆栈sn-p

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: calc(33.33333% - 2em);            /*  changed  */
  flex-basis: calc(33.33333% - 2em);           /*  changed  */
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  box-sizing: border-box;                      /*  added  */
  text-align: center;
}
.debug2 {
  border: 1px dashed red;                      /*  added  */
  box-sizing: border-box;                      /*  added  */
}

<section>
  <div class="flex wrap debug2">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

Answer 2

感谢 LGson 为我指明了正确的方向。

我的数学不正确。

我需要 100% - 行中的总边距。

代替弹性基础：calc(33% - 3em);它需要是 flex-basis: calc( (100% - 6em) / 3);

更新片段

*,
::before,
::after {
    background-repeat: no-repeat; /* 1 */
    box-sizing: inherit; /* 2 */
}

html {
    box-sizing: border-box; /* 1 */
    cursor: default; /* 2 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
}

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 3em;
    /*overflow: hidden;*/
}
.column:last-child {
  margin-right: 0;
}
.three {
      max-width: calc( (100% - 6em) / 3);
      -ms-flex-preferred-size: calc( (100% - 6em) / 3);
          flex-basis: calc( (100% - 6em) / 3);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  background-color: #EBF5FB;
  margin-top: 1em;
  padding: .75em;
  text-align: center;
  border: 1px dashed #E8DAEF;
}

<section>
    <h2>Layout for 2 Dimensions</h2>
    <h3>Specific Widths (or not)</h3>
    <div class="flex wrap">
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
       <div class="column three debug">1/3 Columns</div>
    </div>
  </section>