flex自适应布局：flex布局实现环绕布局
flex自适应布局：flex布局实现环绕布局justify-content：项目在主轴的对齐方式；flex-flow：flex-direction属性和flex-wrap属性的简写形式；给容器设置display: flex;后，可以为其添加如下容器属性：flex-direction：主轴方向；flex-wrap：项目换行方式；
1.基本概念
flex布局译为弹性布局，旨在为盒子容器提供最大的灵活性，所以任何容器都能被定义为弹性布局，需要注意的是：容器被设为flex布局以后，子元素的float 、clear 和vertical-align属性将失效，以下是将容器定义为弹性布局
display: flex;
2.容器的属性
给容器设置display: flex;后，可以为其添加如下容器属性：
flex-direction：主轴方向；
flex-wrap：项目换行方式；
flex-flow：flex-direction属性和flex-wrap属性的简写形式；
justify-content：项目在主轴的对齐方式；
align-items：项目在交叉轴的对齐方式；
align-content：多轴线对齐方式；
3.flex-wrap属性
nowrap（默认）：不换行，即使一行放不下所有项目，仍然不换行显示，而是会自动缩小所有项目的宽度使所有项目能够放置在一行。
添加元素前
添加元素后
wrap：在无法容纳下一个元素时换行，第一行项目排列在上方。
添加元素前
添加元素后
wrap-reverse：换行，第一行项目排列在下方。
添加元素前
添加元素后
4.flex-wrap: wrap实现环绕布局
<div class="div" style="height: 400px;width: 400px">
<div class="test1" style="height: 300px;width: 100px"></div>
<div class="test2" style="height: 100px;width: 200px"></div>
<div class="test3" style="height: 300px;width: 100px"></div>
<div class="test4" style="height: 100px;width: 400px"></div>
</div>
.test1 {
background-color: #FF8000;
display: flex;
}
.test2 {
background-color: #FFFF80;
display: flex;
}
.test3 {
background-color: #FF8080;
display: flex;
}
.test4 {
background-color: #80FF80;
display: flex;
}
5.flex-wrap: wrap-reverse实现环绕布局
<div class="div" style="height: 400px;width: 400px">
<div class="test1" style="height: 300px;width: 100px"></div>
<div class="test2" style="height: 100px;width: 200px"></div>
<div class="test3" style="height: 300px;width: 100px"></div>
<div class="test4" style="height: 100px;width: 400px"></div>
</div>
.div{
margin: 15% auto;
display: flex;
flex-wrap: wrap-reverse;
}
.test1 {
background-color: #FF8000;
display: flex;
}
.test2 {
background-color: #FFFF80;
display: flex;
}
.test3 {
background-color: #FF8080;
display: flex;
}
.test4 {
margin: 0;
border: none;
background-color: #80FF80;
display: flex;
}
