如何在移动端视图下让flex布局的元素实现堆叠效果

你需要通过CSS媒体查询，在移动端视口宽度下修改flex容器的排列方向，同时调整移动端下的元素尺寸避免溢出，具体修改如下：

完整修改后的CSS代码 #

.row {
  display: flex;
}

.column {
  padding: 200px;
  text-align: center;
  flex: 10%;
}

.column img {
  border-radius: 50%;
  width: 300px;
  border: 2px solid white;
}

.column p {
  color: white;
  padding-top: 50px;
  font-size: 24px;
}

.partners-h1 p {
  font-family: "BatmanForeverAlternate";
  font-size-adjust: 10px;
  color: white;
}

.partners-h1 {
  text-align: center;
  font-size: 30px;
}

/* added for demonstration purpose by editor */
body {
  background-color: black;
}

/* 新增移动端响应式代码 */
@media (max-width: 768px) {
  .row {
    /* 修改flex排列方向为垂直堆叠 */
    flex-direction: column;
  }
  .column {
    /* 调整移动端内边距，避免两边留白过多 */
    padding: 50px 20px;
  }
  .column img {
    /* 图片改成自适应宽度，避免小屏溢出 */
    width: 80%;
    max-width: 300px;
  }
  .column p {
    /* 移动端字体缩小适配 */
    font-size: 18px;
    padding-top: 20px;
  }
  .partners-h1 {
    font-size: 24px;
  }
}

改动说明 #

• 断点选择：768px是通用的平板/移动端分界阈值，你可以根据自己的实际布局需求调整这个数值，比如要只在小屏手机触发可以改成480px
• 核心逻辑：flex-direction: column会让原来横向排列的flex子元素改为垂直方向堆叠，实现你要的移动端排列效果
• 尺寸适配：原来的固定内边距、图片宽度、字体大小在移动端会超出屏幕，所以修改为相对值或者更小的固定值，保证展示正常
• 优先级注意：新增的媒体查询代码要放在所有原有CSS规则的后面，保证移动端样式可以覆盖桌面端样式

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