弹性盒子（box-flex）是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，而不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。但是该属性目前只有部分浏览器支持，因此在pc端开发中应用的比较少。但是对于移动端，webkit核心浏览器几乎一统天下，web界面的制作上，使用弹性盒子是非常不错的！
工具/原料
网页编辑器
浏览器
flex-wrap 弹性盒子的子元素换行方式
1、flex-wrap属性用于指定弹性盒子的子元素换行方式。flex-wrap：nowrap/wrap/wrap-reverse;nowrap 是flex-wrap的 默认值，弹性容器为单行。该情况下弹性子项可能会溢出容器例子：css部分：.father1{ width:500px; height:400px; background: lightcoral; margin:20px auto; display: -webkit-flex; display:flex; -webkit-flex-wrap:nowrap; flex-wrap:nowrap; } .son1{ width:200px; height:100px; border:2px solid crimson; background: coral; margin:10px; text-align: center; color: #fff; }html部分：<div class="father1"> <div class="son1">nowrap1</div> <div class="son1">nowrap2</div> <div class="son1">nowrap3</div></div>效果如图：
2、flex-wrap：wrap；弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。例子：css部分：.father2{ width:500px; height:400px; background: lightcoral; margin:20px auto; display: -webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .son2{ width:200px; height:100px; border:2px solid crimson; background: coral; margin:10px; text-align: center; color: #fff; }html部分：<div class="father2"> <div class="son2">wrap1</div> <div class="son2">wrap2</div> <div class="son2">wrap3</div></div>效果如图：
3、flex-wrap：wrap-reverse；与 wrap相反的排列方式。例子：css部分：.fat茑霁酌绡her3{ width:500px; height:400px; background: lightcoral; margin:20px auto; display: -webkit-flex; display:flex; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .son3{ width:200px; height:100px; border:2px solid crimson; background: coral; margin:10px; text-align: center; color: #fff; }html部分：<div class="father3"> <div class="son3">wrap-reverse1</div> <div class="son3">wrap-reverse2</div> <div class="son3">wrap-reverse3</div></div>效果如图：
