flexbox拉伸具有困难布局的元素的高度

Question

我有以下HTML结构：

<div id="page-wrapper">
    <div>#banner</div>
    <div>#left-panel</div>
    <div>#content</div>
    <div>#footer</div>
</div>

我对flex很新，并且想知道我可以达到以下结果：

• 页面包装器的高度和宽度为100％

• 左侧面板（定义的宽度）拉伸到＃page-wrapper的宽度的100％

• banner（已定义的高度），＃content和#footer（已定义的高度）一起总计＃左侧面板的高度，并水平拉伸以覆盖任何剩余的空间

如果有人可以请我指导或了解我可以遵循的任何教程，以实现这一目标。

Answer 1

这将有助于： https://jsfiddle.net/wbncm2j4/1/

#page-wrapper {
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
}
#left-panel {
  background: #BBB;
  min-height: 100%;
  width: 150px;
  order: -1;
  flex: 0 0 auto;
}
#banner, #footer, #content {
  width: calc(100% - 150px);
}
#banner {
  background: #99C;
  height: 40px;
}
#footer {
  background: #C9C;
  height: 25px;
}
#content {
  background: #9C9;
  flex: 1 1 auto;
}

body { margin: 0; }

<div id="page-wrapper">
    <div id="banner">banner</div>
    <div id="left-panel">left-panel</div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</div>

左侧面板

flex-flow: column wrap;和高度100％ 然后设置标题的高度＆amp;页脚。
使用order更改元素的显示顺序。

Answer 2

您只需在父元素上使用flex-direction: column，并使left-panel元素占据100％的高度。

#page-wrapper {
  display: flex;
  height: 100vh;
  flex-direction: column;
  flex-wrap: wrap;
}
#page-wrapper > div {
  border: 1px solid black;
  flex: 1;
  width: 80%;
}
#page-wrapper > div:nth-child(2) {
  flex: 0 0 100%;
  width: 20%;
  order: -1;
}

<div id="page-wrapper">
  <div>#banner</div>
  <div>#left-panel</div>
  <div>#content</div>
  <div>#footer</div>
</div>

Answer 3

您可以使用flex-grow和flex-wrap来实现此目的：

* {
  margin: 0;
  box-sizing: border-box;
}
#page-wrapper {
  display: flex;
  flex-flow: column wrap;
  width: 100vw;
  height: 100vh;
}
div div {
  /* basic CSS and see them */
  width: 80vw;
  box-shadow: inset 0 0 0 1px;
  padding: 1em;
}
div:nth-child(2) {
  order: -1;
  /* reorder place in the flow defaut is 0; -1 put the element in front all  */
  width: 20vw;
  height: 100%;
  /* next element will show in next column */
  background:turquoise
}
div:nth-child(3) {
  flex: 1;/* or flex-grow:1; the short hand propertie works fine through the different browsers */
  /* will take whole space avalaible*/
  background:tomato
}

<div id="page-wrapper">
  <div>#banner</div>
  <div>#left-panel</div>
  <div>#content</div>
  <div>#footer</div>
</div>