如何在多行flexbox中左对齐最后一行/行 [英] How to align left last row/line in multiple line flexbox

问题描述

我有一个flexbox布局的主要问题。我建立一个容器，一个盒子里装满了图像，我决定使用flexbox布局来证明内容，使其看起来像一个网格

I have a major issue with flexbox layout. I build a container with a boxes filled with images, and i decided to use flexbox layout to justify the content to make it looks like a grid

她的代码：

<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; }

除了最后一行/行外，一切看起来都不错 - 当它不包含相同数量的元素

And everything looks good except the last line/row - when it not contain the same number of element that other lines, centering elements and it broke my grid effect.

http://jsfiddle.net/puz219/7Hq2E/

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

How to align last line/row to left side?

推荐答案

不幸的是，这不可能用flexbox。

最好的解决方法是在最后一行添加隐形儿童填充空的块。

The best work-around is to add invisible children 'filling up' the empty 'blocks' in the last row. That way, the actual, visible, element is aligned left.

类似的问题：
Flex-box：将最后一行对齐到网格

这篇关于如何在多行flexbox中左对齐最后一行/行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！