简单理解 弹性布局中 align-content 与 align-items 的区别

在之前使用弹性布局的时候,align-content与align-items的概念混淆不清,自己特意写了一下来区分.

以下是我的初始代码:

效果是这样子的:

初始的效果

测试一:

那么 在.bigbox中添加align-items:center以后,侧轴居中了,效果如下:

在.bigbox中添加align-content:center以后,没有发生改变:如下:

由此 我们可以看到align-content对单行是没有效果的.

测试二:

我们把这两个盒子变成两行(给.box1加一个margin-right:100px; 给.bigbox加一个 flex-wrap: wrap;属性让这两个小盒子两行显示)

如下图:

在.bigbox中添加align-items:center以后,侧轴居中了,效果如下:

在.bigbox中添加align-content:center以后,效果如下,

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