包装柱的弹性基础 [英] Flex-Basis for Wrapping Columns

问题描述

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

I have a pretty basic grid setup in flex, but I recently came across an oversight I made.

我有一些列的右边距为:3em，而flex-basis:calc(33％-3em).

I have columns that have a margin-right: 3em and flex-basis: calc(33% - 3em).

我的问题是，其中的第4位和第5位在完整的行"为3之前不会对齐.

My problem is that the 4th and 5th of these don't line up until there is a full "row" of 3.

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

Any insights as to why this is happening? I imagine I may be over-complicating things as per usual.

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

推荐答案

由于使用flex: 1，它将使元素占用所有可用空间，这是flex-basis撤回后剩下的空间.

Since you use flex: 1, it will make the element take all available space, what's left after the flex-basis been retracted.

max-width是阻止最后2个项目填充整个行的原因，并且它的值比flex-basis宽，因此它们会扩展到它.

What stop the 2 last items from filling the entire row is the max-width, and since that its value is wider than the flex-basis, they will expand to it.

从column中删除flex: 1，或者对max-width使用与flex-basis相同的计算

Either remove flex: 1 from column, or use the same calc for max-width as used for 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>

根据评论进行了更新

如果也要使项目在其父项中平均分配，则需要将实际边距/装订线/间隙空间的总和除以项目的数量.

If to also make the items spread equally inside its parent, one need to divide the sum of the actual margin/gutter/gap space with the amount of items.

因此，在这种情况下，它将是(2个间隔* 3em)/3个项目= 2em

So in this case it would be (2 gaps * 3em) / 3 items = 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>

这篇关于包装柱的弹性基础的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！