現在都很流行流式佈局display:flex;，但是就是老是記不住他們的類型，今天抽空梳理咯一下父元素與子元素的他們各自擁有的屬性（紅色部分是我經常使用到的）
父元素擁有的屬性
1、flex-direction 設置主軸對齊方式
row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。
2、flex-wrap 子元素換行的方式 默認nowrap ；
nowrap（默認值）：默認不換行。
wrap：換行，第二行在第一行下面，從左到右
wrap-reverse：換行，第二行在第一行上面，從左到右；
3、flex-flow flex-direction和flex-wrap的簡寫 默認row nowrap；
flex-flow：flex-direction|flex-wrap ；
4、justify-content 子元素的對齊方式 默認flex-start 左對齊
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框間隔大一倍。
5、align-items 子元素對齊方式
flex-start：交叉軸的起點對齊（頭部對齊）。
flex-end：交叉軸的終點對齊。（底部對齊）
center：交叉軸的中點對齊。（垂直居中對齊）
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。
6、align-content 屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。
所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。
子元素擁有的屬性
1、Order 改變子元素的順序
order 子元素排列的位置默認是按照html先後順序來排列的，
html結構誰在前面默認就排列在前面； order：默認（0） 值越小越靠前，
2、flex-grow 放大比例 默認是0 當有放大空間的時候，值越大，放大的比例越大
3、flex-shrink 縮小比例 默認是1 值越大，縮小的時候比例越小；
4、flex-basis
屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）
Flex-basis:10px(如果項目有多餘的空間，設置爲100px。那麼會放大到100的寬度)
5、Flex
屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性 可選。
6、align-self
屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
除了auto是表示繼承父元素，其他的跟align-items是一樣的。
以上就是我統計的關於流式佈局的一些屬性，具體的樣式效果wo我暫時不截圖咯，你們可以自己在電腦上操作試一下看效果