(1)flex-direction 設置容器內子元素即flex-item的排列方向。
(2)flex-warp 設置容器內子元素是否換行。
(3)justify-content 設置子元素在橫軸即X軸的排列位置
(4)align-items 設置子元素在Y軸的排列位置
(5)align-content 設置子元素在多個主軸線上排列的位置。
下面我們來講講 flex-item的屬性，在flex容器中，每個子元素就是壹個flex-item.
如果item沒有設置order，則order默認為0，如圖我設置了view2,3,4的位置為3,2,1 看效果圖：
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果壹個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多壹倍。效果看圖：
因為設置了view3，4設置了left-align屬性 ，所以沒有均分，大家可以去掉嘗試壹下。
直接上圖 ?
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
該屬性可能取6個值，除了auto，其他都與align-items屬性完全壹致。
資料地址 demo 地址