如何在弹性框“圣杯”布局中嵌套内容？答案

【问题标题】：How to nest content inside a flex box 'holy grail' layout?如何在弹性框“圣杯”布局中嵌套内容？
【发布时间】：2016-09-29 04:55:52
【问题描述】：

我的目标是使用 flex 构建一个基于“圣杯”的布局。主要内容区域需要有额外的内容。

我在将“左上内容、上内容中心、右上内容、中间内容和下内容”并排并填满可用空间时遇到了问题。

这是我修改的codepen，试图嵌套内容。

body {
  margin: 0;
}
.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  display: flex;
  flex: 1;
}
.contentMain {
  flex: 1;
  background: lightblue;
  min-width: 10em;
}
.nav,
.ads {
  /* 12em is the width of the columns */
  flex: 0 0 12em;
}
.nav {
  /* put the nav on the left */
  order: -1;
  background: salmon;
}
.ads {
  background: green;
}
header,
footer {
  background: #ccc;
  padding: 4em 1em;
}
/*Nested Content*/

.ucleft {
  background-color: gray;
  width: 30%;
  float: left;
}
.uccenter {
  background-color: red;
  width: 30%;
  display: inline-block;
}
.ucright {
  background-color: lightgray;
  width: 30%;
  float: right;
}
.middlecontent {
  background-color: blue;
  width: 100%;
}
.lowercontent {
  background-color: orange;
  width: 100%;
}

<!-- currently not working in IE, don't know why -->

<body class="page">
  <header>Header</header>
  <div class="content">
    <main class="contentMain">
      <div class="upperContainer">
        <div class="ucleft">UC Left</div>
        <div class="uccenter">UC Center</div>
        <div class="ucright">UC Right</div>
      </div>
      <div class="middlecontent">Middle Content</div>
      <div class="lowercontent">Lower Content</div>
    </main>
    <nav class="nav">Nav</nav>

  </div>
  <footer>Footer</footer>
</body>

【问题讨论】：

您将浮动与弹性定位混合在一起，这是有原因的吗？可能左上角可以用flex吗？
我不知道如何在第一个 flex 中嵌套另一个 flex...所以我尝试了 floats

标签： html css flexbox

【解决方案1】：

有几种方法可以构建此布局。这只是一个：

你不需要浮动，所以我删除了它们。
你不需要display: inline-block。也被移除了。
您有一个不必要的容器。已移除。

对于这个特定的方法，五个内容项被包装在一个row wrap flex 容器中。

前三个项目的宽度为 33.33%。其余项目的宽度为 100%。

这意味着前三个项目将占用第一行的所有空间，迫使最后两个项目创建额外的行。

在 Chrome、Firefox、Edge 和 IE11 中测试。

.page {
  display: flex;
  height: 100vh;
  flex-direction: column;
  margin: 0;
}
.content {
  display: flex;
  flex: 0 0 60vh;
}
.contentMain {
  flex: 1;
  background: lightblue;
  display: flex;
  flex-direction: row;
  /* default setting; can be omitted */
  flex-wrap: wrap;
}

.nav, .ads {
  /* 12em is the width of the columns */
  flex: 0 0 12em;
}
.nav {
  /* put the nav on the left */
  order: -1;
  background: salmon;
}
.ads {
  background: green;
}
header, footer {
  flex: 0 0 20vh;
  background: #ccc;
}

/*Nested Content*/
.ucleft {
  flex: 1 0 33.33%;
  background-color: gray;
}
.uccenter {
  flex: 1 0 33.33%;
  background-color: red;
}
.ucright {
  flex: 1 0 33.33%;
  background-color: lightgray;
}
.middlecontent {
  flex: 0 0 100%;
  background-color: blue;
}
.lowercontent {
  flex: 0 0 100%;
  background-color: orange;
}

<body class="page">
  <header>Header</header>
  <div class="content">
    <main class="contentMain">
      <div class="ucleft">UC Left</div>
      <div class="uccenter">UC Center</div>
      <div class="ucright">UC Right</div>
      <div class="middlecontent">Middle Content</div>
      <div class="lowercontent">Lower Content</div>
    </main>
    <nav class="nav">Nav</nav>
  </div>
  <footer>Footer</footer>
</body>

revised codepen

【讨论】：

这太棒了！正是我需要的！谢谢！如何改变内容区域的高度？
使用height 属性。根据你想要做什么，使用像素、ems、vh 等。

【解决方案2】：

这是一个使用嵌套 flex 来正确定位上一行的示例（没有浮动或内联，只是 flex！）：

演示： http://codepen.io/aaronvanston/pen/XjgNjP

上面一行可以有尽可能多的列，它会自动调整宽度。

它和你的一样有一个粘性页脚。

HTML比较简单：

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.main {
  display: flex;
  flex: 1 0 auto;
}

.nav {
  flex: 0 0 12em;
}

.content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1 0 auto;
  flex-direction: row;
  
}
.col {
  flex: 1 0 auto;
}

/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE
*/
body {
  text-align: center;
}

*{
  box-shadow:inset 0px 0px 0px 1px #f00;
}

<header clas="header">Header</header>
<main class="main">
  <nav class="nav">
    Nav
  </nav>
  <section class="content">
    <div class="row">
      <div class="col">
        Upper Left
      </div>
      <div class="col">
        Upper Middle
      </div>
      <div class="col">
        Upper Right
      </div>
    </div>
    <div class="row">
      Middle
    </div>
    <div class="row">
      Lower
    </div>
  </section>
</main>
<footer class="footer">Footer</footer>

【讨论】：

这是一个很好的答案。