使用flexbox时，多行子元素之间的间距如何控制？-灵析社区

2016-07-06 19:34 update https://jsfiddle.net/anjianshi/4gk6eke9/ <div class="wrap"> <div class="flex"> <div class="flex-item item1"></div> <div class="flex-item item2"></div> <div class="flex-item item3"></div> <div class="flex-item item4"></div> </div> </div> <div>other</div> .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 给抵消。这样就行了。