[参考资料]blog.csdn.net/cc188688768…

初始代码（后续代码都是在此基础上增加了一两行）：

<div class='flex_container'>
<div class='item1'>1</div>
<div class='item2'>2</div>
<div class='item3'>3</div>
<div class='item4'>4</div>
<div class='item5'>5</div>
<div class='item6'>6</div>
</div>

.flex_container {
display: flex;
flex-wrap: wrap; /* 超出的 item 另起一行 */

border: 2px solid #9a9a9a; /* 有边框看得清楚一点 */
}

/* 核心部分 ⬆ */

/* 以下不用太注意 ⬇ */
.flex_container div {
width: 130px;
margin: 10px;
}
.item1 {
background-color: #ffb685;
height: 30px;
}
.item2 {
background-color: #fff7b1;
height: 60px;
}
.item3 {
background-color: #b1ffc8;
height: 90px;
}
.item4 {
background-color: #b1ccff;
height: 120px;
}
.item5 {
background-color: #c8b1ff;
height: 30px;
}
.item6 {
background-color: #ffb1e5;
height: 60px;
}

单行情况（忽略）

单行情况下 align-content 没有效果，看了后续结论就明白了

多行情况

注：多行是通过「拉伸浏览器左右边框」大小来实现的 |⬅ ➡|

注：以下实验采用控制变量法，变量是:
1⃣父级是否有高度
2⃣空对照、Alignitems、Aligncontent
所以共有 2 X 3 = 6 种情况

1.1 (父级)容器不限定高度

结论：各行高度 = 该行最高高度

1.2 (父级)容器不限定高度 + align-items:center

结论：

• 1.1 结论仍然正确
• align-items 决定 items 与 行 的关系
• items 在 该行内 垂直居中

1.3 (父级)容器不限定高度 + align-content:center

结论：

• 1.1 中结论仍然正确
• align-content 决定 行 与 父级 的关系
  但是容器没指定高度时 父级高度 = 各行高度之和
  所以和初始样式没区别

2.1 (父级)容器 height=400px

结论：各行高度 = 父级高度平分

2.2 (父级)容器 height=400px + align-items:center

结论：

• 2.1 中结论仍然正确
• align-items 决定 items 与 行 的关系
• items 在 该行内 垂直居中

2.3 (父级)容器 height=400px + align-content:center

结论：

• 2.1 中结论仍然正确
• align-content 决定 行 与 父级 的关系
• 各行在 父级 中垂直居中