Question

我试图使用有两行的flexbox进行布局。

这两行都没有固定的高度。

第一行较小，包含徽标。

第二行有两列，必须填满屏幕的剩余高度。

这对Flexbox来说是否可行？

＆＃13;

* {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  padding: 1.85185vh 4.16667vw;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  z-index: 1;
  height: 9vmin;
}
.header .right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 4.16667vw;
  color: #191919;
  font-size: 3.5vmin;
  font-weight: 300;
}
.header img {
  height: 100%;
}
.main-wrapper {
  height: 100%;
  width: 100%;
}
.columns-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.column-left,
.column-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.column-left {
  background: red;
}
.column-right {
  background: yellow;
}

＆＃13;

<div class="main-wrapper">

  <header class="header" role="banner">
    <img src="http://img.logospectrum.com/dec/dummy-logo.jpg" alt="Logo">
    <div class="right">
      aaaaa
    </div>
  </header>

  <div class="columns-wrapper">
    <div class="column-left">
      <div class="column-inner">

      </div>
    </div>
    <div class="column-right">bbb</div>
  </div>

</div>

＆＃13;

演示：http://codepen.io/riogrande/pen/RGboox

Answer 1

是的，通过添加到main-wrapper：

display: flex;
flex-direction: column;

并通过：

header {
    flex: 0 0 auto;
}
.columns-wrapper {
    flex: 1 1 auto;
}

1 1 auto告诉columns-wrapper伸展而0 0 auto告诉标题不扩展并保持其正常大小。

请参阅http://codepen.io/dievardump/pen/WGZRbv

Answer 2

使.main-wrapper在列方向上成为Flex容器。

这会将子项（header和.columns-wrapper）分成两行。

要让.columns-wrapper占用容器中的所有剩余空间，请应用flex: 1。

revised codepen

＆＃13;

* {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  padding: 1.85185vh 4.16667vw;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  z-index: 1;
  height: 9vmin;
}
.header .right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 4.16667vw;
  color: #191919;
  font-size: 3.5vmin;
  font-weight: 300;
}
.header img {
  height: 100%;
}
.main-wrapper {
  height: 100%;
  width: 100%;
  display: flex;              /* NEW */
  flex-direction: column;     /* NEW */
}
.columns-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex: 1;                   /* NEW */
}
.column-left,
.column-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.column-left {
  background: red;
}
.column-right {
  background: yellow;
}

＆＃13;

<div class="main-wrapper">

  <header class="header" role="banner">
    <img src="http://img.logospectrum.com/dec/dummy-logo.jpg" alt="Logo">
    <div class="right">
      aaaaa
    </div>
  </header>

  <div class="columns-wrapper">
    <div class="column-left">
      <div class="column-inner">

      </div>
    </div>
    <div class="column-right">bbb</div>
  </div>

</div>

＆＃13;

Answer 3

添加

min-height: 100%;

到.columns-wrapper

.columns-wrapper {
  min-height: 100%;
  display: flex;
}

flexbox填充剩余窗口高度不起作用

3 个答案: