CSS3之 伸缩盒模型（弹性盒子、flex布局）

* 2009年，W3C 提出了一种新的盒子模型-- Flexible Box (伸缩盒模型，又称:弹性盒子)。
* 它可以轻松的控制: 元素分布方式、元素对齐方式、元素视觉顺序 ......
* 截止目前，除了在部分 TE 浏览器不支持，其他浏览器均已全部支持。
* 伸缩盒模型的出现，逐渐演变出了一套新的布局方案-- flex布局
小贴士:
1，传统布局是指: 基于传统盒状模型，主要靠: display 属性+ position 属性+ float 属性

2. flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。

1、伸缩容器、伸缩项目

伸缩容器:开启了 flex 的元素，就是:伸缩容器
1.给元素设置: display:flex 或 display:inline-flex，该元素就变为了伸缩容器。
2. display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
3.一个元素可以同时是:伸缩容器、伸缩项目。

伸缩项目:伸缩容器所有子元素自动成为伸缩项目。
1，仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
2.无论原来是哪种元素(块、行内块、行内)，一旦成为了伸缩项目，全都会“块状化”。

2、主轴与侧轴

主轴: 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是:从左到右(左边起点，右边终点)。
侧轴: 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是:从上到下(上边起点，下边终点)

1）主轴方向：

属性名: flex-direction
常用值如下:
1. row : 主轴方向水平从左到右-- 默认值
2. row-reverse:主轴方向水平从右到左
3.column:主轴方向垂直从上到下。
4column-reverse:主轴方向垂直从下到上

2）主轴换行方式

属性名: flex-wrap
常用值如下:
1. nowrap: 默认值，不换行。

2、wrap: 自动换行，伸缩容器不够自动换行。

3、wrap-reverse: 反向换行。

3）flex-flow （几乎不用）

 flex-flow是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要求
flex-flow: row wrap;

4）主轴对齐方式

属性名: justify-content
常用值如下:
1. flex-start:主轴起点对齐。--默认值
2. flex-end:主轴终点对齐。
3.center: 居中对齐
4.space-between:均匀分布，两端对齐 (最常用)。
5.space-around:均匀分布，两端距离是中间距离的一半
6.space-evenly : 均匀分布，两端距离与中间距离一致。

 5）侧轴对齐方式

所需属性: align-items
常用值如下:
1. flex-start:侧轴的起点对齐。
2. flex-end:侧轴的终点对齐。
3. center:侧轴的中点对齐。
4.baseline:伸缩项目的第一行文字的基线对齐。
5. stretch: 如果伸缩项目未设置高度，将占满整个容器的高度。-- (默认值)

 6）侧轴多行的情况：

所需属性: align-content
常用值如下:
1. flex-start :与侧轴的起点对齐。
2. flex-end:与侧轴的终点对齐。
3.center:与侧轴的中点对齐。
4. space-between:与侧轴两端对齐，中间平均分布。
5.space-around:伸缩项目间的距离相等，比距边缘大一倍
6.space-evenly:在侧轴上完全平分。
7 stretch : 占满整个侧轴。-- 默认值

3、盒子伸缩性

 1）flex-grow (伸)

概念: flex-grow 定义伸缩项目的放大比例，默认为，即:纵使主轴存在剩余空间，也不拉伸(放大)。

规则:
1.若所有伸缩项目的 flexgrow 值都为1，则: 它们将等分剩余空间 (如果有空间的话)

2，若三个伸缩项目的 flex-grow 值分别为: 1、2、3，则: 分别瓜分到: 1/6、2/6、3/6 的空间

 2）flex-shrink (缩)

概念: flex-shrink 定义了项目的压缩比例，默认为1，即: 如果空间不足，该项目将会缩小。

收缩项目的计算，略微复杂一点，我们拿一个场景举例:
例如:三个收缩项目，宽度分别为: 200px、300px、200px，它们的flex-shrink 值分别为: 1、2、若想刚好容纳下三个项目，需要总宽度为 700px，但目前容器只有 400px，还差300px，所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算:
1.计算分母: (200x1) + (300x2) + (20x3) = 1400
2.计算比例:
项目一: (200x1) / 14 = 比例值1
项目二: (300x2) / 140 = 比例值2
项目三: (200x3) /14 = 比例值3
3，计算最终收缩大小:
项目一需要收缩:比例值1 x 300
项目二需要收缩: 比例值2 x 300
项目三需要收缩: 比例值3 x 300

复合写法：flex: 1;

即三个属性的缩写:flex-grow: 1; flex-shrink: 1 flex-basis: auto;