CSS3 Flex Box - Part 4
簡介
在彈性容器中 (flex container) 排列各彈性元件 (flex item) 時，預設都是以彈性元件在 DOM tree 中平輩的前後次序，依序排列。但在彈性元件中設定屬性 order 卻可以改變彈性元件的排列次序。
- order
- 這是個設定在彈性元件中的屬性，賦予值為一無單位的數值，可以為負值，預設值為 0。若為負值，負數愈大的彈性元件則愈先排列；若為正值，正數愈大的彈性元件則愈晚排列。具有相同的數值的彈性元件，則依 DOM tree 中平輩的先後次序排列。與其說 order 設定了彈性元件的排列先後次序，不如說 order 設定了彈性元件的先後排列權值。彈性容器先分析所有彈性元件的權值，依權值分成群組，再依權值由高至底，將每一個群組中的彈性元件依其在 DOM tree 中平輩的先後次序排列，一直到所有的權值群組都排列完畢為止。
範例
範例中建立一個含有七個彈性元件的彈性容器，每個彈性元件依照其在 DOM tree 中平輩的次序標號，但在其 CSS 類別中設定 order 屬性以改變其排列的先後次序。可以試著改變 order 的設定值，以瞭解其排列的規則。
CSS
<style>
html {
width:100%;
height:auto;
font:normal normal normal 1em Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei';
}
body {
margin: 0 auto;
width: 800px;
padding:20px;
}
.container {
display: flex;
flex-direction:row;
width: 400px;
padding:20px;
background-color: lightgreen;
}
.basis {
width:40px;
height:40px;
border: 1px solid black;
background-color: coral;
}
.center {
display:flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.item_1 {
order:0;
}
.item_2 {
order:0;
}
.item_3 {
order:2;
}
.item_4 {
order:-1;
}
.item_5 {
order:2;
}
.item_6 {
order:-2;
}
.item_7 {
order:1;
}
</style>
.container{} 設定了彈性容器的外觀、尺寸及基本的排列方式。
.basis{} 設定了各彈性元件的外觀及尺寸。
.center{} 將彈性元件的編號置於元件中央。
.item_*{} 則為各彈性元件設定 order 屬性，決定其排列時的權值。
HTML
<body>
1
2
3
4
5
6
7
</body>
HTML 中依編號的次序建立七個彈性元件，如果沒有在彈性元件中設定 order 屬性，則應編號的次序排列。
沒有留言:
張貼留言