04-align-content 它对于当单行是没有效果的

align-content

运用在父级元素上 align-content: 它通常与子元素的div{ margin:10px } 一起联合使用。
用在子项出现换行的情况下，并是多行的情况下哦。运用在子项侧轴上的排列方式。

align-content的值

align-content: flex-start ; 顶部对齐（默认值）
align-content:center;       垂直方向上居中 
align-content: flex-end;    交叉轴的终点对齐(与底部对齐)

align-content:space-around;
对 space-around 的描述如下：
第一个子元素距离顶部的距离==最后一个子元素距离底部的距离
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离左右两边的间距都是相等。
巧记：around 是四周，说明四周是有间距的。

justify-content: space-between;
运用在父级元素上
第一个子元素和最后一个子元素 分别靠在最顶部和最底部
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离上下两边的间距都是相等

align-content:center对单行是没有效果的

通过对比可以发现align-content:center对单行是没有效果的。
而align-items:center不管是对单行还是多行都有效果,
而在我们日常开发中用的比较多的就是align-items.

align-content 的简单使用

#main {
    width: 800px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: flex; 
    flex-wrap: wrap;
    align-content: center;
}
#main>div{
    width: 150px;
    height: 100px;
    background: #0099FF;
    margin: 10px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">11</div>
  <div style="background-color:lightblue;">22</div>
  <div style="background-color:pink;">33</div>
  <div style="background-color:olive;">4</div>
  <div style="background-color:coral;">55</div>
  <div style="background-color:lightblue;">66</div>
</div>