如何用Flexbox实现桌面与移动端的元素布局切换？

当然可以！Flexbox简直是处理这种响应式布局转换的完美工具，比表格布局灵活太多了。下面我会一步步给出可直接复用的实现方案：

1. 重构HTML结构 #

首先要抛弃不太适合响应式的表格结构，把每个图标和对应的文本封装成独立的单元（<div class="content-item">），这样在不同屏幕尺寸下调整排列方式会非常方便：

<div class="layout-container">
  <div class="content-item">
    <div class="icon-block">image-icon1</div>
    <div class="text-block">Text1</div>
  </div>
  <div class="content-item">
    <div class="icon-block">image-icon2</div>
    <div class="text-block">Text2</div>
  </div>
  <div class="content-item">
    <div class="icon-block">image-icon3</div>
    <div class="text-block">Text3</div>
  </div>
</div>

2. 编写Flexbox样式 #

桌面端布局（默认样式） #

让容器横向排列所有单元，同时每个单元内部垂直堆叠图标和文本，完美匹配你要的桌面效果：

.layout-container {
  display: flex;
  justify-content: space-between; /* 让三个单元均匀分布宽度 */
  width: 100%;
  max-width: 331px; /* 和你示例中的桌面表格宽度一致 */
}

.content-item {
  display: flex;
  flex-direction: column; /* 图标在上，文本在下 */
  align-items: center; /* 内容居中对齐 */
  width: 32%; /* 每个单元占容器1/3左右的宽度 */
}

.icon-block, .text-block {
  width: 100%;
  text-align: center; /* 模拟表格单元格的居中效果 */
}

移动端布局（媒体查询） #

当屏幕宽度小于设定阈值（比如480px），我们调整容器和单元的排列方向，实现移动端的每行图标+文本布局：

@media (max-width: 480px) {
  .layout-container {
    flex-direction: column; /* 三个单元纵向排列 */
    max-width: 189px; /* 和你示例中的移动端表格宽度一致 */
  }

  .content-item {
    flex-direction: row; /* 单元内部横向排列图标和文本 */
    justify-content: space-between; /* 图标和文本均分单元宽度 */
    width: 100%;
    margin-bottom: 12px; /* 给每行添加一点间距，提升可读性 */
  }

  .icon-block, .text-block {
    width: 48%; /* 每个元素占单元的一半左右宽度 */
  }
}

效果验证 #

• 桌面端：三个content-item横向并排，每个单元内图标在上、文本在下，整体呈现图标一行、文本一行的布局，和你给出的桌面表格效果完全一致。
• 移动端：三个content-item纵向排列，每个单元内图标和文本横向并排，形成每行一个图标+对应文本的三行布局，完美匹配你的移动端需求。

这种方案不仅实现了需求，还比表格布局更易维护、扩展性更强——比如后续要添加第四个图标+文本，只需要新增一个content-item即可，不需要修改样式。

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