html - 以特定方式排列 flex 元素

Question

我想按以下方式安排 flex 元素:

使用下面的例子:

.Container {
  display: flex;
  overflow: hidden;
  height: 100vh;
  margin-top: -100px;
  padding-top: 100px;
  position: relative;
  width: 70vw;
}

<div class="Top">Top Content</div>
<div class="Container">
  <div class="Left">Left Content</div>
  <div class="Middle">Middle Content</div>
  <div class="Right">Right Content</div>
</div>

我可以让它下面有一个水平条和垂直列。但是，我不知道如何制作另一个 垂直列；一个由上述代码组成，另一个由不同的 div 组成。

谢谢!

Answer 1

您可以使用 flex 。对于每个“方向”，使用一个容器。要以 1:2 的比例进行分频，请使用 flex-grow: 1 和 flex-grow: 2;。

使用也很重要

flex-shrink: 0;
flex-basis: 0;

如果你想保持比例而不考虑里面的内容，否则浏览器会根据里面的内容调整div的大小。

有一种更短的方式来写所有 3:

flex: [flex-grow], [flex-shrink], [flex-basis];

但是IE不支持，所以我更喜欢用long way

.out-container {
  display: flex;
  flex-direction: row;
}

.inner-cont {
  display: flex;
  flex-direction: row;
  flex-grow: 2;
}

.container {
  flex-grow: 2;
  flex-shrink: 0;
  flex-basis: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 70vw;
}

.left,
.right,
.middle,
.top {
  padding: 10px;
  border: 1px solid black;
}

.left {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  background-color: #aaeffe;
}

.top {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #69e2fd;
}

.middle{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #38d0fd;
}

.right{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 0;
  background-color: #1fbbfb;
}

<div class="out-container">
  <div class="left">Left Content</div>
  <div class="container">
    <div class="top">Top content</div>
    <div class="inner-cont">
      <div class="middle">Middle Content</div>
      <div class="right">Right Content</div>
    </div>
  </div>
</div>