如何始終使用flexbox填充父級高度？

我有以下HTML：如何始終使用flexbox填充父級高度？

<div class="admonition info"> 
    <p class="admonition-title">Info</p> 
    <p>Text here</p> 
</div>

和CSS：

.admonition { 
    border: 1px solid red; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.admonition > p { 
    margin: 0; 
    padding: 6px; 
    display: block; 
} 

.admonition-title { 
    background-color: #2B83BD; 
    color: #fff; 
    display: block; 
    padding: 2px; 
} 

.admonition > .admonition-title { 
    font-size: 1px; 
    letter-spacing: -1px; 
    color: transparent; 
    width: 64px; 
    text-align: center; 
    vertical-align: middle; 
    min-width: 60px; 
} 

.admonition > .admonition-title:before { 
    font-family: "FontAwesome"; 
    font-size: 32px; 
    letter-spacing: normal; 
    color: #fff; 
} 

.admonition.info > .admonition-title:before { 
    content: "\f129"; 
} 

.admonition.info > p:not(.admonition-title) { 
    background-color: #7DBAE3; 
} 

.admonition.info > .admonition-title { 
    background-color: #2B83BD; 
}

我想有以下限制，以使孩子們：

它們垂直居中
如果他們的身高不相等，他們應該伸展以填補空缺

白色的差距，我想什麼來避免。 Live on JSFiddle

HTML是從markdown生成的，我沒有真正控制結構。這可能以簡單的方式實現嗎？ Javascript，jquery也行，但我更願意在CSS中這樣做。

來源

2016-05-29 Tamás Szelei

只需使用align-items: stretch;即可使項目填充父項高度。

.admonition > .admonition-title { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

https://jsfiddle.net/4mw8a08x/

來源

2016-05-29 10:46:48

還有什麼你改變：

然後，你的圖標將需要手動爲中心，我有做呢？如果我只改變它，我得到這個渲染：http://i.imgur.com/19wrLOs.png（[fiddle]（https://jsfiddle.net/Lqvc9ybt/1/）） –

是的，如果你看看我的jsfiddle，我做了一些其他的小改動，正確對齊「圖標」。 –

感謝您的補充細節，現在我明白了。 –

如何始終使用flexbox填充父級高度？

回答

相關問題