如何使用Flexbox实现指定的响应式布局结构？

我来帮你搞定这个Flexbox布局需求！结合你提出的三个核心要求，我调整了HTML结构和CSS样式，完美实现你要的效果。先看看最终要实现的布局示意图：

修改后的完整代码 #

HTML 结构 #

<div class="wrapper">
  <div class="container">
    <div class="box">box</div>
    <div class="test-group">
      <div class="test1a">
        <div class="text1a">text1a</div>
        <div class="text2a">text2a</div>
        <div class="text3a">text3a</div>
        <div class="text4a">text4a</div>
      </div>
      <div class="test1b">
        <div class="text1b">text1b</div>
        <div class="text2b">text2b</div>
        <div class="text3b">text3b</div>
        <div class="text4b">text4b</div>
      </div>
    </div>
  </div>
</div>

CSS 样式 #

.wrapper {
  padding: 10px;
  background: white;
}

.container {
  padding: 10px;
  background: black; /* 修正了你之前拼写错误的backgorund */
  display: flex;
  flex-direction: column;
  gap: 10px; /* 给box和test-group之间增加间距 */
}

.box {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* 避免内容紧贴容器边缘 */
}

.test-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 两个test容器之间的间距 */
}

.test1a, .test1b {
  flex: 1;
  min-width: 200px; /* 窗口宽度小于该值时自动切换为纵向排列 */
  display: flex;
  flex-direction: column;
  gap: 5px; /* 内部文本块之间的间距 */
}

/* 统一文本块样式，减少重复代码 */
.text1a, .text2a, .text3a, .text4a,
.text1b, .text2b, .text3b, .text4b {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1; /* 让文本块占满父容器的纵向可用空间 */
  padding: 10px;
}

.text1a { background: blue; }
.text2a { background: red; }
.text3a { background: yellow; }
.text4a { background: orange; }

.text1b { background: green; }
.text2b { background: red; }
.text3b { background: yellow; }
.text4b { background: orange; }

关键实现细节解释 #

1. 对应元素宽度一致：

   • 给.test1a和.test1b设置flex: 1，让它们在横向布局时平分可用宽度；
   • 内部文本块通过flex: 1配合父容器的默认align-items: stretch属性，自动拉伸到和对应列的文本块宽度完全一致。

2. 响应式横向转纵向：

   • .test-group设置display: flex; flex-wrap: wrap;，再配合.test1a和.test1b的min-width: 200px，当窗口宽度不足以容纳两个容器并排时，自动切换为纵向排列。

3. 文本居中+区块占满空间：

   • 所有文本块使用display: flex; justify-content: center; align-items: center;实现文本水平垂直居中；
   • flex: 1让每个文本块占满父容器的纵向可用空间，确保区块铺满整个区域。

内容的提问来源于stack exchange，提问作者xabdo-bader