flex#4 flex-order

說明

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

order為正數時:會排到右邊

.container
  display: flex

.box
  flex: 1 // 填滿一行

.box3
  order: 1

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

order為負數時:會排到左邊

.container
  display: flex

.box
  flex: 1 // 填滿一行

.box3
  order: -1

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

flex#3 flex-wrap

flex-wrap: nowrap (預設)

不拆行(所有flex item擠在一排裡面)
即便指定了寬度,flex container也會以擠在一起為原則,盡量達成指定的寬度

.container
  display: flex
  border: 10px solid goldenrod
  flex-wrap: nowrap
 
.box
  color: white
  font-size: 100px
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 300px
1
2
3
4
5
6
7
8
9
10

flex-wrap: wrap

拆行(flex item超過寬度的話會掉下來)
會遵守width

.container
  display: flex
  border: 10px solid goldenrod
  flex-wrap: wrap
 
.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 300px
1
2
3
4
5
6
7
8
9
10

flex-wrap: wrap-reverse

反轉cross-axis
本來是由上到下↓↓↓
現變成由下到上↑↑↑

.container
  display: flex
  border: 10px solid goldenrod
  flex-wrap: wrap-reverse
 
.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 300px
1
2
3
4
5
6
7
8
9
10

讓flex-item可以無縫填滿外層

  • 寬度算好
  • 使用box-sizing: border-box
.container
  display: flex
  border: 10px solid goldenrod
  flex-wrap: wrap
 
.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  box-sizing: border-box
  width: 33.33%
1
2
3
4
5
6
7
8
9
10

flex-item之間留個空隙

  • 空隙用margin指定
  • 寬度用calc算好
.container
  display: flex
  border: 10px solid goldenrod
  flex-wrap: wrap
 
.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  margin: 10px
  box-sizing: border-box
  width: calc(33.33% - 20px)
1
2
3
4
5
6
7
8
9
10