是否可以使用 Flexbox CSS 构建此页眉布局？

Question

我一直在尝试弄清楚如何在 CSS Flexbox 中实现这种布局，到目前为止还想不出一种不涉及隐藏重复项以仅在桌面。使用 Flexbox 可以做到这一点吗？

我正在努力实现的图像示例：

Answer 1

grid 中的解决方案会好很多，这是一个工作示例，移动版本的断点发生在 800px，

我建议你阅读 Grid Area Template 系统，它以非常现代和漂亮的方式制作这些布局

.parent{
  width: 100%;
  height:100vh;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "blue red""blue red""green green";
  gap: 10px;
}

.blue{
  grid-area: blue;
  width: 200px;
  background: blue;
}

.red{
  grid-area: red;
  width: 100%;
  background: red;
}

.green{
  grid-area: green;
  width: 100%;
  height: 100%;
  background: green;
}

@media screen and (max-width: 800px){
  .parent{
 grid-template-areas:    "blue red"
                         "blue green";
     grid-template-rows: 1fr 1fr;
  }
}

<div class="parent">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

是否可以使用 Flexbox CSS 构建此页眉布局？

Is it possible to build this header layout using Flexbox CSS?

html

css

flexbox

tailwind-css