伸縮したフレックスボックスアイテムを垂直に整列する

Question

display: flexコンテナ内のアイテムをalign-self: strechに設定して、同時に真ん中に垂直に整列させる方法が不思議です。

問題を紹介するFiddleを作成しました。要素は、「マイロゴテキスト」 はMy Logo Textは、あなたが問題を解決するためにline-height:50px;を使用することができ単線​​である

Answer 1

追加：

.logo { 
    display: flex; 
    align-items: center; 
    height: 100% 
} 

Answer 2

場合は、「マイバナー」と「右コンテナ」と同じ垂直レベルにする必要があります。

作業DEMO。あなたが詳細をお知りになりたい場合は

line-heightこれを読んで：https://css-tricks.com/almanac/properties/l/line-height/

.flex-container{ 
 
    color: #fff; 
 
    background: #3c3c3c; 
 
    height: 50px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.flex-item { 
 
    padding: 0 10px; 
 
} 
 
.logo{ 
 
    background: #f06; 
 
    align-self: stretch; 
 
    vertical-align: middle; 
 
    line-height:50px; 
 
} 
 
.title{ 
 
    flex-grow: 1; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item logo">My Logo Text</div> 
 
    <div class="flex-item title">My Banner</div> 
 
    <div class="flex-item "><span>Right Container</span></div> 
 
</div>

EDITあなたは "固定高さを" したくない場合は、使用することができます

：

.logo { 
    display: flex; 
    align-items: center 
} 

彼の答えで@wscourgeと言いました。

Answer 3

私はheight:100%;でalign-self: stretchを交換し.logo自体にdisplay:flexを追加しました。これにより、100％の高さを維持しながら.logo自体の内容が集中します。

https://jsfiddle.net/fw5pttme/3/

Answer 4

私は、余分なdiv要素でこれを行うことができたとフレックス二度目の呼び出し。よりクリーンなソリューションがあるかもしれません。私はもう少しそれを周り遊んで、あなたに知らせる。

.flex-container { 
 
    color: #fff; 
 
    background: #3c3c3c; 
 
    height: 50px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
.flex-item { 
 
    padding: 0 10px; 
 
} 
 
.logo-container { 
 
    display:flex; 
 
    background: #f06; 
 
    align-self: stretch; 
 
} 
 
.logo { 
 
    align-self: center; 
 
} 
 
.title { 
 
    flex-grow: 1; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item logo-container"> 
 
    <div class="logo">My Logo Text</div> 
 
    </div> 
 
    <div class="flex-item title">My Banner</div> 
 
    <div class="flex-item "><span>Right Container</span> 
 
    </div> 
 
</div>