直接上问题，如图所示: 我们在对父容器设置 flex-wrap:wrap 之后，容器内的容器成员在换行时中间出现了一个空行，这是因为我们忘记对容器设置align-content属性，在我们对外层容器加入align-content：flex-start之后，这个问题就解决了，效果及代码如下所示：
.parent { display: flex; align-content: flex-start; flex-wrap: wrap; width: 200px; height: 200px; border: 1px solid red; } .chilren { width: 100px; height: 50px; background: blue; } .chilren2 { width: 100px; height: 50px; background: red; } .chilren3{ width: 100px; height: 50px; background:coral; } <div class="parent"> <div class="chilren"></div> <div class="chilren2"></div> <div class="chilren3"></div> </div>总结：
flex-wrap属性：
默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线 排不下，如何换行？flex-wrap:wrap 该样式用于设置 换行。align-content属性：
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content:flex-start 该样式用于让div与交叉轴的起点对齐（即顶部对齐）关于flex布局的不懂的可以参考阮一峰老师的这篇博客： http://·/blog/2015/07/flex-grammar.html
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #flex #wrap换行 #flexwrapwrap
