移动端Flex布局横向滚动区块元素顺序反转实现方法

嘿，这个需求用Flexbox就能轻松搞定，根据你具体的需求（是反转整个列表顺序，还是只把第一个元素移到最后），有两种实用的方案：

方案1：反转整个Flex排列方向（适合完全颠倒元素顺序） #

如果想要把所有元素的顺序彻底反转（比如原本是 元素1 → 元素2 → 元素3，变成 元素3 → 元素2 → 元素1），直接给你的flex容器添加 flex-direction: row-reverse; 属性就行，同时保留横向滚动的设置：

/* 你的滚动容器样式 */
.scroll-block {
  display: flex;
  overflow-x: auto; /* 保持横向滚动能力 */
  flex-direction: row-reverse; /* 核心：反转排列方向 */
}

这个属性会直接改变Flex的主轴方向，从默认的从左到右，变成从右到左排列元素，自然就实现了顺序反转。需要注意的是，设置后滚动的起始逻辑也会跟着反转——初始状态下会显示原本最右侧的元素，滚动方向会变成向右滚动查看更多内容，如果想要保持原来的滚动体验（初始显示左侧，向左滚动），可以再加一个 justify-content: flex-end;，让容器内的元素靠右侧对齐：

.scroll-block {
  display: flex;
  overflow-x: auto;
  flex-direction: row-reverse;
  justify-content: flex-end; /* 保持初始显示区域和原滚动方向一致 */
}

方案2：单独调整目标元素的order（适合只移动单个元素） #

如果你只需要把最左侧的元素移到最右侧，其他元素顺序保持不变（比如 元素1 → 元素2 → 元素3 变成 元素2 → 元素3 → 元素1），用Flex的 order 属性更灵活：

默认情况下，所有Flex子元素的 order 值都是0，我们给目标元素设置一个更大的数值（比如1），它就会排在所有默认order的元素后面：

/* 滚动容器样式不变 */
.scroll-block {
  display: flex;
  overflow-x: auto;
}

/* 给原本最左侧的元素设置order */
.scroll-block > .first-element {
  order: 1; /* 大于默认的0，会被排到最后 */
}

这种方法不会改变整个容器的排列方向，只是调整单个元素的位置，滚动逻辑也和原来完全一致，适合不需要完全反转列表的场景。

两种方案在移动端浏览器的兼容性都很好，放心用就行～

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