flex-flow

CSS3

previous page next page

flex-flow

版本：CSS3
继承性：无

语法：

flex-flow：[ flex-direction ] || [ flex-wrap ]

默认值：看各分拆属性

适用于：弹性盒模型容器

继承性：无

取值：

[ flex-direction ]：: 定义弹性盒子元素的排列方向。
[ flex-wrap ]：: 定义弹性盒子元素溢出父容器时是否换行。

说明：

复合属性。设置或检索弹性盒模型对象的子元素排列方式。

对应的脚本特性为flexFlow。

兼容性：

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

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

示例：

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

<title>flex-flow_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;
	width:220px;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-flow:row nowrap;
	flex-flow:row nowrap;
}
#box2{
	-webkit-flex-flow:row wrap-reverse;
	flex-flow:row wrap-reverse;
}
#box3{
	height:220px;
	-webkit-flex-flow:column wrap-reverse;
	flex-flow:column wrap-reverse;
}
</style>
</head>
<body>
<h1>flex-flow示例：</h1>
<h2>flex-flow:row nowrap</h2>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-flow:row wrap-reverse</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-flow:column wrap-reverse;</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
</body>
</html>

previous page start next page