这个问题在这里已有答案：
我有一个Flexbox容器，最多有6个子元素，宽度为16.666667％，减去10px的阴沟 . 我可以用六个项目创建网格，并且它们在flex-row中均匀分布，但我遇到的问题是当我只有5个项目时，当我将两个网格比较时，子元素不均匀分布 . 因此，当我只有五个元素时，每个元素增加5px左右，因为它们不是第6项，我该如何解决这个问题，以便两个网格都排成一行 . 我不希望发生的是为5列而不是6列重新分配空格
.flex-grid {
background: green;
}
.flex-grid .flex-row {
display: flex;
}
.flex-grid .flex-1-6-5 {
flex: calc( 16.6666666667% - 10px);
/* I've tried flex: 0 0 calc() */
}
.flex-grid.flex-gutter-5>.flex-row>div:not(:last-of-type) {
margin-right: 10px;
}
.box {
background: red;
}
<div class="flex-grid flex-gutter-5 six-columns">
<div class="flex-row">
<div class="flex-1-6-5 box">1</div>
<div class="flex-1-6-5 box">2</div>
<div class="flex-1-6-5 box">3</div>
<div class="flex-1-6-5 box">4</div>
<div class="flex-1-6-5 box">5</div>
<div class="flex-1-6-5 box">6</div>
</div>
</div>
<div class="flex-grid flex-gutter-5 five-columns" style="margin-top: 40px">
<div class="flex-row">
<div class="flex-1-6-5 box">1</div>
<div class="flex-1-6-5 box">2</div>
<div class="flex-1-6-5 box">3</div>
<div class="flex-1-6-5 box">4</div>
<div class="flex-1-6-5 box">5</div>
</div>
</div>
1 回答
听起来像
calc(16.6666666667% - 10px)的calc(16.6666666667% - 10px)可能会成功 .