flex佈局

容器屬性		項目屬性
flex-direction	row （默認） row-reverse column column-reverse	order	int類型，默認0，數值越小越靠前，可取負值
flex-wrap	nowrap（默認）  wrap  rap-reverse	flex-grow	項目的放大比例，默認爲0，0的意思是如果存在剩餘空間，也不放大。若所有項目的flex-grow都爲1，則這些項目會等分剩餘空間（如果有的話）。如果某個項目的flex-grow爲2，其他項目爲1，則2值項目佔據的剩餘空間將比1值項目多一倍。
flex-flow	flex-direction + flex-wrap	flex-shrink	項目的縮小比例，默認爲1，1的意思是如果空間不足，該項目將縮小。若所有項目的flex-shrink都爲1，當空間不足時，其將等比例縮小。若某個項目的flex-shrink屬性爲0，其他項目爲1，則空間不足時，前者不縮小。負值對該屬性無效。
justify-content	flex-start（默認） flex-end center  space-between space-around	flex-basis	在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。它可以設爲跟width或height屬性一樣的值（比如100px），則項目將佔據固定空間。
align-items	flex-start flex-end center  baseline stretch（默認）	flex	flex-grow +  flex-shrink  +  flex-basis；默認值爲0 1 auto。後兩個屬性可選。 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因爲瀏覽器會推算相關值。
align-content	flex-start flex-end center  space-between space-around stretch（默認）	align-self	auto（默認，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch） flex-start flex-end center baseline stretch 設置單個項目與其他項目不一樣的對齊方式，可覆蓋align-items屬性。除了auto，其他都與align-items屬性完全一致。

 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效！