Flex布局屬性有以下幾種：
flex-direction：設置主軸的方向，可以是row（水平方向，默認值）、column（垂直方向）、row-reverse（水平方向，反向排列）或column-reverse（垂直方向，反向排列）。
flex-wrap：設置是否換行，可以是nowrap（不換行，默認值）、wrap（換行）或wrap-reverse（換行，反向排列）。
flex-flow：是flex-direction和flex-wrap的簡寫形式，可以同時設置主軸方向和是否換行。
justify-content：設置主軸上的對齊方式，可以是flex-start（默認值，左對齊）、flex-end（右對齊）、center（居中對齊）、space-between（兩端對齊，項目之間的間隔相等）、space-around（每個項目兩側的間隔相等，項目之間的間隔是相鄰項目間隔的一半）或space-evenly（每個項目間隔相等）。
align-items：設置交叉軸上的對齊方式，可以是flex-start（頂部對齊）、flex-end（底部對齊）、center（居中對齊）、baseline（基線對齊，項目的第一行文字的基線對齊）或stretch（默認值，項目拉伸填滿整個交叉軸）。
align-content：設置多根軸線的對齊方式，只有一根軸線時不起作用，可以是flex-start（頂部對齊）、flex-end（底部對齊）、center（居中對齊）、space-between（兩端對齊，軸線之間的間隔相等）、space-around（每根軸線兩側的間隔相等，軸線之間的間隔是相鄰軸線間隔的一半）或stretch（默認值，軸線拉伸填滿整個交叉軸）。
order：設置項目的排列順序，默認為0，數值越小，排列越靠前。
flex-grow：設置項目的放大比例，默認為0，即不放大。
flex-shrink：設置項目的縮小比例，默認為1，即如果空間不足，項目將縮小。
flex-basis：設置項目在主軸上的初始大小，默認為auto，可以是具體的長度值或百分比。
flex：是flex-grow、flex-shrink和flex-basis的簡寫形式，可以同時設置項目的放大比例、縮小比例和初始大小。
align-self：設置單個項目在交叉軸上的對齊方式，可以覆蓋align-items屬性，可以是auto（默認值，繼承父元素的align-items屬性）、flex-start（頂部對齊）、flex-end（底部對齊）、center（居中對齊）、baseline（基線對齊）或stretch（拉伸填滿整個交叉軸）。
