解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行_flex-wrap: wrap;

直接上问题，如图所示:

我们在对父容器设置 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;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="parent">
        <div class="chilren"></div>
        <div class="chilren2"></div>
        <div class="chilren3"></div>
</div>
1
2
3
4
5

总结：

flex-wrap属性：

• 默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线 排不下，如何换行？
• flex-wrap:wrap 该样式用于设置 换行。

align-content属性：

• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
• align-content:flex-start 该样式用于让div与交叉轴的起点对齐（即顶部对齐）

关于flex布局的不懂的可以参考阮一峰老师的这篇博客：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html