如何仅通过CSS调整Flexbox子元素的排列顺序？

完全可以，Flexbox布局自带的order属性就是用来干这个的，不用改动HTML结构就能调整子元素的排列顺序。

关于order属性的核心要点： #

• 默认情况下，所有Flex子元素的order值都是0，此时元素会按照它们在HTML里的原始顺序排列
• 你可以给子元素设置任意整数值（正数、负数都支持），数值越小，元素在Flex容器里的位置越靠前

修正后的示例代码（原示例里的flex-order是错误写法，正确属性名是order）： #

<div style="display: flex;">
  <div>flex 2</div>
  <div>flex 3</div>
  <div style="order: -1;">flex 1</div>
</div>

这段代码运行后，原本在HTML里排最后的flex 1会因为order: -1（比默认值0小）被放到最前面，最终显示顺序为：flex 1 → flex 2 → flex 3。

内容的提问来源于stack exchange，提问作者Visir MG Entertainment