Question

是否可以使用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>

Answer 1

在这种情况下使用网格将使其更加容易。

每个div的{{1}}都设置为某个值，用于根据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";
      }
    }

Answer 2

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

<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。如果您想要半屏显示和width全屏显示，请放50% 100%。 flex-wrap设置将按原样组织项目。

在移动@media中，您将flex-direction的{{1}}和row分别更改为width和div，以匹配所需的布局。

是这样的：

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

CSS：是否可以实现以下布局？

2 个答案: