如何用CSS Flexbox正确对齐元素并实现响应式表格布局

嘿，刚入门Flexbox遇到这种问题太正常了，我来一步步帮你搞定这个需求！

你的核心需求是让section-two__main里的数字和名称像表格一样两列排列，同时保持响应式——在页面缩小的时候也能维持设计（直到你设置的断点生效）。之前用order属性出问题，是因为咱们的结构和Flexbox的方向没搭配好，不用order也能完美实现。

核心思路调整 #

原来你给section-two__main设了flex-direction: column，这会让所有元素垂直排列。咱们改成横向排列+自动换行，再给每个number和name设置固定的宽度占比，就能模拟表格的两列效果：

• 把section-two__main的flex-direction改成row，加上flex-wrap: wrap让元素在空间不够时自动换行
• 给number和name设置flex: 0 0 50%，强制每个元素占满容器宽度的一半，这样自然就分成两列了

修改后的完整代码 #

CSS部分

.wrapper{ 
  display:flex; 
  flex-direction:column; 
}
.section-one{ 
  background-color:gray; 
  width:95%; 
  margin:0 auto; 
  padding: 8px; /* 加内边距优化视觉 */
  box-sizing: border-box;
}
.section-two{ 
  background-color:white; 
  width:95%; 
  margin:0 auto; 
  margin-top:10px; 
}
.section-two__header{ 
  background-color:darkgray; 
  padding: 8px;
}
.section-two__footer{ 
  background-color:darkgray; 
  padding: 8px;
}
.section-two__main{ 
  background-color:white; 
  width:70%; 
  display:flex; 
  flex-direction:row; /* 改成横向排列 */
  flex-wrap: wrap; /* 自动换行 */
  margin:0 auto; 
}
.name{ 
  border:1px dotted; 
  flex: 0 0 50%; /* 占50%宽度 */
  padding: 4px;
  box-sizing: border-box; /* 让边框算在宽度内，避免溢出 */
}
.number{ 
  border:1px dashed; 
  flex: 0 0 50%; /* 占50%宽度 */
  padding: 4px;
  box-sizing: border-box;
}

HTML部分（保持你的原结构即可）

<div class="wrapper">
<div class="section-one"> First section </div>
<div class="section-two">
<div class="section-two__header"> second section header </div>
<div class="section-two__main">
<div class="number">1</div>
<div class="name">One</div>
<div class="number">2</div>
<div class="name">Two</div>
<div class="number">3</div>
<div class="name">Three</div>
<div class="number">4</div>
<div class="name">Four</div>
<div class="number">5</div>
<div class="name">Five</div>
<div class="number">6</div>
<div class="name">Six</div>
<div class="number">7</div>
<div class="name">Seven</div>
<div class="number">8</div>
<div class="name">Eight</div>
<div class="number">9</div>
<div class="name">Nine</div>
<div class="number">10</div>
<div class="name">Ten</div>
<div class="number">11</div>
<div class="name">Eleven</div>
<div class="number">12</div>
<div class="name">Twelve</div>
</div>
<div class="section-two__footer"> second section footer </div>
</div>
</div>

响应式断点扩展（可选） #

如果想在小屏幕（比如宽度小于600px）时改成单列布局，只要加个媒体查询：

@media (max-width: 600px) {
  .section-two__main {
    width: 90%; /* 小屏幕下加宽容器 */
  }
  .number, .name {
    flex: 0 0 100%; /* 每个元素占满整行 */
  }
}

这样调整后，不管页面怎么缩小（在断点之前），数字和名称都会保持两列对齐，和表格效果一致，而且完全用Flexbox实现，没有复杂的order操作~

内容的提问来源于stack exchange，提问作者ninja