flex-direction:row | row-reverse | column | column-reverse
默认值:row
适用于:伸缩盒容器
继承性:无
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,这是旧的方式)
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
较早版本 | 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 |