# CSS - Flex ###### tags: `HTML-CSS` ## 前言 ### (一) . Flex屬性分成兩大類 ： 外容器和內物件 1. Flex物件的組成 : 內外各有不同的屬性可以設定，若設定錯誤，flex沒辦法正常運作。 ![](https://i.imgur.com/o6rmEBU.png =450x) 3. 外容器屬性 ： - display : 需設定為flex才可以為外容器。 - flex-direction : 設定主軸和交錯軸。 - flex-wrap : 設定超過外容器時，是否換行。 - justify-content : 內元件對主軸的排版 - align-item : 內元件對交錯軸的排版。 4. 內容器屬性 ： - flex : 內元素如何分配父元素的長寬。 - order。 - align-self。 ### (二) . 外容器的重點 1. 設定交錯軸、主軸方向。 - flex-direction。 - flex-wrap。 2. 設定交錯軸、主軸排版方向。 - justify-content - align-item ## 一 . 外容器 ### (一) . flex屬性 1. 功用 ： 需設定此屬性後，才可以繼續設定其他屬於外容器的屬性。 2. 語法 ： 在display屬性中設定flex的值。 ```css= .container{ display:flex; } ``` ### (二) . flex-direction 屬性 1. 功用 ： 設定flex外容器的主軸方向 2. 主軸、交錯軸 ： 內元建會先填滿交錯軸方向，再向主軸延伸。 - 主軸是```row```。 - 交錯軸是```col```。 ![](https://i.imgur.com/z0Pf6lz.png =400x) 3. 語法 ： 在flex-direction屬性設定。 - column、column-reserve 。 - row、row-reserve 。 ```css= .container{ display:flex; flex-direction:row; } ``` ![](https://i.imgur.com/bo6bwvo.png =500x) ### (三) . flex-wrap 屬性 1. 功用 ： 當子元件總寬超過父元件總寬時，要做的行為。 - wrap : - nowrap : 不換行(所以超過時，子元素會直接爆出父元素) - wrap-reverse : 換行時換邊(主軸方向變換)。 2. 語法 ： 設定```flex-wrap```屬性。 ```css= .container{ display:flex; flex-direction: row; flex-wrap: wrap; } ``` ### (四) . justify-content 屬性 1. 功用 ： 主軸對齊的設定。 - center : 主軸置中對齊。 - flex-start : 主軸靠起點對齊。 - flex-end : 主軸靠終點對齊。 - space-between : 終起點都有東西，平分空白。 - space-around : 終起點都沒有東西，平分空白。 ![](https://i.imgur.com/PaMi0y1.png =400x) 2. 語法 ： 設定```justify-content```屬性。 ```css= .container{ display:flex; justify-content: center; } ``` ### (五) . align-items屬性 1. 功用 ： 交錯軸的對齊 - center : 交錯軸置中對齊。 - flex-start : 交錯軸靠起點對齊。 - flex-end : 交錯軸靠終點對齊。 - space-between : 終起點都有東西，平分空白。 - space-around : 終起點都沒有東西，平分空白。 - stretch : 填滿父元素的大小。 ![](https://i.imgur.com/Ry0ysau.png =400x) 2. 語法 ： 設定```align-items```屬性。 ```css= .container{ display : flex; align-items : center; } ``` 3. 使用注意 ： - 預設的屬性值為```stretch```，**若要改動，需要注意，此時的高度會隨著內文變化，不會都是滿的**。 ## 二 . 內元素 ### (一) . flex屬性 1. 功用 ： 設定內元素如何分配外容器的寬度。 - 內元素的高度是由內元素內容決定，若預設下，是填滿外容器的。 - 內元素的高度 ： 內容或align-items決定。 - 內元素的寬度 ： 由flex的屬性決定。 2. flex-grow屬性 ： 代表元素得伸展性，分配剩餘的寬度。 - **不包含已經使用的固定部分**。 - 依照flex-grow的比重分配剩餘的父元件空白。 ```htmlmixed= <style> .container:{ display:flex; width:800px; height: 500px; } .grow-1{ flex-grow:1; width:200px; box-sizing:border-box; } .grow-2{ flex-grow:2; box-sizing:border-box; } </style> <body> <!-- 外容器共800px ---> <div class="container"> <!-- 內元素佔200px ---> <div class="grow-1"> <!-- 剩餘的600px為剩餘空間 ---> </div> <div class="grow-2"> <!-- 總共比重：1+2+2=5 ---> </div> <div class="grow-2"> <!-- grow-2: 600*0.4=240---> </div> <!-- grow-1: 600*0.2=120---> </div> </body> ``` 3. flex-shrink屬性 ： 代表元素的伸縮性，分配多出來的寬度。 - 會直接減去有flex-shrink屬性的寬度。 - 沒有設定flex-shrink下，會直接爆開，因為不會縮小。 ```htmlmixed= <style> .container:{ display:flex; width:600px; height: 300px; } .shrink-1{ flex-shrink:1; } .shrink-1{ flex-shrink:2; } .w-250{ width:250px; } </style> <body> <div class="container"> <div class="w-250"></div> <div class="w-250 shrink-1"></div> <div class="w-250 shrink-2"></div> </div> </body> ``` ![](https://i.imgur.com/HS0qxaI.png =550x) ### (二) . align-self屬性 1. 功用 ： 不用繼承父容器的align-items屬性，可以自己設定對交錯軸得排版。 2. 語法 ： ```css= .items{ align-self:flex-end; } ``` # CSS-flex的使用技巧 ### 一 . 在內元素也設定外容器屬性，作為文字排版 ： 文字置中 1. 若內元素要只表示文字，且要位於中央時，可以在內元素設定 ： ```css= .items{ display:flex; justify-content: center; align-items: center; } ``` 2. 因為只有文字下，只有一個block位於內元素中，因此，用主軸和交錯軸的排版可以快速使文字至中。