弹性盒子

弹性盒模型

2009年，W3C提出了一个新的盒模型，弹性盒模型（flex），用于解决网页布局中的一些问题。

flex的优势

1. flex布局的子元素不会脱标。
2. 属性非常丰富，可以灵活使用，更加便捷的为页面布局。
3. IE低版本不支持，IE10-11支持度不高。标准浏览器完全支持。
4. 移动端支持性也比较高。

弹性盒子

声明定义

使用display:flex或者inline-flex声明一个元素为弹性盒子。此时，该元素中的子元素就会遵循弹性布局。

【注意】

弹性盒子中的子级块级元素会并排显示。

flex与inline-flex的区别

flex：如果没有设置宽高，宽默认为100%，高度为内容的高。

inline-flex：如果没有设置宽高，宽高为内容的宽高。使用的比较少。

弹性盒子的属性

flex-direction

控制子元素排列的方向。

• row 从左到右水平排列子元素（默认值）
• row-reverse 从右到左水平排列子元素
• column 从上到下垂直排列子元素
• column-reverse 从下往上垂直排列子元素

flex-wrap

规定flex容器是单行或者多行。

• nowrap 默认值，元素不会换行。
• wrap 子元素的宽/高总和超出父容器的宽/高时，子元素会换行
• wrap-reverse 容器换行时，以相反的方向。

flex-flow

是flex-direction与flex-wrap的组合简写。

flex-flow：flex-direction flex-wrap

主轴与侧轴（交叉轴）

• 主轴：flex子元素的排列方向。默认是水平方向，从左到右。
• 交叉轴：与主轴垂直，方向是换行的方向。

justify-content

用于控制子元素在主轴上的排列方式。

• flex-start：第一个元素紧靠主轴的起点。
• flex-end：元素紧靠主轴的终点
• center：元素居中
• space-between：第一个元素紧靠起点，最后一个元素紧靠终点，余下元素平均分配剩余空间。
• space-around：每个元素两侧都有一个相同的距离，所以元素间的间隔要比元素与容器之间的间隔大一倍。
• space-evenly：元素间的距离平均分配。

align-items

设置子元素在交叉轴上的对齐方式。

• flex-start:元素紧靠交叉轴的起点
• flex-end：元素紧靠交叉轴的终点。
• center 元素在交叉轴方向居中
• stretch:拉伸 让子项与父容器的交叉轴等高或者等宽（默认）前提是子项没有设置相应的宽高。

align-content

设置子元素在交叉轴上的对齐方式。只适用多行。需要配合flex-wrap。

• flex-start:元素紧靠交叉轴的起点
• flex-end：元素紧靠交叉轴的终点。
• center 元素在交叉轴方向居中
• stretch:拉伸 让子项与父容器的交叉轴等高或者等宽（默认）前提是子项没有设置相应的宽高。
• space-between：两端对齐，第一行紧靠起点，最后一行紧靠终点，剩余空间平均分配
• space-around：每一个元素都有一个相等的距离，两个元素之间的距离不会重合。元素间的间隔要比元素与容器之间的间隔大一倍。
• space-evenly：元素间的距离平均分配。

弹性元素（项目）

align-self

用于控制单个元素在交叉轴上的排列方式。

• flex-start:元素紧靠交叉轴的起点
• flex-end：元素紧靠交叉轴的终点。
• center 元素在交叉轴方向居中
• stretch:拉伸 让子项与父容器的交叉轴等高或者等宽（默认）前提是子项没有设置相应的宽高。

flex-grow

用于将弹性盒子的可用空间，按照比例，分配给弹性元素。

eg：三个盒子的宽相等，总和为600px，父盒子宽为900px，剩下有300px。

设置每个盒子的flex-grow的值分别为：1:2:3， 则将300px分为6份，第一个盒子占1份，第二个盒子2份，第三个盒子占三份。

flex-shrink

弹性盒子的宽小于子元素的总宽时，按照flex-shrink设置的值进行比例收缩。

步骤

1. 计算缺少的值。
2. 计算每一个盒子的缩小的比例（(元素的宽shrink值)/（元素1的宽shrink值）+（元素2的宽*shrink值）+…）
3. 计算每一个盒子应该减少的值。缺少的值*缩小的比例。
4. 实际的宽：设置的宽-应该减少的值。

flex-basis

该属性定义了在子元素分配空间之前，占据的主轴空间。

如果盒子需要进行缩放，没有设置flex-basis时，缩放的计算会按照宽高进行计算。如果设置了flex-basis，会按照flex-basis进行计算，而忽略掉设置的宽高。

flex

flex是flex-grow，flex-shrink，flex-basis的缩写。

flex：flex-grow的值 flex-shrink的值 flex-basis的值；
默认值：0  1  auto（主轴的长度）

order

用于控制弹性元素的位置。默认为0，数值越小越在前面。

【注意点】

1.行内元素也会受到弹性盒子的影响。

2.绝对定位的元素会脱离弹性盒子的控制

3.弹性元素设置浮动会无效。