flex-direction (适用于父类容器【弹性盒子】元素上)

定义：设置或检索伸缩盒对象的子元素在父容器中的位置。属性决定主轴的方向（即项目的排列方向）

语法

flex-direction: row | row-reverse | column | column-reverse

例子演示

代码清单

HTML代码

		
<h3>flex-direction: row;</h3>
<ul class="flex-container container-1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>flex-direction: row-reverse;</h3>
<ul class="flex-container container-2">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

<h3>flex-direction: column;</h3>
<ul class="flex-container container-3">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<h3>flex-direction: column-reverse;</h3>
<ul class="flex-container container-4">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
		
	

CSS代码

		
*{margin: 0;padding: 0;border: 0}
li{list-style: none;}
pre xmp{border-radius: 1rem;border: 1px dashed #ccc}
.w960{width: 960px;margin: 0 auto 2rem}
.tc{text-align: center}
.flex-container{display: flex;background: #CCC;padding: 1rem;border: 1px dashed #666}
.flex-container li{background: #0099cc;color: #FFF;padding: 3rem;margin: 1rem}
.container-1{flex-direction: row;}
.container-2{flex-direction: row-reverse;}
.container-3 li,.container-4 li{padding: .5rem 3rem;margin: .2rem 1rem}
.container-3{flex-direction: column;}
.container-4{flex-direction: column-reverse;}