Flex 佈局是什麼？
Flex 是 Flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。
flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。
注意：如果元素不是彈性盒模型對象的子元素，則 flex 屬性不起作用。
需要詳細學習flex佈局的可參考下面鏈接文章，相關基礎和原理講解的都比較清楚。
阮一峰講解flex佈局 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
本文主要是把flex的各個屬性製作成動畫樣式，讓大家很清楚的看到每個屬性使用後的樣式，方便大家記憶理解，文章最後推薦“Flexbox佈局語法速查手冊”希望能幫到大家，強烈推薦小白收藏
display：
display
排序和排方向
flex-direction：
flex-direction
flex-wrap:
flex-wrap
flex-flow:
flex-flow
order：
order
對齊
justify-content：
justify-content
align-items：
align-items
align-self：
align-self
align-content：
align-content
伸縮
flex-grow：
flex-grow
flex-shrink：
flex-shrink
flex-basis：
flex-basis
喜歡的老鐵，加個關注！今後會分享更多的前端乾貨，歡迎點贊轉發關注
附上Flexbox佈局語法速查手冊，超級好用！
https://www.webhek.com/apps/flex-cheatsheet/#align-self
分享到:
