多行 Flexbox 中的最后一行左对齐
在 Flexbox 布局中，将最后一行向左对齐可能会带来挑战最后一行包含的元素数量与其他行不同。这种不规则性破坏了所需的网格效果。
为了解决这个问题，我们可以采用一种使用“filling-empty-space-childs”div 的技术。这些 div 的高度为零，允许它们折叠成新行而不影响布局。
考虑以下 HTML 代码：
<code class="html"><div class="container">
<div class="item"></div>
<div class="item"></div>
...
<div class="item"></div>
<div class="filling-empty-space-childs"></div>
<div class="filling-empty-space-childs"></div>
<div class="filling-empty-space-childs"></div>
</div></code>以及相应的 CSS：
<code class="css">.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }
.filling-empty-space-childs {
width: 130px; /*match the width of the items*/
height: 0;
}</code>在此解决方案中，“filling-empty-space-childs”div 占据了最后一行的剩余空间。如果最后一行有四个元素，这些 div 将折叠成一个新行，不可见且不占用空间。但是，如果元素少于四个，额外的“filling-empty-space-childs”div 会将最后一个元素对齐到左侧，保持网格效果。
以上是如何左对齐多行 Flexbox 布局中的最后一行？的详细内容。更多信息请关注PHP中文网其他相关文章！
