语法如下:
.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