CSS：有没有可能实现如下布局？答案

【问题标题】：CSS: Is it possible to achieve the following layout?CSS：有没有可能实现如下布局？
【发布时间】：2019-08-07 16:01:55
【问题描述】：

是否可以使用 CSS3 Flexbox 实现如下图所示的响应式设计布局？我可以使用下面的代码实现桌面布局。但是，我想不出办法让 div #div3 和 #div4 填充在 #div1 和 #div2 下方

编辑：很抱歉，我忘了提到它不仅限于 CSS Flexbox，而且网格解决方案似乎更灵活，所以我将其标记为已接受的答案。谢谢大家的帮助！

我的代码

#div1 {
  background-color: red;
  width: 100px;
  height: 100px;
}

#div2 {
  background-color: green;
  width: 100px;
  height: 100px;
}

#div3 {
  background-color: orange;
  width: 100px;
  height: 100px;
}

#div4 {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.container,
#flex-container {
  display: flex;
}

#flex-container {
  flex-direction: column;
}

<!DOCTYPE html>

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="test.css">
</head>


<body>

  <div class="container">
    <div id='div1'></div>

    <div id="flex-container">
      <div id='div2'></div>
      <div id='div3'></div>
      <div id='div4'></div>
    </div>
  </div>

</body>

</html>

【问题讨论】：

可以使用新的网格css布局（显示：网格）吗？使用网格会很容易......

标签： css flexbox css-grid

【解决方案1】：

是的。首先，您可以将所有divs 放在同一个容器中：

<div id="flex-container">
  <div id='div1'></div>
  <div id='div2'></div>
  <div id='div3'></div>
  <div id='div4'></div>
</div>

然后，在容器中设置flex-direction: column 和flex-wrap: wrap。如果你想要半屏和100% 全屏，你可以输入width50%。 flex-wrap 设置将按应有的方式组织项目。

在移动 @media 中，您将每个 div 的 flex-direction 更改为 row 和 width 以匹配您想要的布局。

应该是这样的：

#div1 {
  background-color: red;
  height: 100%;
  width: 50%;
}

#div2 {
  background-color: green;
  height: 100px; // or 33.333%
  width: 50%;
}

#div3 {
  background-color: orange;
  width: 50%;
  height: 100px; // or 33.333%
}

#div4 {
  background-color: blue;
  width: 50%;
  height: 100px; // or 33.333%
}

#flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
}

@media (max-width: 480px) { // screen width you prefer
  #flex-container {
    display: flex;
    flex-direction: row;
  }
  #div1 {
    width: 50%;
    height: 100px;
  }
  #div2 {
    width: 50%;
  }
  #div3 {
    width: 100%;
  }
  #div4 {
    width: 100%;
  }
}

希望对您有所帮助。您甚至可以使用重复属性的类来简化 CSS。

【讨论】：

请记住，使用这种方法您必须定义容器的高度，这可能会导致问题
没错，但我相信有这样做的意图。

【解决方案2】：

在这种情况下使用网格会更容易。

这里的每个div 都有一个grid-area 设置为某个值，用于指示根据.container grid-template-areas 中定义的布局规则它在网格中的行为方式@ 那里的每个字符串都定义了网格中的一行. grid-template-rows 和 grid-template-columns 用于定义行数和列数

 * {
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      margin: 0;
    }

    #div1 {
      background-color: red;
      width: 100%;
      height: 100%;
      grid-area: div1;
    }

    #div2 {
      background-color: green;
      width: 100%;
      height: 100%;
      grid-area: div2;
    }

    #div3 {
      background-color: orange;
      width: 100%;
      height: 100%;
      grid-area: div3;
    }

    #div4 {
      background-color: blue;
      width: 100%;
      height: 100%;
      grid-area: div4;
    }

    .container {
      display: grid;
      height: 100%;
      grid-gap: 10px;
      padding: 10px;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: "div1 div2" "div3 div3" "div4 div4";
    }

    @media (max-width: 768px) {
      .container {
        grid-template-areas: "div1 div2" "div1 div3" "div1 div4";
      }
    }

<div class="container">
  <div id='div1'></div>
  <div id='div2'></div>
  <div id='div3'></div>
  <div id='div4'></div>
</div>

【讨论】：