具有 3 个 div 的容器，使用 Flex-box/Grid

Question

基本上我想要的是 3 个 div。 上面一个矩形 和 2 个并排在其下方的小方块。

谁能帮我解决这个问题？ 在下面的代码中，我可以创建 3 个正方形。但是顶部有 2 个，底部有 1 个。

但我想要一个位于下方 2 个较小正方形上方的矩形。如果这有意义的话。

[-----------------]

[---] ]---]

 <section class="story story--spaceous">
  <div class="hero__compact-inner">
          <div class="grid">
            <div class="grid__row">
              <div class="grid__col">
                <h2 class="hero__subtitle">
                  Laag 6: Endpoint Security
                </h2>
                <p class="story__intro">
                  Antivirussystemen zorgen voor de optimale veiligheid binnen jouw organisatie. Het regelmatig updaten hiervan verkleint de risico's en kalamiteiten.
                  </p>
                  <div class="flex-container-3-status">
                    <div class="status-dashboard">Status dashboard rechthoek</div>
                    <div class="chart--donut">Donut Diagram Algemene Score</div>
                    <div class="action-list box-50">Actielijst</div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
</section>

CSS：

.flex-container-3-status{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.flex-container-3-status> div{
  flex: 0 40%;
  height: 300px;
  width: 300px;
  margin-top: 45px;
  border: #fff solid;
  box-sizing: border-box
}

Answer 1

弹性容器中有 4 个divs。将第一个div 的flex-basis 属性定义为：

.flex-container-4 > div:first-child {
  flex-basis: 100%;
}

这将使第一个 div 跨越 100% 的宽度，其余的 divs 将在下一行对齐。

您可能还需要相应地调整.flex-container-4 > div 的flex: 0 40%; 声明。 flex: 0 50%;，如果你还有 2 个 divs，或者flex: 0 33.33%;，如果还有 3 个 divs（如你的代码所示）。

Answer 2

我只是添加了两个类 box-full 和 box-50 来为每个类设置不同的样式，如下所示...

.box-full{
  flex: 1 100%;

}
.box-50{
  flex:1 50%;
}

.flex-container-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.flex-container-4 > div {
  height: 300px;
  width: 300px;
  margin-top: 45px;
  border: #fff solid;
  box-sizing: border-box
}
.box-full{
  flex: 1 100%;
  background:red;
}
.box-50{
  flex:1 50%;
  background:yellow;
}

<section class="story story--spaceous">
        <div class="hero__compact-inner">
                <div class="grid">
                  <div class="grid__row">
                    <div class="grid__col">
                      <h2 class="hero__subtitle">
                        Laag 1: Bewustzijn
                      </h2>
                      <p class="story__intro">
                            Ruim de helft van security-calamiteiten wordt veroorzaakt door gebruikers. En slechts 41% van gebruikers kent het beleid ten aanzien van digitale veiligheid. Alleen al door bewustzijn van medewerkers te vergroten, weet je binnen jouw organisatie risico's sterk te beperken.
                        </p>
                        <div class="flex-container-4">
                          <div class="chart--donut box-full">Donut Diagram Algemene Score</div>
                          <div class="chart--donut box-50">Circel Diagram Recente Maatregelen</div>
                          <div class="chart--radar box-50">Radar Chart Verantwoordelijkheid</div>
                          <div class="action-list">To do list ul</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

这是你想要的吗？