CSS - Flex - HackMD

# 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>  <div class="container">  <div class="grow-1">  </div> <div class="grow-2">  </div> <div class="grow-2">  </div>  </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位於內元素中，因此，用主軸和交錯軸的排版可以快速使文字至中。