什么是 Flexbox？
Flexbox 是 CSS3 中的一种布局模式，它可以让我们更轻松地实现复杂的布局效果，特别是在移动设备上。
Flexbox 的主要思想是让容器能够自适应其内部元素，从而实现灵活的布局。Flexbox 中有一些关键的概念，包括容器、项目、主轴、交叉轴等等。
order 属性是什么？
order 属性是 Flexbox 中的一个非常重要的属性，它可以用来改变项目的顺序。
默认情况下，Flexbox 中的项目按照其在 HTML 中出现的顺序排列。但是，通过设置 order 属性，我们可以改变项目的顺序。
order 属性的语法
order 属性可以取任何整数值，默认值为 0。值越小，项目就越靠前。如果多个项目的 order 属性值相同，它们将按照它们在 HTML 中出现的顺序排列。
.item {
order: <number>;
}order 属性的示例
下面是一个简单的 Flexbox 布局示例，其中包含了 4 个项目：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
.container {
display: flex;
}默认情况下，这 4 个项目按照它们在 HTML 中出现的顺序排列。现在，我们给第一个项目设置一个 order 属性值为 3，将第三个项目移动到第一个项目的后面：
.item:first-child {
order: 3;
}这时，第一个项目就会被移动到最后，第三个项目会出现在第一个项目的后面。
order 属性的指导意义
order 属性的使用可以帮助我们更好地控制 Flexbox 布局中项目的顺序，从而实现更复杂的布局效果。例如，我们可以根据不同的屏幕尺寸，改变项目的顺序，以便更好地适应不同的设备。
另外，order 属性还可以用来实现动画效果。通过改变项目的 order 属性值，我们可以实现项目的移动、旋转、缩放等效果。
总结
在 Flexbox 中，order 属性可以用来改变项目的顺序。它的语法非常简单，只需要设置一个整数值即可。通过使用 order 属性，我们可以更好地控制 Flexbox 布局中项目的顺序，实现更复杂的布局效果和动画效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656fe4a8d2f5e1655d866243