css3 弹性布局align-content属性

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

使用 align-content 这个属性，你的弹性容器中必须要有多根(水平)轴线！

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
</div>

css必要准备

/* 将 普通容器 转成 弹性容器 */
display: flex;
display: -webkit-flex;
/* 设置 弹性容器的 主轴方向 为 水平轴 */
flex-direction: row;
/* 设置弹性容器的 弹性元素的对齐方式 */
flex-wrap: wrap;

代码：

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 400px;
  height: 600px;
  outline: 1px dashed blue;
  margin: 200px auto;
  /* 将 普通容器 转成 弹性容器 */
  display: flex;
  display: -webkit-flex;
  /* 设置 弹性容器的 主轴方向 为 水平轴 */
  flex-direction: row;
  /* 设置弹性容器的 弹性元素的对齐方式 */
  flex-wrap: wrap;
  /* 你使用 align-content 这个属性，你的弹性容器中必须要有 多根(水平)轴线！ */
  /* align-content: flex-start; */
  /* align-content: flex-end; */
  /* align-content: center; */
  /* 弹性元素（子容器）上、下的内容与 弹性容器的顶部和底部对齐，中间弹性元素，在垂直交叉轴上的间隔距离均等！！ 分析如下所示： （1）顶部的弹性元素，贴着 弹性容器的顶部。 （2）中间的弹性元素，在垂直交叉轴上的间隔距离 均等！ （3）底部的弹性元素，贴着 弹性容器的底部。 */
  /* align-content: space-between; */
  /* 弹性元素 每根轴线（垂直交叉轴的上、下）两侧的间隔都相等 每一行上下的两侧间隔一样 */
  /* align-content: space-around; */
}

/* 设置弹性元素 */
.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #b4b4b4;
  text-align: center;
  font-size: 26px;
}

此时代码演示：
202103111615455012130049
将以上align-content 这个属性一一实现