伸缩盒子子中align-items与align-content和justify-content的区别

首先来个盒子

    <div class="wrap">        <div class="child child-1">1</div>        <div class="child child-2">2</div>    </div>

css通用样式

 * {        margin: 0px;        padding: 0px;    }    .wrap {        margin: 200px auto;        display: flex;        width: 100px;        height: 60px;        background-color: #1abc9c;        text-align: center;    }    .child{        width: 30px;        height: 20px;        line-height: 20px;        background-color: #f55;    }    .child-2{        background-color: #eee;    }

一、当盒子为单行显示时(就是上面代码的结果)

加上：

.wrap{align-content: center;}

结果：

结论：在单行显示时align-content: center屁用没有

再加上：

.wrap{align-items: center;}

结果：

结论：单行时候垂直居中使用align-items: center;

二、当盒子为多行显示时

加上：

.child{width:80px;}

然后就是两种情况：
情况一：.wrap{flex-wrap:wrap;align-content: center;}
结果：

情况二：.wrap{flex-wrap:wrap;align-items: center;}