2020-06-03 前端工程師 Ally Chen [CSS] 網頁設計教學超入門：網頁排版的方式-flexbox篇
父容器屬性：決定子元素排列方式
第一步要建立的是display屬性為flex或inline-flex（效果同inline-block，本身有inline特性）的父容器。
賦有flex屬性的容器，子元素的寬度都會被壓縮成內容的寬度，高度則會延展父容器的空間（這是因為預設align-items屬性為stretch）。
.flex-container
p1
p2
p3
p4
flex-direction
決定子元素的排列方向。預設為row（橫向左->右），另外分別有row-reverse（橫向右->左）、column（縱向上->下）、column-reverse（縱向下->上）。
flex-direction:row
1
2
3
flex-direction:row-reverse
1
2
3
flex-direction:column
1
2
3
flex-direction:column-reverse
1
2
3
flex-wrap
決定子元素是否換行，預設為nowrap（不換行）。
flex-wrap:nowrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
flex-wrap:wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
flex-flow
flex-direction與flex-wrap的簡式。
flex-flow: {flex-direction} {flex-wrap}
justify-content
決定子元素平行於主軸（flex-direction）的對齊方式（預設為水平對齊方式，反之如果flex-direction是column，則是決定子元素的垂直對齊方式），預設為flex-start。
justify-content: flex-start /* 對齊容器方向的起點 */
1
2
3
justify-content: center /* 置中 */
1
2
3
justify-content: flex-end /* 對齊容器方向的終點 */
1
2
3
justify-content: space-between /* 均分空間至元素間 */
1
2
3
justify-content: space-around /* 均分空間至頭、尾、元素間 */
1
2
3
align-items
決定子元素垂直於主軸（flex-direction）的對齊方式，預設為stretch。
align-items: flex-start /* 對齊容器方向的起點 */
1
2
3
align-items: center /* 置中 */
1
2
3
align-items: flex-end /* 對齊容器方向的終點 */
1
2
3
align-items: stretch /* 延展至容器 */
1
2
3
align-items: baseline /* 對齊子元素基準線 */
1
2
3
align-content
當子元素有多行的時候（flex-wrap屬性必須為wrap），決定子元素垂直於主軸（flex-direction）的對齊方式，預設為stretch。
基本與align-items一樣，而多行的時候因為有行與行之間的距離，所以多了 space-around 與 space-between 兩種方式。
align-content: space-between /* 對齊容器方向的起點 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-around /* 置中 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
子元素屬性：決定自身(子元素)排列方式與樣式
order
決定自身在容器中的排列順序，預設皆為0，所以會根據網頁DOM順序排列下去，數值越大則排序越後面。
1 (order:3)
2 (default)
3 (order:2)
4 (default)
flex-grow
決定自身長度延展的倍數，會根據同一個容器中的子元素之flex-grow值作計算，預設為0。延展的空間為容器剩餘的所有空間。
1 (flex-grow:1)
2 (default)
3 (default)
4 (default)
因為預設為0，所以若容器中只有一個子元素設定大於 0 的 flex-grow 值，就會佔滿剩餘空間。
1 (flex-grow:1)
2 (default)
3 (flex-grow:2)
4 (default)
由子元素1和子元素3來佔滿容器，分別比例為1:2。
flex-shrink
與 flex-grow 相反，flex-shrink是當元素佔滿容器的時候，決定自身長度收縮的程度，數值越高，收縮比例越大，預設為1。（這個屬性要在父元素flex-wrap為nowrap的情況下才有效果）
1 (flex-shrink:0)
2 (default)
3 (flex-shrink:2)
4 (default)
5 (default)
6 (default)
7 (default)
8 (default)
（以上子元素預設寬度為150px，當flex-shrink值為0時才會維持原本寬度）
flex-basis
設定自身的起始長度，可能會因父容器nowrap與自身shrink值而改變長度。
1 (flex-basis:250px)
2 (default)
3 (default)
4 (default)
flex
flex-grow, flex-shrink 與 flex-basis 的簡式。
flex: {flex-grow} {flex-shrink} {flex-basis}
align-self
決定自身垂直於主軸（flex-direction）的對齊方式，會覆寫父元素 align-items 的值。
1
2 (align-self: flex-end)
4 (align-self: flex-start)
4 (align-self: center)
---------------------
了解flexbox的各項屬性後，在網頁Layout的處理上就更容易了！
大家可以多多嘗試，就會發現它的好用之處。
也可以到 這裡 作練習唷！