flex-direction

  • 版本:CSS3
  • 继承性:无

flex-direction语法:

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

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 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

flex-direction示例: