熟悉 CSS Flex Box 的使用

[1] CSS Flex Box 彈性框的概念


參考:MDN Web DocW3C CSS Flexible Box

 

參考網站: [圖示說明] CSS TRICKS[線上測試工具] FLEXY BOXES

 

ID 應用於 屬性名稱 說明 屬性值 說明網 範例網
1 container display 彈性框的模式 flex | inline-flex
2 container flex-direction 內容項目排列方向 row | row-reverse | column | column-reverse w3s w3s
3 container justify-content 內容項目水平對齊方式 flex-start | flex-end | center | space-between | space-around w3s w3s
4 container align-items 內容項目垂直對齊方式(文字為主) stretch | center | flex-start | flex-end | baseline  w3s w3s
5 container align-content 內容項目垂直對齊方式(框架為主) stretch | center | flex-start | flex-end | space-between | space-around w3s w3s
6 container flex-wrap 內容項目是否換行 nowrap | wrap | wrap-reverse w3s w3s
7 container flex-flow 內容項目排列順序與方向 flex-direction flex-wrap w3s w3s
8 item  order 內容項目指定排列順序 number w3s w3s
9 item  flex-grow 指定項目的寬度放大倍數 number w3s w3s
10 item  flex-shrink 指定項目的寬度縮小倍數 number w3s w3s
11 item  flex-basis 指定項目的寬度(px) number w3s
12 item  flex 指定項目的寬度指定方式 0 | 1 | flex-grow flex-shrink flex-basis | aut w3s
13 item  align-self 指定項目的垂直對齊方式 auto | stretch | center | flex-start | flex-end | baseline w3s w3s

[2] display 指定顯示模式 : flex | inline-flex

ID 應用於 屬性名稱 說明 屬性值 詳細說明
1 container display 彈性框的模式 flex 雷同於 block 的彈性框
2       inline-flex 雷同於 inline-block 的彈性框

[ 範例 ] 框架1 --- display:flex

Item1
Item2 Item2
Item3 Item3 Item3

[ 範例 ] 框架2 --- display:inline-flex

Item1
Item2 Item2
Item3 Item3 Item3

[3] flex-direction 內容項目排列方向 : row | row-reverse | column | column-reverse | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
3 container flex-direction 內容項目排列方向 row 讓內容項目由左至右橫向排版 w3s w3s
4       row-reverse 讓內容項目由右至左橫向排版    
5       column 讓內容項目由上至下縱向排版    
6       column-reverse 讓內容項目由下至上縱向排版    
7       initial (初始預設) 同 row    

[範例] 框架3 --- flex-direction: row 讓內容項目由左至右橫向排版

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架4 --- flex-direction: row-reverse 讓內容項目由右至左橫向排版

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架5 --- flex-direction: column 讓內容項目由上至下縱向排版

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架6 --- flex-direction: column-reverse 讓內容項目由下至上縱向排版

Item1
Item2 Item2
Item3 Item3 Item3

[4] justify-content 內容項目水平對齊方式 : flex-start | flex-end | center | space-between | space-around | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
8 container justify-content 內容項目水平對齊方式 flex-start 整個內容靠左(項目由左至右) w3s w3s
9       flex-end 整個內容靠右(項目由左至右)    
10       center 整個內容置中對齊    
11       space-between 讓內容項目分散對齊    
12       space-around 讓內容項目等距分佈(左右有margin)    
13       initial (初始預設) 同 flex-start    

[範例] 框架8 --- justify-content: flex-start 整個內容靠左(項目由左至右)

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架9 --- justify-content: flex-end 整個內容靠右(項目由左至右)

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架10 --- justify-content: center 整個內容置中對齊

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架11 --- justify-content: space-between 讓內容項目分散對齊

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架12 --- justify-content: space-around 讓內容項目等距分佈(左右有margin)

Item1
Item2 Item2
Item3 Item3 Item3

[5] align-items 內容項目垂直對齊方式(文字為主) : stretch | center | flex-start | flex-end | baseline | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
14 container align-items 內容項目垂直對齊方式(文字為主) stretch 內容項目與外層同高 w3s w3s
15       center 內容項目垂直置中對齊    
16       flex-start 內容項目垂直靠上對齊    
17       flex-end 內容項目垂直靠下對齊    
18       baseline 內容項目依文字基底線對齊    
19       initial (初始預設) 同 stretch    

[範例] 框架14 --- align-items: stretch 內容項目與外層同高

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架15 --- align-items: center 內容項目垂直置中對齊

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架16 --- align-items: flex-start 內容項目垂直靠上對齊

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架17 --- align-items: flex-end 內容項目垂直靠下對齊

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架18 --- align-items: baseline 內容項目依文字基底線對齊

Item1
Item2 Item2
Item3 Item3 Item3

[6] align-content 內容項目垂直對齊方式(框架為主) : stretch | center | flex-start | flex-end | space-between | space-around | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
20 container align-content 內容項目垂直對齊方式(框架為主) stretch 內容項目垂直平均分散(含margin-bottom) w3s w3s
21       center 內容項目垂直置中(不含margin)    
22       flex-start 內容項目垂直靠上(不含margin)    
23       flex-end 內容項目垂直靠下(不含margin)    
24       space-between 內容項目垂直分散對齊(不含margin)    
25       space-around 讓內容項目垂直等距分佈(上下有margin)    
26       initial (初始預設) 同 stretch    

[範例] 框架20 --- align-content: stretch; 內容項目垂直平均分散(含margin-bottom)

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[範例] 框架21 --- align-content: center; 內容項目垂直置中(不含margin)

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[範例] 框架22 --- align-content: flex-start; 內容項目垂直靠上(不含margin)

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[範例] 框架23 --- align-content: flex-end; 內容項目垂直靠下(不含margin)

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[範例] 框架24 --- align-content: space-between; 內容項目垂直分散對齊(不含margin)

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[範例] 框架25 --- align-content: space-around; 讓內容項目垂直等距分佈(上下有margin)

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[7] flex-wrap --- 內容項目依寬度指定是否換行: nowrap | wrap | wrap-reverse | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
27 container flex-wrap 內容項目是否換行 nowrap 內容項目排在同一列不換行 w3s w3s
28       wrap 內容項目依項目寬度可以換行    
29       wrap-reverse 內容項目依項目寬度可以換行但由左下往右上排列    
30       initial (初始預設) 同 nowrap    

[範例] 框架27 --- flex-wrap: nowrap; 內容項目排在同一列不換行

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[範例] 框架28 --- flex-wrap: wrap; 內容項目依項目寬度可以換行

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[範例] 框架29 --- flex-wrap: wrap-reverse; 內容項目依項目寬度可以換行但由左下往右上排列

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

[8] flex-flow --- 內容項目排列順序與方向: flex-direction flex-wrap | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
31 container flex-flow 內容項目排列順序與方向 row nowrap 水平排列由左至右不換行 w3s w3s
32       row-reverse nowrap 水平排列由右至左不換行    
33       column nowrap 垂直排列由上至下不換行    
34       column-reverse nowrap 垂直排列由下至上不換行    
35       row wrap 由左至右, 再往下換行    
36       row-reverse wrap 由右至左, 再往下換行    
37       column wrap 由上至下, 再往右換行    
38       column-reverse wrap 由下至上, 再往右換行    
39       row wrap-reverse 由左至右, 再往上換行    
40       row-reverse wrap-reverse 由右至左, 再往上換行    
41       column wrap-reverse 由上往下, 再往左換行    
42       column-reverse wrap-reverse 由下往上, 再往左換行    
43       initial (初始預設) 同 row nowrap    

[9] order --- 內容項目指定排列順序: number | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
44 item  order 內容項目指定排列順序 number    w3s w3s

[範例] 框架44 --- order: number 內容項目指定排列順序

Item1
Item2
Item3
Item4
Item5

[10] flex-grow --- 指定項目的寬度放大倍數: number | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
45 item  flex-grow 指定項目的寬度放大倍數 number    w3s w3s

[11] flex-shrink --- 指定項目的寬度縮小倍數: number | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
46 item  flex-shrink 指定項目的寬度縮小倍數 number    w3s w3s

[12] flex-basis --- 指定項目的寬度(px): number | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
47 item  flex-basis 指定項目的寬度(px) number    w3s w3s

[13] flex --- 指定項目的寬度指定方式: 0 | 1 | flex-grow flex-shrink flex-basis | auto | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
48 item  flex 指定項目的寬度指定方式 0 依內容決定寬度 w3s  
49       1 內容項目平均寬度佔滿外層空間    
50       auto  依內容分配寬度比例佔滿外層空間    
51       initial (初始預設) 同 auto     

[範例] 框架48 --- flex: 0 依內容決定寬度

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架49 --- flex: 1 內容項目平均寬度佔滿外層空間

Item1
Item2 Item2
Item3 Item3 Item3

[範例] 框架50 --- flex: auto 依內容分配寬度比例佔滿外層空間

Item1
Item2 Item2
Item3 Item3 Item3 Item3

[14] align-self --- 指定項目的垂直對齊方式: auto | stretch | center | flex-start | flex-end | baseline | initial

ID 應用於 屬性名稱 說明 屬性值 詳細說明 說明網 範例網
52 item  align-self 指定項目的垂直對齊方式 auto 垂直置中(區塊中央) w3s w3s
53       flex-start 垂直靠上    
54       flex-end 垂直靠下    
55       stretch 高度佔滿外層區塊    
56       baseline 文字基底線對齊    
57       center 垂直置中(區塊中央)    
58       initial (初始預設) 同 auto     

[範例] 框架52 --- align-self: auto 垂直置中(區塊中央)

Item1
Item2 Item2
Item3 Item3 Item3 Item3

[範例] 框架53 --- align-self: stretch 高度佔滿外層區塊

Item1
Item2 Item2
Item3 Item3 Item3 Item3

[範例] 框架54 --- align-self: center 垂直置中(區塊中央)

Item1
Item2 Item2
Item3 Item3 Item3 Item3

[範例] 框架55 --- align-self: flex-start 垂直靠上

Item1
Item2 Item2
Item3 Item3 Item3 Item3

[範例] 框架56 --- align-self: flex-end 垂直靠下

Item1
Item2 Item2
Item3 Item3 Item3 Item3

[範例] 框架57 --- align-self: baseline 文字基底線對齊

Item1
Item2 Item2
Item3 Item3 Item3 Item3
Top