《图解CSS3》笔记 Flex

标签：

Flexbox模型的三个规范：

1. 旧版本　　2009年　　　　display: box、inline-box

2. 混合版本　2011年　　　　display: flexbox、inline-flexbox

3. 新版本　　　　　　　　　 display: flex、inline-flex

当display属性为以上时，将为其后代创建FFC(Flex Formatting Context)。

旧版本属性如下：

1. box-orient　　　　定义伸缩主轴的方向

　　horizontal | vertical | inline-axis (内联轴排列)| block-axis (块轴排列)

2. box-direction　　定义伸缩项目的流动顺序

　　normal | reverse

3. box-lines　　　　伸缩项目溢出时是否换行（主流浏览器不支持该属性）

　　single、multiple

4. box-pack　　　　主轴方向上，额外空间的分配

　　start（默认：额外空间在最后）、end、center（额外空间仅处于两端）、justify（额外空间平均分布在所有缝隙之间，不包括首尾边缘）

5. box-align　　　 侧周方向上，额外空间的分配

　　start、end、center、baseline、stretch（拉伸填充侧轴）

6. box-flex　　　　主轴方向上，额外空间如果在每个伸缩项目上分配；（使用在伸缩项目上）

　　<number>

7. box-ordinal-group　　伸缩项目在伸缩流中显示的顺序，（使用在伸缩项目上）

　　<number>　　默认为1，值越大，位置越靠后；

《图解CSS3》笔记 Flex

标签：

原文地址：http://www.cnblogs.com/diydyq/p/4234630.html