随内容增长的 Flexbox 列布局

Question

我想使用 flexbox 创建一个包含三列的布局。中心栏应该是两个堆叠在一起的项目。像这样：

 _______ _______  _______
|       |  top   |       |
| left  |________| right |
|       | bottom |       |
|_______|________|_______|

我可以为固定高度的 flex 容器创建它，但我无法为动态高度的容器创建它。

HTML 结构必须是这样的。这种结构能做到吗？

<div class="container">
  <div class="left"></div>
  <div class="top"></div>
  <div class="bottom"></div>
  <div class="right"></div>
</div>

这是我尝试固定高度。我希望它根据.top 和.bottom 元素的内容垂直增长。

.container {
  height: 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.left,
.center,
.right {
  background-color: rgba(0, 0, 0, 0.5);
}
.left {
  background-color: green;
}
.top {
  background-color: red;
}
.bottom {
  background-color: blue;
}
.right {
  background-color: violet;
}
.top,
.bottom {
  flex: 1 0 50%;
}
.left,
.right {
  flex: 0 1 100%;
}

<div class="container">
  <div class="left">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
  </div>
  <div class="top">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="bottom">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="right">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
  </div>
</div>

Answer 1

我将顶部和底部包裹在 flex-direction: column; 中并制作了 .container flex-direction: row;。 flexbox 的流程总是依赖于父级的 flex-direction 以及它如何影响它的直接后代（即子级）。最初的方式我认为当您希望一组盒子垂直流动而另一组盒子水平流动时，只有一个弹性容器是不可能的。一组需要与弹性容器的影响隔离开来，或者如果一个容器是行的，它们会水平跟随，或者如果你只有一个弹性列，那么所有东西都会垂直流动。有align-self，但它不会改变弹性项目的方向，只是对齐。

/* Core CSS */

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
body {
  background: #121;
  color: #FEF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100vw;
  height: 100vh;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: baseline;
  align-items: baseline;
  overflow-y: auto;
}
.core {
  height: 100%;
  min-height: 200px;
  width: 60%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: space-around;
  align-items: space-around;
}
.left,
.center,
.right {
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.left {
  background-color: green;
  width: 20%;
  height: 100%;
}
.top {
  background-color: red;
}
.bottom {
  background-color: blue;
}
.right {
  background-color: violet;
  width: 20%;
  height: 100%;
}
.top,
.bottom {
  flex: 1 1 auto;
}
.left,
.right {
  flex: 1 0 auto;
}

<section class="container">
  <nav class="left">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
  </nav>
  <main class="core">
    <div class="top">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
    <div class="bottom">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
  </main>
  <aside class="right">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
  </aside>
</section>