CSS Flex 學習筆記
隨著支援這個CSS屬性的瀏覽器，越來越多。About Links：Can I use、W3C。
可以擺脫過去那有點複雜的排版困擾( flaot要clear，inline-block要calc....等)
當然要趕快來認識它一下囉!
Setp.1
最開始讓我熟悉它的，是這個可愛的青蛙小遊戲，以一個比較有趣的方式，讓我粗略的了解flax的運作方式。
Setp.2
偷看別人整理好的筆記本! 繁中親切的介紹 : )
Setp.3
實做!!練習~學的最快!
如果你不知道從何練習，有個厲害的大大提供了一個相關的教學。
https://flexbox.io/
(他也有寫javascript30的教學哦!)
Setp.4
整理自己常跌倒的地方! 口語化整理XD
可以擺脫過去那有點複雜的排版困擾( flaot要clear，inline-block要calc....等)
當然要趕快來認識它一下囉!
Setp.1
最開始讓我熟悉它的，是這個可愛的青蛙小遊戲，以一個比較有趣的方式，讓我粗略的了解flax的運作方式。
Setp.2
偷看別人整理好的筆記本! 繁中親切的介紹 : )
- 學習 CSS 版面配置：http://zh-tw.learnlayout.com/flexbox.html
- oxxostudio：http://www.oxxostudio.tw/articles/201501/css-flexbox.html
Setp.3
實做!!練習~學的最快!
如果你不知道從何練習，有個厲害的大大提供了一個相關的教學。
https://flexbox.io/
(他也有寫javascript30的教學哦!)
Setp.4
整理自己常跌倒的地方! 口語化整理XD
- 對該標籤的定義 (外層)：
● display: flex; ←就是這標籤要用flex必先說~
● flex-direction: ←裡面內容是順著流還是側著流
● justify-content: ←此流對齊方式
● align-items: ←與流垂直的對齊方式
● flex-wrap: ←子內容給不給它折行、排序的方式
● align-self: ←據說是拿來個別覆蓋align-items(其實我蠻少用到)
● flex-flow: ←簡寫 flex-direction 和 flex-wrap 使用 - 標籤內的定義(內層)：
● order
● flex - 為什麼有些瀏覽器明明有支援還是跑版了呢? 原來是設定不同。
原來要支援一致，屬性必須要下好下滿。
IE 預設 flex-basis: 0px; Chrome 則是 預設 flex-basis: 0%; 所以IE看起來才會破版。如果CSS flex子項目 多設定一行 flex-basis: 0%;便可解決這個問題。
- 除了前綴詞要下之外，在一些舊版本的支援中，有些縮寫屬性必須下完整。
早些時間他曾經是用 display: flex-box; 或 display: box;
或是可以用sassCore / compass / bourbon 別人寫好的SCSS庫去應用!會方邊許多，但如果還不熟悉SCSS，那還是乖乖的加需要支援的瀏覽器前綴詞最快了。