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。