伸縮箱の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;}

次に、2つのケースがあります.1つは、.wrap{flex-wrap:wrap;align-content: center;}結果:
情况2:.wrap{flex-wrap:wrap;align-items: center;}