flex#2 flex-direction

flex-direction: row (預設)

main axis: 由左至右 →→→
cross axis: 由上至下 ↓↓↓

.container
  display: flex
  border: 10px solid goldenrod
 flex-direction: row
1
2
3
4
5
6
7
8
9
10

flex-direction: column

main axis: 由上至下 ↓↓↓
cross axis: 由左至右 →→→

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

flex-direction: row-reverse

main axis: 由右至左 ←←←

.container
  display: flex
  border: 10px solid goldenrod
 flex-direction: row-reverse
1
2
3
4
5
6
7
8
9
10

flex-direction: column-reverse

main axis: 由下至上 ↑↑↑

.container
  display: flex
  border: 10px solid goldenrod
 flex-direction: column-reverse
1
2
3
4
5
6
7
8
9
10

發佈留言

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