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元素的内容垂直增长。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我在flex-direction: column;中包裹了顶部和底部，并制作了.container flex-direction: row;。 flexbox的流程总是依赖于父flex-direction以及它如何影响它的直接后代（即孩子）。最初的方式我不认为当你想要一组盒子垂直流动而另一组盒子水平流动时，只有一个flex容器。一组需要与弹性容器的影响隔离，或者如果一个容器是行，或者如果只有一个弹性柱，一切都会垂直流动，它们将水平地跟随。有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>

随内容增长的Flexbox列布局

1 个答案: