如何使用flexbox完成此设计？

Question

我正在尝试通过使用flexbox完成此设计：

应该是一个一页的网站。

  .container {
      display: flex;
    }

    .big {
      flex: 2;
      height: 70vh;
      background: gray;
    }

    .small {
      flex: 1;
      height: 70vh;
      background: gray;
    }

<div class="container">
      <div class="small">
      </div>
      <div class="smallest">
      </div>
      <div class="big">
      </div>
 </div>

  

我不知道如何将“最小”的div占大div的25％，更不用说使“小的” div占大div的75％。

高度真的让我感到困惑，我需要它们始终保持相同的高度。

Answer 1

使用flexbox，您可以将small和smallest 包装到一个单独的div中，并在left上使用 column flexbox 部分。

  

我不知道如何将“最小”的div实现为大的25％

25％到75％的比例表示1：3的比例-在 flexbox 语言中，相对于小元素和flex: 1 flex: 3到大元素。

  

高度真的让我感到困惑，我需要它们始终保持相同的高度。

您可以将容器的高度设置为container元素-您的flexbox会填充到该高度。

请参见下面的演示

.container {
  display: flex;
  height: 70vh;
}

.big {
  flex: 3;
  background: gray;
  margin-left: 5px;
}

.left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.left .small {
  background: gray;
  flex: 3;
}

.left .smallest {
  margin-top: 5px;
  background: gray;
  flex: 1;
}

<div class="container">
  <div class="left">
    <div class="small">
    </div>
    <div class="smallest">
    </div>
  </div>
  <div class="big">
  </div>
</div>