flex-direction 属性是设置元素的排列方向的

1
2
3
4
<style type="text/css">
	.direction.row {
		flex-direction: row;  /* 默认,从左到右 */
	}
	.direction.row-reverse{
		flex-direction: row-reverse; /* 从右到左 */
	}
	.direction.column{
		flex-direction: column;	 /* 居中,从上往下 */
	}
	.direction.column-reverse{
		flex-direction: column-reverse;	 /* 居中,从下往上 */
	}
</style>


<div class="main direction">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
</div>

查看基础样式