Question

您好我正在尝试使用带悬停增长功能的flexbox构建全屏覆盖菜单。它有效，但它似乎只能通过增加行高，字体大小或输入更多内容来获得全高。在这种情况下，我也猜测响应能力丢失了。

我把它放在html中：

<div class="container">
<div>OM OS<br />
hvordan</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

我把它放在我的自定义CSS中：

body {
  margin: 0;
  padding: 0;
  height:100%;
  box-sizing:  border-box;
}
body, body:before, *:after {
  box-sizing: inherit;
}



.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  background-color:#ddd;
  opacity: 0.6;
}
.container div {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  -webkit-transition: .3s;
  transition: .3s;
  max-width: 20%;
  padding: 8em 0;
  background-color:#000;
  opacity: 0.9;
  min-width: 10%;
}
.container div:hover {
  -webkit-transition: .5s;
  transition: .5s;
  max-width: 40% !important;
  background: #333333;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  cursor: pointer;
  color: #fff;
}

到目前为止，我的悲惨努力可以在here上查看如果有人可以帮助解决这个问题，或者至少指出我正确的指导方向，那将是非常棒的。提前致谢

Answer 1

这就是让它发挥作用所需的一切：

＆＃13;

<div class="container">
  <div>
  OM OS<br>
  hvordan
  </div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

＆＃13;

functions.php

＆＃13;

Answer 2

您可以像这样更新container div的CSS：

.container div {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    -webkit-transition: .3s;
    transition: .3s;
    max-width: 20%;
    padding: 8em 0;
    background-color: #000;
    opacity: 0.9;
    min-width: 10%;
    height: 100vh;
    display: flex;
    align-items: center;
}

使用height: 100vh;，你可以达到最高。另外，通过添加display: flex和align-items: center，您可以将内容置于中心位置。

Flexbox大小全屏问题

2 个答案: