Question

我的目标是使用flex构建一个基于'Holy-Grail'的布局。主要内容区域需要有其他内容。

我很难将“左上内容，上限内容，上限内容，中间内容和较低内容”并排放在一起，并填补可用空间。

这是我为了嵌套内容而修改的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>

Answer 1

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

你不需要漂浮物，所以我把它们移走了。
您不需要display: inline-block。也删除了。
你有一个不必要的容器。除去。

对于此特定方法，五个内容项包装在row wrap弹性容器中。

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

这意味着前三个项目将消耗第一行中的所有空间，强制最后两个项目创建其他行。

在Chrome，Firefox，Edge和IE11中进行了测试。

＆＃13;

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

＆＃13;

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

＆＃13;

revised codepen

Answer 2

这是一个嵌套flex的示例，用于正确定位上排（没有浮点数或内联，只是flex！）：

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

上排可以包含尽可能多的列，它会自动调整宽度。

它有一个像你的粘性页脚。

HTML相对简单：

＆＃13;

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

＆＃13;

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

＆＃13;

如何将内容嵌入弹性框的“圣杯”布局中？

2 个答案: