Flex布局竖屏时4张图片排成4行 需实现横竖屏均单行显示

竖屏状态下图片逐行堆叠，核心原因是你写的max-width: 800px媒体查询规则：

• 绝大多数手机竖屏的可视宽度都小于800px，会触发这条媒体查询，把flex容器的排列方向改成垂直方向（column），子项自然就上下堆叠起来。
• 之前你改媒体查询里的flex-direction为row没生效，一般是浏览器缓存了旧CSS、选择器优先级被其他规则覆盖导致的；另外原代码里写了flex-wrap: wrap，如果子元素总宽度超过容器宽度，就算方向是横向也会自动折行。

1. 改掉媒体查询里强制垂直排列的规则，保证小屏下flex也是横向排列
2. 把flex容器的换行规则改成不换行，避免宽度不足时自动折行
3. 可选：给flex子项加不收缩属性，避免图片被挤压变形

最终可用代码 #

HTML部分（无需修改，保持原有结构即可） #

<div class="flex-container">
    <div><img class="item" src="/images/personnel/person1.jpg" alt="pic1" style="width:auto;height:70px;"></div>
    <div><img class="item" src="/images/personnel/person2.jpg" alt="pic2" style="width:auto;height:70px;"></div>
    <div><img class="item" src="/images/personnel/person3.jpg" alt="pic3" style="width:auto;height:70px;"></div>
    <div><img class="item" src="/images/personnel/person4.jpg" alt="pic4" style="width:auto;height:70px;"></div>
</div>

修改后的CSS #

.flex-container {
  display: flex;
  background-color: rgb(220, 235, 250);
  flex-direction: row;
  /* 核心修改：禁止换行，强制所有子项在同一行 */
  flex-wrap: nowrap;
  justify-content: space-between;
  /* 单行场景垂直居中对齐用align-items，原代码写的align-content仅对多行flex生效 */
  align-items: center;
  padding: 5px;
} 

@media (max-width: 800px) {
  .flex-container {
    /* 小屏也强制横向排列 */
    flex-direction: row;
    flex-wrap: nowrap;
  }
  /* 可选：防止图片被挤压变形，如果觉得太挤可以把图片高度调小，比如改成50px */
  .flex-container > div {
    flex-shrink: 0;
  }
}

修改完成后清空浏览器缓存再刷新页面，无论横屏竖屏4张图片都会固定在同一行横向排列。

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