ネストされたフレックスコンテナが周囲の要素のアラインメントを変更しています

Question

フレックスボックスを覗き込んでいて、何か奇妙なことに気付きました。

.centervertが垂直フレキシボックスがあるのでCHILD 1は全体.child要素の位置がずれ、フレキシボックス内にないにもかかわらず：あなたの場合は

：

#cont { 
 
    background: blue; 
 
} 
 

 
.centervert { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    background: gray; 
 
    height: 100%; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
}

<div id="cont"> 
 

 
    <div class="child"> 
 
    CHILD 1 
 
    </div> 
 

 
    <div class="child "> 
 
    <div class="centervert"> 
 
     CHILD 2 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/d3ymxhe8/2/をコメントdisplay: flexをコメントアウトすると、CHILD要素が期待どおりに並べて表示されます。しかし、フレックスディスプレイでは、CHILD1は.centervertの内容に合わせて下にシフトされます。

何がありますか？

Answer 1

ディスプレイを子2のフレックスに設定し、テキストの中央に垂直に配置すると、子要素1は、デフォルトのvertical-alignプロパティに従って調整されます。これは、インライン要素の場合はベースラインです。 child1（およびchild2）のvertical alignmentプロパティをtopまたはmidのようなものに設定することができます。これにより、ギャップが削除されます。

#cont { 
 
    background: blue; 
 
} 
 
.centervert { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    background: gray; 
 
    height: 100%; 
 
} 
 
.child { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    vertical-align:middle; 
 
}

<div id="cont"> 
 
    <div class="child"> 
 
    CHILD 1 
 
    </div> 
 
    <div class="child "> 
 
    <div class="centervert"> 
 
     CHILD 2 
 
    </div> 
 
    </div> 
 
</div>