# CSS FLEXBOX --- tags: HTML CSS relate --- ###### tags: `HTML, CSS` [參考影片網址](https://www.youtube.com/watch?v=JJSoEo8JSnc&ab_channel=TraversyMedia) ## 優點們: * 沒有 floats * RWD 有 且行動裝置友善 * 定位子層更容易 * Flex's container margin don't collapse with the margin of its contents. * 元素的順序可以簡單地被更改且不需要更改HTML的原始碼 ----- ## Flex properties ![](https://i.imgur.com/fkoCNqt.png) ------ 可以這樣設定一個兩倍寬其它就照比例分下去: ![](https://i.imgur.com/xWjBuL8.png) ![](https://i.imgur.com/hnuUM7k.png) ------------------ 使用order這個屬性後可以讓他們的順序更改: ![](https://i.imgur.com/OqsF1Q0.png) ![](https://i.imgur.com/K6L0n97.png) ---------- ## align-item的應用 ![](https://i.imgur.com/uFzhtqs.png) 下方圖片是 flex-end ![](https://i.imgur.com/Ho2805Y.png) 下方圖片是 flex-start ![](https://i.imgur.com/ghkHKHc.png) 下方圖片是 center ![](https://i.imgur.com/kmacExp.png) ---------------- flex-direction:column 變成垂直 ![](https://i.imgur.com/WUM5rpc.png) -------------- ## justify-content的一些屬性使用 ![](https://i.imgur.com/op8Y6ou.png) 讓欄位偏左可以使用: justify-content: flex-start ![](https://i.imgur.com/oEtYMCV.png) 讓欄位偏右可以使用: justify-content: flex-end ![](https://i.imgur.com/JbMSCVU.png) 讓欄位置中可以使用: justify-content: center ![](https://i.imgur.com/83Yd0Cz.png) 讓欄位中間有空間但是兩邊沒有: justify-content: space-between ![](https://i.imgur.com/VguJOa4.png) 讓欄位兩邊以及中間都有空間: justify-content: space-around ![](https://i.imgur.com/Hy9M4oz.png) --------------- ## 讓物件可以換行使用: flex-wrap:wrap ![](https://i.imgur.com/1G2V2S8.png)