随内容增长的 Flexbox 列布局

Question

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

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

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

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 的流程总是依赖于 parent 的 flex-direction 以及它如何影响它的直接后代（即 children）。最初的方式我认为当您希望一组盒子垂直流动而另一组盒子水平流动时，只拥有一个弹性容器是不可能的。一组需要不受 flex 容器的影响，否则如果一个容器是行，他们将水平跟随，或者如果只有一个 flex 列，则所有内容将垂直流动。有 align-self 但它不会改变 flex-items 方向，只是对齐。

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

随内容增长的 Flexbox 列布局

Flexbox column layout that grows with the content

css

flexbox