在垂直弹性容器中水平对齐弹性项目

Question

我一辈子都想不出如何让这个页面正常工作。

我试图让 "Top" 成为页眉，"Bottom" 成为页脚，"table" 和 "section" 成为它们之间的两个单独的列。

虽然想不通。谢谢

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}
#pageTop {
  background-color: lightgrey;
  padding-left: 1em;
  padding-top: .5em;
  flex-grow: 1;
}
#table {
  background-color: blue;
  width: 50%;
  flex-grow: 8;
  flex-shrink: 1;
}
#pageSection {
  background-color: lightpink;
  width: 50%;
  flex-flow: 8;
  flex-shrink: 1;
}
#pageBot {
  flex-grow: 1;
  background-color: grey;
}

<body>
  <div id="pageTop">Top</div>
  <nav id="table">table</nav>
  <div id="pageSection">section</div>
  <div id="pagebot">Bottom</div>
</body>

Answer 1

添加一个 div 和 flex 行，因为它（使用 width 属性调整 cols 宽度）：

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}
#pageTop {
  background-color: lightgrey;
  padding-left: 1em;
  padding-top: .5em;
}
#mainContainer {
  display: flex;
  flex-direction: row;
}

#table {
  background-color: blue;
  width: 50%;

}
#pageSection {
  background-color: lightpink;
  width: 50%;

}
#pagebot {
  background-color: grey;
}

<body>
  <div id="pageTop">Top</div>
  <div id="mainContainer">
    <nav id="table">table</nav>
    <div id="pageSection">section</div>
  </div>
  <div id="pagebot">Bottom</div>
</body>

PS：我还修复了一个 pagebot/pageBot 变体。请注意，CSS 区分大小写。

Answer 2

如Micheal_B所述：

Wrap the #table and the #section in one container. That container becomes the second flex item in the parent flex container. Then add display: flex to the new container.

变化

在正文中添加了 main#pageContent 并将其包裹在 nav#table 和 section#pageSection 周围
- 添加了 display: flex、justify-content: center 和 flex: 2 0 auto
将所有 flex-grow 和 flex-shrink 更改为 flex shorthand。
- 例如。 flex: 0 1 auto = flex-grow: 0 flex-shrink: 1 flex-basis: auto
- 注意。以上规则集是所有 flex 子项的默认规则集。
删除了align-content和justify-content；并将 flex-wrap 的值从 wrap 更改为 nowrap；并添加 overflow:hidden 和 width: 100% 以规范化一点。
将 width: 100% 添加到除 #pageSection 和 #table 之外的所有内容。
已将 height: 2em 添加到 #pageTop 和 #pageBot（顺便说一句，更正了拼写错误）
将所有标签更改为其语义等价物。

`main#pageContent`

高度设置为占用页脚和页眉留下的自由空间 height: calc(100% - 4em)。这可能有点矫枉过正，因为它还有 flex: 2 0 auto.
它是一个弹性容器（flex: display）和一个弹性子容器（flex: 2 0 auto）

`section#pageSection`

overflow-x: hidden 将防止任何内容从侧面溢出边界。 overflow-y:auto 将通过添加滚动条来容纳任何扩展底部边框的内容。我添加了内容（几个<p>）来演示。

片段

html {
  height: 100%;
  width: 100%;
}
body {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0;
  overflow: hidden;
}
#pageContent {
  width: 100%;
  height: calc(100% - 4em);
  display: flex;
  justify-content: center;
  flex: 2 0 auto;
}
#pageTop {
  width: 100%;
  height: 2em;
  background-color: violet;
  padding-left: 1em;
  padding-top: .5em;
  flex: 0 0 auto;
}
#table {
  background-color: cornflowerblue;
  width: 50%;
  flex: 0 0 auto;
}
#pageSection {
  background-color: darksalmon;
  width: 50%;
  flex: 1 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
}
#pageBot {
  width: 100%;
  height: 2em;
  flex: 0 0 auto;
  background-color: gold;
}

<body>
  <header id="pageTop">Top</header>
  <main id='pageContent'>
    <nav id="table">table</nav>
    <section id="pageSection">
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>

      <p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>

      <p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>

      <p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>

      <p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted
        out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops</p>
    </section>
  </main>
  <footer id="pageBot">Bottom</footer>
</body>

在垂直弹性容器中水平对齐弹性项目

Aligning flex items horizontally in a vertical flex container

html

css

webpage

flexbox

变化

`main#pageContent`

`section#pageSection`

片段