說明

• 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

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

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

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