首先每個容器都可以開啟彈性布局：display：flex或者display：inline-flex，如果瀏覽器兼容加上-webkit
理解兩個概念：容器和專案
容器即為你要在什么地方開啟彈性布局，就是一般為外層的div
專案即為你想設定分布位置的子div
即然分為父和子，那么兩者都有不同的屬性才對
容器：
flex-direction: row | row-reverse | column | column-reverse; ---> 主軸方向
flex-wrap：nowrap | wrap | wrap-reverse; ---> 專案是否換行
flex-flow：相當于flex-direction + flex-wrap 默認值為row nowrap
justify-content：flex-start | flex-end | center | space-between | space-around; ---> 主軸對齊方式
align-items: flex-start | flex-end | center | baseline | stretch; ---> 垂直軸對齊方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch; ---> 多根軸線的對齊方式
專案:
order:
flex-grow:
flex-shrink：
flex-basis：
flex:flex-grow + flex-shrink + flex-basis
align-self: auto | flex-start | flex-end | center | baseline | stretch; ---> 單個設定，覆寫align-items
參考：阮一峰大神的flex教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285915.html
標籤：Html/Css