css3 flex

1 伸缩流方向：flex-direction属性

• 名称：flex-direction
• 取值：row | row-reverse | column | column-reverse
• 初始值：row
• 应用于：伸缩容器
• 媒体：视觉
• 计算值：指定的值

2 伸缩行换行：flex-wrap属性

• 名称：flex-wrap
• 取值：nowrap | wrap | wrap-reverse
• 初始值：nowrap
• 应用于：伸缩容器
• 继承：无
• 媒体：视觉
• 计算值：指定的值

3 伸缩方向和换行：flex-flow属性

• 名称：flex-flow
• 取值：<flex-direction> || <flex-wrap>
• 初始值：取决于flex-direction和flex-wrap的初始值
• 应用于：伸缩容器
• 继承：取决于flex-direction和flex-wrap的初始值
• 媒体：视觉
• 计算值：取决于flex-direction和flex-wrap的初始值

flex-flow属性是flex-direction和flex-wrap的简写。它一起定义了伸缩容器的主轴和侧轴。

4 轴对齐：justify-content属性

• 名称：justify-content
• 取值：flex-start | flex-end | center | space-between | space-around
• 初始值：flex-start
• 应用于：伸缩容器
• 继承：无
• 媒体：视觉
• 计算值：指定的值

5 侧轴对齐：align-items和align-self属性

align-items：

• 名称：align-items
• 取值：flex-start | flex-end | center | baseline | stretch
• 初始值：stretch
• 应用于：伸缩容器
• 继承：无
• 媒体：视觉
• 计算值：指定的值

align-self：

• 名称：align-self
• 取值：auto | flex-start | flex-end | center | baseline | stretch
• 初始值：auto
• 应用于：伸缩项目
• 继承：无
• 媒体：视觉
• 计算值：auto的计算值是父亲的align-items属性值，否则为指定的值

6 align-content属性

• 名称：align-content
• 取值：flex-start | flex-end | center | space-between | space-around | stretch
• 初始值：stretch
• 应用于：多行的伸缩容器
• 继承：无
• 媒体：视觉
• 计算值：指定的值

 

7 flex简写

• 名称：flex
• 取值：none | auto | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
• 应用于：伸缩项目
• 初始值：单个属性决定
• 媒体：视觉
• 计算值：单个属性决定

flex属性指定了组件的伸缩长度：伸缩增长因素、伸缩缩小因素和伸缩基础。当一个盒子是伸缩项目时，flex属性被咨询并代替主轴尺寸属性去决定盒子的主轴尺寸。如果一个盒子不是伸缩项目，flex属性对其没有效果。

下面是各取值组件的意义：

• flex-grow：这个<number>组件是flex-grow的普通写法，它指定了伸缩增长因素，它决定了该伸缩项目相对于有正的可用空间的伸缩容器中其他伸缩项目的增长比例。当省略时，它被设置为1。
• flex-shrink：这个<number>组件是flex-shrink的普通写法，它指定了伸缩缩小因素，它决定了该伸缩项目相对于有负的可用空间的伸缩容器中其他伸缩项目的缩小比例。当省略时，它被设置为1。当分发负的空间时，伸缩缩小因素是乘以伸缩基础的。
• flex-basis：该组件，具有和width属性相同的属性值，是设置flex-basis的普通写法，指定了伸缩基础：是伸缩项目的初始主轴尺寸，它是在根据伸缩因素分发可用空间之前设置的。当在flex简写中省略了它，它的指定值为0%。

8 显示顺序：order属性

伸缩项目在默认情况下是按着它们源文档中出现的顺序来布局的。order属性可以被用于改变这些顺序。

• 名称：order
• 取值：<integer>
• 初始值：0
• 应用于：伸缩项目和伸缩容器的绝对定位儿子
• 继承：无
• 媒体：视觉
• 计算值：指定的值
• 是否可以动画：是

网址推荐 ：http://www.html-js.com/article/CSS-learning-CSS3-Flexbox

               http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex.html