关于移动端常用的盒模型与flex布局

在移动端选择布局的方式中常用盒模型display:-webkit-box达到自适应，然而display:-webkit-flex也同样能达到效果，因自在己移动端用-webkit-box比felx方式熟悉一些，今天还是重新温故一些他们两者彼此的用法

　　　　
//弹性盒子css代码
*{padding:0px;margin:0px;}
	ul li{list-style:none;}
	.wrap-box{
		display:-webkit-box;/*设置弹性盒子*/
		display:-moz-box;
		display:-ms-box;
		display:box;
		box-pack:center;
		-webkit-box-pack:center;/*start center end   左 中 右*/
		-webkit-box-orient:horizontal;/*水平方向排列 默认值horizontal(inline-axis)、vertical(block-axis)垂直方向排列*/
		/*-webkit-box-orient:vertical;垂直方向*/

	}
	.wrap-box li:nth-of-type(2n){
		background:yellow;
	}
	.wrap-box li:nth-of-type(2n+1){
		background:pink;
	}
	.item-1 li{
		color:red;
		-webkit-box-flex:1;/*所占每一行的比例*/
		box-flex:1;/*所占比例是1/4*/
	}
	.item-2{
		display:-webkit-box;
		-webkit-box-pack:center;
	}
	.item-2 li:nth-of-type(1){
		-webkit-box-flex:1;
		box-flex:1;
	}
	.item-2 li:nth-of-type(2){
		-webkit-box-flex:2;/*所占比例是2*/
		background:yellow;
		box-flex:2;
	}
	.item-2 li:nth-of-type(3){
		-webkit-box-flex:1;
		box-flex:1;
	}
	.item-2 li:nth-of-type(4){
		-webkit-box-flex:1;
		box-flex:1;
	}
	.item3{
		display:-webkit-box;
		-webkit-box-orient:vertical;/*竖直方向排列*/
	}
	.item-4{
		display:-webkit-box;
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;/*默认normal*/
		-webkit-box-direction:reverse;/*反转*/
	}
	.item-4 li{
		-webkit-box-flex:1;/*等分*/
	}

　　以上是弹性盒子css代码，接下来是html

<h3>box-flex:1等分排列;父级元素-webkit-box-orient:horizontal;水平方向排列</h3>
	<ul class='wrap-box item-1'>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<h3>box-flex:2;排列</h3>
	<ul class='item-2'>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<h3>box-orient:vertiacl垂直方向排列</h3>
	<ul class='item-3'>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<h3>box-decoration:reverse</h3>
	<ul class='item-4'>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>