flex#6 align-items

定義
justify-content會沿著cross-axis對齊

快速複習

  • 【預設】flex-direction: row，cross-axis為由由上至下↓↓↓
  • flex-direction: column，cross-axis為左至右→→→

重點

  • 外層wrapper要有足夠的空間（否則align-items沒空間發揮）
  • 每個item嘗試使用不同的高度（以便看出效果差異）

cross-axis為由上至下時（預設）

align-items: stretch（預設）

效果：填滿

.container
  display: flex
  border: 10px solid mistyrose
  height: 400px
  align-items: stretch

.box1
  font-size: 30px
 
.box3
  font-size: 150px
1
2
3
4
5
6
7
8
9
10

align-items: center

集中在中間

.container
  display: flex
  border: 10px solid mistyrose
  height: 400px
  align-items: center
1
2
3
4
5
6
7
8
9
10

align-items: flex-end

集中於下方

.container
  display: flex
  border: 10px solid mistyrose
  height: 400px
  align-items: flex-end
1
2
3
4
5
6
7
8
9
10

align-items: flex-start

集中於上方（貼齊上緣）

.container
  display: flex
  border: 10px solid mistyrose
  height: 400px
  align-items: flex-start
1
2
3
4
5
6
7
8
9
10

align-items: baseline

集中於上方（items自己置中對齊）

.container
  display: flex
  border: 10px solid mistyrose
  height: 400px
  align-items: baseline
1
2
3
4
5
6
7
8
9
10

cross-axis為由左至右時（flex-direction: column）

align-items: stretch（預設）

填滿

.box
  color: white
  font-size: 20px
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px

.container
  display: flex
  border: 10px solid mistyrose
  flex-direction: column
  align-items: stretch

.box1
  font-size: 30px
 
.box3
  font-size: 40px
 
.box4
  font-size: 50px
1
2
3
4
5
6
7
8
9
10

align-items: center

集中於中間

.container
  display: flex
  border: 10px solid mistyrose
  flex-direction: column
  align-items: center
1
2
3
4
5
6
7
8
9
10

align-items: flex-end

集中於右側（貼齊右側）

.container
  display: flex
  border: 10px solid mistyrose
  flex-direction: column
  align-items: flex-end
1
2
3
4
5
6
7
8
9
10

align-items: flex-start

集中於左側（貼齊左側）

.container
  display: flex
  border: 10px solid mistyrose
  flex-direction: column
  align-items: flex-start
1
2
3
4
5
6
7
8
9
10