flex-order

說明

  • 預設值:order: 0
  • order的數字只具相對意義,order5的會排在order10的前面。但是當頁面上只存在一個order時,給定order1的效力等同於order50
  • 指定order後,畫面上的順序雖然被改變了,但是滑鼠反藍選取的順序依舊會照html排列,所以會看到選取的地方被中斷

order為正數時:會排到右邊

.container
 .box.box1 1
 .box.box2 2
 .box.box3 3
 .box.box4 4
 .box.box5 5
 .box.box6 6
 .box.box7 7
 .box.box8 8
 .box.box9 9
 .box.box10 10
.box
  color: white
  font-size: 100px
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px

.box1
  background: #1abc9c
.box2
  background: #3498db
.box3
  background: #9b59b6
.box4
  background: #34495e
.box5
  background: #f1c40f
.box6
  background: #e67e22
.box7
  background: #e74c3c
.box8
  background: #bdc3c7
.box9
  background: #2ecc71
.box10
  background: #16a085
 
.container
  display: flex

.box
  flex: 1 // 填滿一行

.box3
  order: 1

.box7
  order: 2
1
2
3
4
5
6
7
8
9
10

order為負數時:會排到左邊

.container
 .box.box1 1
 .box.box2 2
 .box.box3 3
 .box.box4 4
 .box.box5 5
 .box.box6 6
 .box.box7 7
 .box.box8 8
 .box.box9 9
 .box.box10 10
.box
  color: white
  font-size: 100px
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px

.box1
  background: #1abc9c
.box2
  background: #3498db
.box3
  background: #9b59b6
.box4
  background: #34495e
.box5
  background: #f1c40f
.box6
  background: #e67e22
.box7
  background: #e74c3c
.box8
  background: #bdc3c7
.box9
  background: #2ecc71
.box10
  background: #16a085
 
.container
  display: flex

.box
  flex: 1 // 填滿一行

.box3
  order: 1

.box7
  order: 2
1
2
3
4
5
6
7
8
9
10

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *