如何对齐左边最后一行/多行弹性箱

小开

I've checked it and it worked better in my HTML editor tool

the script should be the way

CSS Part

.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: green; margin: 0 1% 24px; }

HTML Part

<div class="container">


<div class="item"><a href='google.com'>Google</a></div>
<div class="item"><a href='google.com'>Yahoo</a></div>
<div class="item"><a href='google.com'>Bing</a></div>
</div>


<div class="container">
<div class="item"><a href='google.com'>Google</a></div>
<div class="item"><a href='google.com'>Yahoo</a></div>
<div class="item"><a href='google.com'>Bing</a></div>


</div>

enter image description here

小开

This is not an effect you wanted to achieve?

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

CSS:

.container {
display: flex;
display: -webkit-flex;
display: -moz-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
}
.container .item {
width: 23%;
height: 180px;
background: red;
margin: 0 1% 20px;
}

HTML:

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

小开

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

小开

I thought this example might be useful for anyone who wanted multiple items and allow for responsiveness, the grid items change depending on the viewport size. It does not use any invisible children, it's all done through css.

Might help someone trying align items to the left when the last row has less items and they require the page to be responsive.

http://codepen.io/kunji/pen/yNPVVb

Sample HTML

<div class="main-container">


<div class="main-items-container">


<div class="item-container">
<h2>Item Name</h2>
</div>


<div class="item-container">
<h2>Item Name</h2>
</div>


<div class="item-container">
<h2>Item Name</h2>
</div>


<div class="item-container">
<h2>Item Name</h2>
</div>


<div class="item-container">
<h2>Item Name</h2>
</div>


<div class="item-container">
<h2>Item Name</h2>
</div>


</div>


</div>

Sample CSS

.main-container {
max-width: 1000px;
min-width: 300px;
margin: 0 auto;
padding: 40px;
box-sizing: border-box;
border: 1px solid #000;
}


.main-items-container {
display: -ms-flexbox;
display: flexbox;
display: -webkit-flex;
display: -ms-flex;
display: flex;
padding: 0;
margin: 10px 0;
list-style: none;
width: auto;
-webkit-flex-flow: row wrap;
justify-content: flex-start;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: stretch;
align-items: stretch;
box-sizing: border-box;
}


@media (min-width: 971px) {
.item-container {
margin: 10px 2%;
width: 22%;
padding: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
.item-container:nth-child(4n+1) {
margin-left: 0;
}
.item-container:nth-child(4n) {
margin-right: 0;
}
}


@media (min-width: 550px) and (max-width: 970px) {
.item-container {
margin: 10px 2.50%;
width: 30%;
padding: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
.item-container:nth-child(3n+1) {
margin-left: 0;
}
.item-container:nth-child(3n) {
margin-right: 0;
}
}


@media (max-width: 549px) {
.item-container {
margin: 10px 0;
width: initial;
padding: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
}

小开

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.

小开

You can use margin-right:auto on the last-child flex item.

The problem here is that you will lose the space-between property on the left for this flex item.

Hope it helps!