flex布局实现环绕布局（flex布局教程实例篇）

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;
}