我正在尝试使用 flexbox 创建一个网格，但我无法让最后一行元素左对齐，因为我正在使用 justify-content: space-between。我在下面添加了一个 JS Fiddle:
<强> https://jsfiddle.net/b5f4jmhu/
当没有 4 个框组成一整行时，最后一行空格中的框。当没有足够的框来填充行时，关于如何使最后一行左对齐有什么建议吗？
.boxes {
max-width: 600px;
background: #ccc;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 20px 20px 0 20px;
margin: 60px auto 60px auto;
}
.box {
flex: 0 0 22%;
height: 100px;
background: #222;
margin: 0 0 20px 0;
}
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
谢谢，
杰米
使用 flex 你不能选择最后一行，但是对于每行上已知数量的元素，你可以计算它们并在需要时重置最后一个元素的右边距。
此处它将从 4 组中定位 2 和 3。:last-chld:nth-child(xn) 将帮助您选择这两个(可能性)。
例子:
.boxes {
max-width: 600px;
background: #ccc;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 20px 20px 0 20px;
margin: 60px auto 60px auto;
}
.box {
flex: 0 0 22%;
height: 100px;
background: #222;
margin: 0 0 20px 0;
}
.box:last-of-type:nth-child(4n - 1) {
margin-right:calc(22% + 24px);/* size of one element + its margin */
}
.box:last-of-type:nth-child(4n - 2) {
margin-right:calc(44% + 48px);/* size of two elements + their margin */
}
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
如果网格是处理这个问题的更好方法，那么在使用 flex 时有一个解决方案。