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

问题描述

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

她的密码:

<div class="item"></div><div class="item"></div>...<div class="item"></div>

和 CSS:

.container {显示:弹性；显示:-webkit-flex；显示:-moz-flex；justify-content:空间环绕；-webkit-justify-content:空间环绕；-moz-justify-content:空间环绕；flex-flow:行包装；-webkit-flex-flow:行换行；-moz-flex-flow:行包装；}.container .item { 宽度:130px;高度:180px；背景:红色；边距: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 {宽度:205px；/*本例中图片的宽度*/高度:0；/*重要的！如果 div 落入新行，它们就会折叠起来*/}

flexbox 容器有 display:flex/flex-wrap:wrap;/justify-content:space-around

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

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

Her's the code:

<div class="container">

    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>

</div>

and the 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?

解决方案

Got it. (I think)(this is my first contribution here!)

Imagine a layout which needs to have 4 images per row. w:205 h:174 Problem: Using justify-content:space-around, if the last row doesn´t have 4 images (has 3, 2 or 1), they would not respect the grid, they would spread. So.

Create in the html 3 divs with the class "filling-empty-space-childs" like this.

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

The flexbox container has display:flex / flex-wrap:wrap; / justify-content:space-around

The last row can have 4, 3, 2, 1 images. 4 images: no problem, this three divs would collapse in a new row since they have no height. 3 images: no problem, one div is going to be in the same row, invisible, and the other two would wrap to a new row, but will collapse since they have no height. 2 images: no problem, two divs are going to be in the same row, invisibles, the rest... collapsed 1 image: no problem, the three divs are going to fill in the space.

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