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

首先来个盒子

    
class="wrap">
        
class="child child-1">1
        
class="child child-2">2
    

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;}