order 属性是Flexbox布局中用于指定弹性容器中弹性项目的排列顺序的属性。这个属性决定了一个弹性项目在弹性容器中的位置。

语法如下:
.flex-item {
    order: <integer>;
}

其中,.flex-item 是弹性容器中的一个弹性项目,<integer> 是一个整数值,表示项目的排列顺序。默认情况下,所有项目的 order 值为 0。值越小,项目在弹性容器中的位置越靠前。

举个例子,如果你有以下的HTML结构和CSS样式:
<div class="flex-container">
    <div class="flex-item" style="order: 2;">Item 1</div>
    <div class="flex-item" style="order: 1;">Item 2</div>
    <div class="flex-item" style="order: 3;">Item 3</div>
</div>

那么,根据 order 属性,"Item 2" 将在弹性容器中排在最前面,然后是 "Item 1",最后是 "Item 3"。这改变了它们在HTML中的顺序,但在渲染时,它们按照 order 属性的值进行排序。


转载请注明出处:http://www.zyzy.cn/article/detail/4221/CSS