flex-direction

CSS3

previous page next page

flex-direction

版本：CSS3
继承性：无

语法：

flex-direction：row | row-reverse | column | column-reverse

默认值：row

适用于：伸缩盒容器

继承性：无

取值：

row：: 横向从左到右排列（左对齐），默认的排列方式。
row-reverse：: 反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：: 纵向排列。
row-reverse：: 反转纵向排列，从后往前排，最后一项排在最上面。

说明：

设置或检索伸缩盒对象的子元素在父容器中的位置。

示例：将一个容器内的子元素横向排列
HTML Code：
```
<ul id="flex">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
```
CSS Code：
```
#box{display:flex;flex-direction:row;list-style:none;}
```
上面代码请自行加上-moz-,-webkit-之类的。flex生效需定义其父元素display为flex或inline-flex(box或inline-box，这是旧的方式)
对应的脚本特性为flexDirection。

兼容性：

= 支持
= 不支持
= 部分支持

支持版本\类型
较早版本	6.0-10.0	4.0-19.0	5.1.7-6.0	21.0-28.0^-webkit-	9.5-12.0
较新版本	11.0	20.0	7.0^-webkit-	29.0	12.1

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>

<title>flex-direction_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com">
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{
	display:-webkit-flex;
	display:flex;
	margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
	-webkit-flex-direction:row;
	flex-direction:row;
}
#box2{
	-webkit-flex-direction:row-reverse;
	flex-direction:row-reverse;
}
#box3{
	height:500px;
	-webkit-flex-direction:column;
	flex-direction:column;
}
#box4{
	height:500px;
	-webkit-flex-direction:column-reverse;
	flex-direction:column-reverse;
}
</style>
</head>
<body>
<h1>flex-direction示例：</h1>
<h2>flex-direction:row</h2>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-direction:row-reverse</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-direction:column</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-direction:column-reverse</h2>
<ul id="box4" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
</body>
</html>

previous page start next page