垂直對齊拉伸的柔性箱項目

Question

我想知道如何將display: flex容器內的項目設置爲align-self: strech，並讓它在同一時間在中間垂直對齊。

我創建了一個Fiddle來展示我的問題。元素「我的標誌文字」 應在同一垂直水平爲「我的旗幟」和「右容器」

Answer 1

地址：

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

Answer 2

如果My Logo Text是單行你可以使用line-height:50px;來解決這個問題。

工作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>

編輯

如果你不希望有一個 「固定高度」，你可以使用：

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

正如@wscourge在他的回答中所說的那樣。

Answer 3

我height:100%;交換align-self: stretch，並添加display:flex到.logo本身。這將保持.logo本身的內容，同時保持100％的高度。

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

Answer 4

我能有額外的股利和彈性調用第二次做到這一點。可能有更清潔的解決方案。我會多玩一下，讓你知道。

.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>