css3.flex項目屬性

flex-box項目屬性

order || flex-grow || flex-shrink || flex-basis

order（秩序）在不改變html結構的情況下進行項目排序，默認情況下是0，從低到高排序，數值越大越靠後。

li:nth-child(1){
			order: 1;
		}

li:nth-child(1){
			order: 1;
		}
		li:nth-child(3){
			order: 2;
		}

如果值相同，那麼按照html結構順序排列先後。結果與上圖一樣。

li:nth-child(1){
			order: 1;
		}
		li:nth-child(3){
			order: 1;
		}

flex-grow（成長）值爲0或者正數，默認爲0； flex-shrink（縮小）默認爲1；0是關閉

li{
			list-style: none;
			width: 200px;
			height: 200px;
			background: #ddd;
			font-size:50px;
			margin: 10px;
			flex-grow: 0;
		}

如果將值改爲1，就是打開了這個屬性，自動撐滿父級，並且會隨着瀏覽器縮放而縮放，因爲flex-shrink（縮小）默認爲1是打開狀態；0是關閉；

flex-basis（設置寬度）我覺得它就是設置寬度值的屬性，可以使用width的各種單位%，em,rem,px,不過它必須要帶單位比如0px,而不能寫成0，

flex是這三種屬性的簡寫flex-grow、flex-shrink和flex-basis。