弹性元素align-content、align-items、align-self的区别

align-content、align-items以及align-self都是在进行弹性布局时常用的属性，并且都是弹性盒

元素在该行侧轴（纵轴）上对齐的位置，那么他们之间到底有什么区别？

align-content与align-items

align-content对于单行的的盒子不起任何作用，而align-items则不区分单行与多行。基本元素的代码如下：

item{
   display: flex;
    width: 100px;
    height: 98px;
    border: 1px solid #ccc;
    justify-content: center;/*水平居中对齐, flex-end右对齐*/
}
.dian{
    width: 30px;
    height: 30px;
    border-radius: 30px;
    border: 1px solid #000;
}

<div class="item">
   <span class="dian">

    </span>
</div>

所出来的图片如上图所示，此时的球只是位于顶部，并没有在中间的位置，然后在.item中添加属性align-content: center，是不起任何作用的，但是align-items: center确实没问题的

这是因为.item里面就只有.dian一个元素，不能使得它构成一个多行，而align-content是不能控制单行的盒子内位置变换，而align-items可以，但是若是在.item中添加属性flex-wrap: wrap，align-content就可以起作用了，这是因为flex-wrap:wrap这个属性是可以让弹性盒子在必要的时候自行换行（或换列），这使得.item可以自行变为一个多行盒子，让align-content起到作用。

align-self与align-items

align-items是一个弹性容器，而align-self则是一个弹性项目，可以简单理解为，align-items是控制容器内的元素布局，而align-self则是控制自身的。同样用上面的小球作为例子，为了能够方便区分，在外层多加一层盒子：

我们尝试在.item中添加属性align-items:center，里面的小球是到盒子的中间（参照上面align-content与align-items的对比图二），但是如果用align-self替换align-items后

小球并没有发生位置上的变化，但是灰色的盒子却到了中间