用于包装列的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被收回后剩下的东西。

什么阻止填充整行的最后两个项目是max-width，因为它的值比flex-basis宽，它们将扩展到它。

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

堆栈代码段

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个间隙* 3em）/ 3个项目= 2em

另外，需要尽可能接近1/3，这可以是例如1/3。 33.33333％或（100％/ 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: 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％ - 行中的总利润。

而不是flex-basis：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>