<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=no" />
<style type="text/css">
*{padding:0;margin:0;}
#demo{
height:200px;
border:1px solid #000;
/*新版的弹性盒模型*/
display:flex;
/*新版下设置主轴方向为水平方向*/
flex-direction:row;
/*新版下设置主轴方向为垂直方向*/
flex-direction:column;
/*新版下设置主轴方西为水平，元素排序为反序，距最后开始*/
flex-direction:row-reverse;
/*新版下设置主轴方西为垂直，元素排序为反序，距最后开始*/
flex-direction:column-reverse;
/*老版弹性盒模型*/
display:-webkit-box;
/*老版下设置主轴方向为水平方向*/
-webkit-box-orient:horizontal;
/*老版下设置主轴方向为垂直方向*/
-webkit-box-orient:vertical;
/*老版下设置主轴方向为水平方向，元素排序为反序，距顶部开始*/
-webkit-box-direction:reverse;
/*老版下设置主轴方向为正序，距顶部开始*/
-webkit-box-direction:normal;
}
#demo div{
width:50px;
height:50px;
background:#eee;
text-align:center;
}
</style>
</head>
<body>
<div id="demo">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
