flex伸缩布局盒模型总结
以下内容为大漠大大的书籍《图解css3核心技术与案例实战》观看后的总结。
css2.1中定义了四种布局模式，由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法
块布局
行内布局
表格布局
定位布局
css3引入的布局模式flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度，以最佳方式填充可用空间。flex容器会使子项目扩展来填满可用空间，或缩小他们以防止溢出容器。
一、伸缩容器和伸缩项目
通过display属性显式的给一个元素设置为flex或者inline-flex，这个容器就是一个伸缩容器。伸缩容器会为其内容创立新的伸缩格式化上下文，其中设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。若元素display的指定值为inline-flex，且元素是一个浮动或绝对定位元素，则display的计算值为flex。
1）伸缩容器的属性
- 伸缩流方向 ：指伸缩容器的主轴方向，决定伸缩项目放置在伸缩容器的方向。flex-direction默认值为row。09版本为box-orient，默认值为inline-axis。
- 伸缩行换行：伸缩项目溢出伸缩容器时，设置伸缩容器的伸缩项目是单行显示还是多行显示。以及决定侧轴的方向。flex-wrap：nowrap。09版本为box-lines：single
- 伸缩方向与换行：伸缩方向与伸缩换行的缩写。flex-flow:flex-direction flex-wrap。
- 主轴对齐：设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，制定如何在伸缩项目之间分布伸缩容器额外空间。
- 侧轴对齐：伸缩项目可以在伸缩容器当前行的侧轴上进行对齐。
- 堆栈伸缩行：定义伸缩容器中伸缩项目行在侧轴的对齐方式，类似于侧轴对齐，只不过这是用来控制伸缩项目行在布局轴的堆放方式。
2）伸缩项目的属性
- 显示顺序：默认显示顺序是按照源码中出现的先后顺序，可以通过伸缩项目的显示顺序修改伸缩项目在页面中显示的顺序，也可以通过这个属性对伸缩项目进行排序组合。
- 侧轴对齐：包括两种，一种是align-items，设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式，另一种是align-self，单独在伸缩项目上复写默认的对齐方式。
- 伸缩性：定义伸缩项目可改变他们的宽度或高度填补可用的空间。
二、flexbox模型规范及兼容性
1）版本
旧版本：2009年版本，使用 display：box / inline-box
混合版本：2011年版本，使用 display : flexbox / i nline-flexbox
最新版本 ：使用 display : flex / inline-flex
2)兼容性
旧版本：box
| ie | Firefox | chrome | opera | safari |
| no | 2-21 | 4-20 | no | 3.1-6 |
最新版本
| ie | Firefox | chrome | opera | Safari |
| 11+ | 22+ | 21+ | 12.1+ | no |
混合版本仅ie10支持
三、各版本属性差异
1）开启flexbox
标准版本 display :flex / inline-flex
混合版本 display : flexbox / inline-flexbox
最老版本 display :box / inline-box
2) 伸缩流方向
最老版本： box-orient 用来设置伸缩流方向，而box-direction用来设置伸缩项目在伸缩容器中的流动顺序。
box-orient: horizontal / vertical / inline-axis / block-axis
box-direction： normal / reverse
混合版本：flex-direction : row / row-reverse / column / column-reverse
最新版本 ：flex-direction : row /row-reverse / column / column- reverse
3）伸缩换行
最老版本：box-lines：single / multiple 目前还没浏览器支持
混合版本：flex-wrap: nowrap / wrap / wrap-reverse
最新版本 ：flex-wrap: nowrap / wrap / wrap-reverse
4）伸缩流方向与伸缩换行 （混合版本新增属性）
混合版本：flex-flow：<flex-direction > | <flex-wrap>
最新版本 ：flex-flow：<flex-direction > | <flex-wrap>
5）主轴对齐
最老版本：box-pack:start / end / center / justify
混合版本：flex-pack : start / end / center / justify /distribute
最新版本 ：justify-content: flex-start / flex-end /center / space-between / space-around
6)侧轴对齐
最老版本： box-align :start / end /center / baseline /stretch
混合版本：flex-align： start /end / center / baseline /stretch
最新版本 ：
align-items :flex-start / flex-end / center / baseline /stretch
align-self :同上。对于匿名项目如果伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果，如果align-self的值为auto，则其计算值为伸缩项目的伸缩容器的align-items值。如果该伸缩项目没有伸缩容器，则计算值为stretch。
7）伸缩性
最老版本：box-flex：<number>
混合版本：-ms-flex :<positive-flex ><negative-flex > <preferred-size > | none
最新版本 ：flex : none | <flex-grow > | flex-shrink > ? || <flex-basis> 0/1/auto
8)堆栈伸缩行 针对的是群体
混合版本：flex-line-pack:start / end / center / justify / distribute / stretch
最新版本 ：align-content：flex-start / flex- end /center / space-between /space-around
9) 显示顺序
最老版本：box-ordinal-group : <integer> 默认值为1
混合版本：flex-order：<integer>默认值为0
最新版本 ：order:<number>
