flex-direction

  • 版本:CSS3
  • 继承性:无

flex-direction语法:

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

默认值row

适用于:弹性盒容器

继承性:无

flex-direction取值:

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

flex-direction说明:

设置或检索弹性盒对象的子元素在父容器中的位置。
  • 示例:将一个容器内的子元素横向排列

    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

flex-direction兼容性:

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

由FlexBox算法强力驱动的Weex布局引擎

Yoga本是Facebook在ReactNative里引入的一种跨平台的基于CSS的布局引擎,它实现了Flexbox规范,完全遵守W3C的规范...4月5日

我对Flexbox布局模式的理解

Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的...5月24日

理解Flexbox:你需要知道的一切(一)

这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备...3月28日

CSS3 Flexbox属性视觉指南 | Scotch

}旁注这是你需要在父容器上设置的唯一属性,所有它的直接子元素都自动成为flex项目。有很多种方法分组flexbox属性...4月23日

CSS Flexbox 学习指南、工具与框架

Flexbox是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐。虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它...2月18日

Stack自动布局:Sketch中的Flexbox

Stack的自动布局可以再次改变整个局面。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。我们相信,推动设计生态前进的关键在于...2月26日

Web布局新系统:CSS Grid,Flexbox和Box Alignment

虽然我们使用很多技术手段能实现Web的固定布局,但是这些方法在响应式设计中又出现很多局限性与不足。不过值得庆幸的是,我们有了Flexbox模块...2016年12月19日

使用FlexBox:实现兼容新旧浏览器的最佳方案

FlexBox是非常杰出的,同时也是未来的布局方式之一。在过去的几年里...2016年11月3日

基础篇章:React Native之Flexbox的讲解(Height and Width)

大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)今天在讲解Flexbox之前,我们先讲解一下高度和宽度的问题...2016年10月16日

[原]混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位...

那么就会按照比值大小来分配尺寸,诸如安卓的Layout_weightLayoutwithFlexboxflexbox规则来指定某个组件的子元素的布局...2016年8月20日

React Native 之 flexbox 布局详解篇 (清晰明了)

比较简单。RN的而布局是用css中的flexbox布局,所以布局起来与android传统的布局样式有点像...2016年6月5日

最后说一个Flexbox实现的水平、垂直居中例子:伸缩容器设置如下样式,伸缩项目无论是否定义宽高都可实现水平、垂直居中效果。html代码...2016年5月18日

2、React Native中的flexbox布局

不论是Android还是iOS还是web前端,都有涉及到,ReactNative中也有布局,主要采用了类似css中的flexbox布局...2016年1月23日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册