Question

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

我的列具有边距权限：3em和flex-basis：calc（33％ - 3em）。

我的问题是，这些中的第4和第5个排队直到有一个完整的＆＃34;行＆＃34; 3.

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Codepen

Answer 1

由于您使用flex: 1，因此会使元素占用所有可用空间，即flex-basis缩回后剩余的空间。

最后两项填充整个行的内容是max-width，因为它的值比flex-basis宽，所以它们会扩展到它。

从flex: 1移除column，或使用与max-width

相同的flex-basis计算

Stack snippet

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）

Stack snippet

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>

用于包装列的Flex-Basis

2 个答案: