How to align left last row/line in multiple line flexbox [duplicate]

Question

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?

Answer 1

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.

Answer 2

Unfortunately this is not possible with 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.

Similar question: Flex-box: Align last row to grid