1 基礎概念
①母元素和子元素
采用Flex布局的元素為绵估，稱為 Flex容器(母元素)
容器的直接子元素稱為 Flex項目(子元素)
②主軸和側軸
主軸和側軸可轉換,轉換屬性為flex容器的flex-direction
如果flex-direction為row，則主軸是水平方向，如果是column，則主軸是垂直方向
![https://user-gold-cdn.xitu.io/2018/1/22/1611cc8a90e05b23?imageView2/0/w/1280/h/960/format/webp/ignore-error/1]
2 容器屬性
主軸方向：水平排列（默認） | 水平反向排列 | 垂直排列 | 垂直反向排列
flex-direction: row | row-reverse | column | column-reverse;
換行：不換行（默認） | 換行 | 反向換行(第一行在最后面)
flex-wrap: nowrap | wrap | wrap-reverse;
主軸對齊方式：起點對齊（默認） | 終點對齊 | 居中對齊 | 兩端對齊 | 分散對齊
justify-content: flex-start | flex-end | center | space-between | space-around;
交叉軸對齊方式：拉伸對齊（默認） | 起點對齊 | 終點對齊 | 居中對齊 | 第一行文字的基線對齊
align-items: stretch | flex-start | flex-end | center | baseline;
3 項目屬性
順序：數值越小越靠前疚颊，默認為0
需要子元素都寫出order
order: <number>;
放大比例：默認為0午乓，如果有剩余空間也不放大，值為1則放大秧骑，2是1的雙倍大小，以此類推
(理解:獨占幾份剩余空間)
flex-grow: <number>;
縮小比例：默認為1扣囊，如果空間不足則會縮小乎折，值為0不縮小
flex-shrink: <number>;
項目自身大小：默認auto侵歇，為原來的大小骂澄，可設置固定值 50px/50%
flex-basis: <length> | auto;
flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto
兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
項目自身對齊：繼承父元素（默認） | 起點對齊 | 終點對齊 | 居中對齊 | 基線對齊 | 拉伸對齊
align-self: auto | flex-start | flex-end | center | baseline | stretch;
本文參考了掘金文章如下:
作者：Aitter
鏈接：https://juejin.im/post/589965c9128fe1006569cc9d
來源：掘金
著作權歸作者所有惕虑。商業(yè)轉載請聯系作者獲得授權坟冲，非商業(yè)轉載請注明出處磨镶。
