flex#8 align-self

說明

  • align-items指定全體的flex item沿著cross-axis對齊情況
  • align-self指定個別的flex item沿著cross-axis對齊情況(可以覆蓋align-items的指定)

align-self: auto (default)

預設值:不指定(繼承align-items)

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  align-items: baseline //指定整體

.box2
  padding-bottom: 200px
.box6
  padding-bottom: 0
.box9
  padding-bottom: 50px
  align-self: auto
1
2
3
4
5
6
7
8
9
10

align-self: flex-end

對齊cross-axis的底部
現在cross是由上至下↓↓↓,所以是靠下對齊

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  align-items: baseline //指定整體

.box2
  padding-bottom: 200px
.box6
  padding-bottom: 0
.box9
  padding-bottom: 50px
  align-self: flex-end
1
2
3
4
5
6
7
8
9
10

align-self: flex-end

對齊cross-axis的中部
現在cross是由上至下↓↓↓,所以是靠中對齊

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  align-items: baseline //指定整體

.box2
  padding-bottom: 200px
.box6
  padding-bottom: 0
.box9
  padding-bottom: 50px
  align-self: flex-end
1
2
3
4
5
6
7
8
9
10

align-self: baseline

對齊cross-axis的上部
現在cross是由上至下↓↓↓,所以是靠上對齊

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  align-items: baseline //指定整體

.box2
  padding-bottom: 200px
.box6
  padding-bottom: 0
.box9
  padding-bottom: 50px
  align-self: flex-end
1
2
3
4
5
6
7
8
9
10

發佈留言

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