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

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