当另一个孩子的字体较大时，让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>

About和Contact框与汉堡包图标相比较小，因为font-size更大。反正有没有让About和Contact框大小与汉堡包相匹配而不增加font-size？

Answer 1

如果您在align-items: center上摆脱了.app-main-header，并且height: 200%上摆脱了.app-main-header > div，您的导航项将全部占据导航栏的全部高度

唯一的问题是文本不是那么垂直居中的。所以要解决这个问题，你可以在这些div中添加一个span，并在跨度上使用display: flex的div上使用display: block; margin: auto。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如上所述，您应该删除align-items: center和height: 200%以允许弹性项目延伸。

但这里不需要额外的跨度。您可以将flex项目变为嵌套的Flex容器（如cjl750's answer中所述）并添加align-items: center。这将起作用，因为文本节点被视为匿名弹性项目。

来自flexbox specs：

  

flex container的每个流入子项都变为flex item，并且flex container中直接包含的每个连续文本都包含在匿名flex item中。但是，不会呈现仅包含white space的匿名弹性项（即可能受white-space属性影响的字符）（就像它是display:none一样）。

演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;