如何对齐多行flexbox[重复]中的左末行/行

Question

我对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://jsfidle.net/puz219/7hq2e/

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

Answer 1

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

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

使用类“filling-emptit-space-childs”在HTML3 div中创建，如下所示。

.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*/
}