如何在多行弹性框中对齐左最后一行/行[重复]

我对弹性盒布局有一个主要问题。我构建了一个容器，里面有一个装满图像的盒子，我决定使用 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/

如何将最后一行/行对齐到左侧？

知道了。 （我认为）（这是我在这里的第一个贡献！）

想象一下每行需要 4 个图像的布局。宽：205 小时：174 问题：使用 justify-content:space-around，如果最后一行没有 4 个图像（有 3、2 或 1），它们将不尊重网格，它们会扩散。 所以。

在 html 3 div 中创建类“filling-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; / 调整内容：周围空间

最后一行可以有 4、3、2、1 个图像。 4 张图片：没问题，这三个 div 会折叠成新行，因为它们没有高度。3 张图片：没问题，一个 div 将位于同一行，不可见，另外两个将换行到新行，但会折叠，因为它们没有高度。2 张图片：没问题，两个 div 将在同一行，不可见，其余的......折叠1 image:没问题，三个 div 将填充空间。