當另一個孩子有更大的字體大小時，使flexbox兒童填充100％身高

Question

所以我在下面有我的問題。

.app-main-header { 
 
    background-color: blue; 
 
    align-items: center; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
.app-main-header > div:first-child { 
 
    padding-right: 10px; 
 
} 
 

 
.app-main-header > div { 
 
    background-color: red; 
 
    height: 200%; 
 
    padding: 10px 0; 
 
} 
 

 
.app-main-header > div + div { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    border-left: 1px solid grey; 
 
} 
 

 
.app-hamburger { 
 
    font-size: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="app-main-header"> 
 
    <div> 
 
    About 
 
    </div> 
 
    <div> 
 
    Contact 
 
    </div> 
 
    <div class="app-hamburger"> 
 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
    </div> 
 
</div>

的AboutContact和盒是作爲其font-size更大相比較小到漢堡包圖標。無論如何可以使About和Contact箱子大小匹配漢堡而不增加font-size？

Answer 1

如果你得到關於.app-main-header擺脫align-items: center，你會得到關於.app-main-header > div擺脫height: 200%，你的資產淨值的項目都將採取的導航欄的整個高度。

提出的唯一問題是文本不是那麼垂直居中。所以要解決這個問題，你可以在這些div裏面添加一個span，並且在012s的div上使用display: block; margin: auto。

.app-main-header { 
 
    background-color: blue; 
 
    /*align-items: center;*/ 
 
    display: flex; 
 
    justify-content: flex-end; 
 

 
} 
 
.app-main-header > div:first-child { 
 
    padding-right: 10px; 
 
} 
 
.app-main-header > div{ 
 
    background-color :red; 
 
    /*height: 200%;*/ 
 
    padding: 10px 0; 
 
    display: flex; 
 
} 
 
.app-main-header > div span { 
 
    display: block; 
 
    margin: auto; 
 
} 
 
.app-main-header > div + div { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    border-left: 1px solid grey; 
 
} 
 
.app-hamburger { 
 
    font-size: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="app-main-header"> 
 
    <div> 
 
     <span>About</span> 
 
    </div> 
 
    <div> 
 
     <span>Contact</span> 
 
    </div> 
 
    <div class="app-hamburger"> 
 
     <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
    </div> 
 
</div>

Answer 2

如前所述，你應該刪除align-items: center和height: 200%允許柔性項舒展。

但是這裏不需要額外的跨度。您可以讓Flex項目成爲嵌套的柔性容器（如cjl750's answer中所做的）並添加align-items: center。這將工作，因爲文本節點被視爲匿名Flex項目。

從flexbox specs：

在每個流子一個flex container的成爲flex item，以及直接包含在flex container內的文本的每個連續運行被包裹在一個匿名flex item。但是，僅包含white space（即可能受到white-space屬性影響的字符）的匿名彈性項目不會呈現（就像它是display:none一樣）。

演示：

.app-main-header { 
 
    background-color: blue; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
.app-main-header > div:first-child { 
 
    padding-right: 10px; 
 
} 
 

 
.app-main-header > div { 
 
    background-color: red; 
 
    padding: 10px 0; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.app-main-header > div + div { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    border-left: 1px solid grey; 
 
} 
 

 
.app-hamburger { 
 
    font-size: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="app-main-header"> 
 
    <div> 
 
    About 
 
    </div> 
 
    <div> 
 
    Contact 
 
    </div> 
 
    <div class="app-hamburger"> 
 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
    </div> 
 
</div>