CSS篇 《图解CSS3》笔记 Flex

 

Flexbox模型的三个规范：

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

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

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

 

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

旧版本属性如下：

1. box-orient　　　　定义伸缩主轴的方向（与书写顺序有关：ltr、rtl）

　　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，值越大，位置越靠后；

 

混合版本属性如下（主要针对IE10，加前缀：-ms-）：

1. flex-direction　　伸缩项目在主轴的排列顺序

　　row、row-reverse、column、column-reverse

2. fllex-wrap　　　 伸缩项目超出时的处理方式

　　nowrap（单行显示）、wrap（多行）、wrap-reverse（多行但反向排列）

3. flex-flow　　　　顺序与是否换行的组合

　　flex-direction, flex-wrap

4. flex-pack　　　 伸缩项目在主轴上对齐方式

　　start、end、center、justify、distribute（伸缩项目的两端也会保留空间）

5. flex-align　　　伸缩项目在侧轴上对齐方式

　　start、end、center、baseline、stretch

6. flex-line-pack　当伸缩项目较多，多行展现时；主轴上的每一行|列成为伸缩项目行，多列中的这些行在侧轴上的排列顺序

　　start（在侧轴上向左靠拢）、end、center、justify、distribute、stretch

7. flex　　　　　　（用于伸缩项目）类似于box-flex，伸缩项目的宽度、高度是否基于可用空间具有弹性

　　正弹性整数、负弹性整数、首选大小 | none;

8. flex-order　　 （用于伸缩项目）伸缩项目在主轴的排列顺序

　　正整数，默认为0

 

新版本属性如下：

1. flex-direction

2. flex-wrap

3. flex-flow

4. justify-content　　主轴对齐

　　flex-start、flex-end、center、space-between、space-around；

5. align-items、align-self　　伸缩项目行在侧轴的对齐方式、伸缩项目自身在所在行的对齐方式

　　flex-start、flex-end、center、baseline、stretch

6. align-content　　与align-items相似，不过只有在：伸缩项目存在于多行时才有效，即：flex-wrap为wrap；

7. flex　　　　　　　（使用于伸缩项目）伸缩性

　　扩展比率、收缩比率、伸缩基准值

8. order　　　　　　（使用于伸缩项目）排列顺序

　　number