我在 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>
最佳答案
因为您使用了 flex: 1
,它会让元素占用所有可用空间,即 flex-basis
收回后剩下的空间。
max-width
阻止最后 2 项填满整行,因为它的值比 flex-basis
宽,所以它们会展开
从 column
中删除 flex: 1
,或者对 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 gaps * 3em)/3 items = 2em
此外,需要尽可能接近 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>
关于css - 用于包装柱的 Flex-Basis,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47145837/