​​Flex 教學
​​
​​Flex 是什麼？
​​Flex 是具有彈性設計的排版系統
​​基本 Flex 範例：https://codepen.io/Wcc723/pen/BZqrVW
​​
​​在概念上， Flex 像是控制內部元件彈性的結構
​​但在學習上，建議先了解整個概念
​​在由外而內的學習
  • ​​了解軸線
  • ​​外層元素與內層元素
  • ​​對齊方法
  • ​​Flex 設定
​​

​​了解軸線

​​
​​
 
User-uploaded image: image.png
​​
 
User-uploaded image: image.png
​​從範例中了解 主要軸線的排序
​​http://wcc723.github.io/WorkShop-gh-pages/cssFlex/

​​了解外層元素與內層元素的設定

​​每一個屬性用一句話解釋
​​Flex 外容器屬性：
  • ​​display：必備屬性
  • ​​flex-flow
  • ​​flex-direction：決定 flex 軸線
  • ​​flex-wrap：決定換行的屬性
  • ​​justify-content：主要軸線的對齊
  • ​​align-items：交錯軸線的對齊
​​
​​Flex 內元件屬性：
  • ​​flex
  • ​​flex-grow：伸展比 //其數值與其它物件可分配伸展比有關
  • ​​flex-shrink：收縮比
  • ​​flex-basis：絕對值 
  • ​​order：排序
  • ​​align-self：單一個物件的交錯軸對齊

​​Flex 概念

​​如果沒有足夠的空間，它們會縮小尺寸。如果另一方面有足夠的空間，那麼它們不會增長，因為Flexbox希望我們定義它們應該增長多少。所以，而不是告訴瀏覽器應該有多寬的元素，flex-grow決定了Flex項目之間的剩餘空間是如何分配的。
​​
​​Flex-grow 公式
​​剩餘可分配寬度 / 總分配等分 * 分配等分 + 固定佔有寬度
​​https://css-tricks.com/flex-grow-is-weird/
​​
​​*白話文: 剩下空間分完之後，再加上自己的固定值*
​​
 
User-uploaded image: image.png
​​
 
User-uploaded image: image.png
​​
 
User-uploaded image: image.png
​​實驗：http://jsbin.com/xozedelowi/edit?html,css,output
​​