弹性盒子中align-content与align-items的区别

弹性盒子（Flex box）是CSS3中的一个新布局模式

弹性盒子可以迅速有效地对一个容器中的子元素进行排列、对齐，对其设置分配空白的空间。

因为之前在学习中发现有两个属性似乎很相似，align-content与align-items都是在弹性盒子的侧轴（纵轴）方向上设置对齐方式的，但是并不知道他们的区别在哪里，所以通过博客来记录一下自己学习分析的过程。

通过查阅菜鸟教程，我引用一下里面的内容

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

通过资料，对他们的区别有了大致的理解。在这里，我用相同的属性值center来对比他们之间的区别。

 <div class="boxWrap">
        <div class="box"></div>
    </div>

 .boxWrap{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 200px auto;
            display: flex;
            align-content: center;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: lightblue;

        }

当对弹性盒子中单个盒子设置 align-content: center 时，此时并没有在侧轴上居中。

当修改为align-items: center时，此盒子在侧轴上居中了。

为了考虑是否为单个盒子的因素时，再增加一个盒子进行试验。‘

 <div class="boxWrap">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

 .boxWrap{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 200px auto;
            display: flex;
            align-content: center;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: lightblue;
        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: lightcoral;
        }