如何在多行flexbox中左对齐最后一行/行
我对flexbox布局有一个主要的问题。我用一个装满图片的盒子构建了一个容器，我决定使用flexbox布局来对齐内容，使其看起来像一个网格。
代码是这样的：
<div class="container">
<div class="item"></div>
<div class="item"></div>
...
<div class="item"></div>
</div>和CSS：
.container {
display: flex;
display: -webkit-flex;
display: -moz-flex;
justify-content: space-around;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
}
.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }除了最后一行/行之外，所有的元素看起来都很好--当它包含的元素数量与其他行不同时，居中元素，它打破了我的网格效果。
http://jsfiddle.net/puz219/7Hq2E/
如何将最后一行/行与左侧对齐？
回答 7
Stack Overflow用户
发布于 2015-07-17 22:19:08
明白了。(我想)(这是我在这里的第一篇文章！)
想象一下，一个布局需要每行有4个图像。w:205 h:174问题:使用justify-content:空格环绕，如果最后一行没有4个图像(有3个、2个或1个)，它们就不会尊重网格，它们会扩散。所以。
在html3div中创建“-empty-space-childs”类，如下所示。
.filling-empty-space-childs {
width:205px; /*the width of the images in this example*/
height:0; /*Important! for the divs to collapse should they fall in a new row*/
}flexbox容器有display:flex / flex-wrap:wrap；/ justify-content:space-around
最后一行可以有4，3，2，1个图像。 4图像：没有问题，这三个div会折叠成一个新的行，因为它们没有高度。3图像：没有问题，一个div将在同一行中，不可见，其他两个将换行到新的行，但将折叠，因为它们没有高度。2图像：没有问题，两个div将在同一行，不可见，其余的...折叠的1图像：没有问题，三个div将填充空间。
Stack Overflow用户
发布于 2014-10-22 17:55:15
不幸的是，这在flexbox.中是不可能的
最好的解决办法是在最后一行中添加不可见的子代“填充”空的“块”。这样，实际可见的元素就会左对齐。
Stack Overflow用户
发布于 2015-10-09 20:43:46
您可以在最后一个子flex项目上使用margin-right:auto。
这里的问题是，对于这个flex项，您将丢失左侧的空格间隔属性。
希望它能帮上忙！
https://stackoverflow.com/questions/16377972
复制相似问题
腾讯云开发者
