order
属性定义项目的排列顺序。
数值越小,排列越靠前,默认为0。
语法
.item {
order: <integer>; /* 整数值,默认值是 0 */
}
可以通过设置 order
来改变某一个 flex
子项的排序位置。如果想要某一个 flex
子项在最前面显示,可以设置比0小的整数,如-1就可以了。
正常不设置 order
,实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: flex;
margin: 0px auto;
width: 300px;
height: 100px;
background-color