Flex排版教學整理
前言：Flex的出現幫助我們可以更方便的進行網頁排版，我們可以透過 can i use 這個網站發現，Flex有良好的兼容性(超過九成網站都有支援)，而一開始學習Flex的時候建議大家可以一步步將每個範例跟練習實做一遍，如此才會更快上手喔~~ 接著我們就開始Flex介紹吧! Flex 中分為外容器與內元件(如下圖)，並靠調整外容器、內元件屬性達成以下常見目的： 1.垂直置中 2.水平置中 3. 三欄內容不等高，但希望外框顯示為等高 父元素設定display:flex 4.三個物件水平等距排列(數值彈性) justify-content:space-around 補充：flex各種預設值 flex-direction：row justify-content：flex-start align-items：stretch flex-wrap：nowrap flex-shrink:1; flex-grow:0; order:0; 以下將開始介紹 1. 軸線 2. 對齊方法 3.外部元件特性 4.內部元件介紹 軸線(分為兩種) flex排版起頭觀念，搞懂後基本上就會30%。flex軸線主要有分兩種 1.主軸線 2.交錯軸 而 主軸線 是 可以調整方向的。所以 這時我們就要介紹到一個外部屬性 flex-direction flex-direction:row(一開始預設狀態) flex-direction:row-reverse >>交錯軸上方是Start 下方是End flex-direction:column flex-direction:column-reverse >>交錯軸左方是 Start 右方是End Tips：記得是主軸線調整方向喔!交錯軸永遠都跟主軸垂直 練習一下： https://codepen.io/chunwen/pen/OqLKWw 外層元素與內層元素簡介 Flex 外容器屬性： display：fle...