html5中字段间行的间隔,使用flexbox时，多行子元素之间的间距如何控制？

2016-07-06 19:34 update

https://jsfiddle.net/anjianshi/4gk6eke9/

other

.wrap {

border:1px solid #ccc;

padding: 20px;

}

.flex{

display: flex;

flex-wrap: wrap;

align-items: flex-start;

align-content: flex-start;

justify-content: space-between;

margin-bottom: -50px; /* 注意 */

}

.flex-item{

width: 250px;

border:1px solid #f00;

margin-bottom: 50px; /* 注意 */

}

.item1{ height: 20px; }

.item2{ height:100px; }

.item3{ height: 40px; }

.item4{ height: 200px; }

给 .flex-item 设置 margin-bottom，

然后给容器(.flex)设置负的 margin-bottom 来把最下面一行多余的 margin 给抵消。

这样就行了。