1.3 flex-深度解析-refer to 《CSS in Depth》

Flex （Flexible)

如你所见，主流的网站都有着自己风格的布局，页面的展示效果是一个网站的脸面。而 flex 也应运而生，当然前几年还是有不少bugs，而现在除了臭名昭著的IE以外，现代浏览器完全支持了。如果要向下兼容，可以直接使用前缀完善工具即可。

0 概念

flex 对外是 display: block，对内让所有子元素变为 flex-item 。
inline-flex 就像inline-block一样，但不会自动100%width。但没必要用，这样会损失很多特性。

flex-item 独有flex标签。

1. 宽度取决于内容。
2. 默认高度相同，具体高度取决于内容。

1.基本使用

flex 带来了12个标签，这么多的标签其实用的多的也只有那几个。所以主要从几个解决过去问题的方向开始看。

子元素的排列

子元素支持 margin: auto （如 margin: 0 auto ）。相当于对自动大小的行内元素补充了一个自动排列的功能。

margin

在flex容器内，子元素的margin：auto 会自动运算。如果还有剩余空间，所以空间都会给auto，有多个就平分。

比如 将一个行内元素 ul > li 的末尾元素放在最右侧，就可以不用float“飞”过去了，直接 margin-left: auto就可以推过去。避免了float的缺点。

但margin处于最低级：当其它内容要占用时，auto往往为0

content

空间内多余的地方，有时不用，直接margin。但你想空间去填充内容的时候，就可以用flex-item独有标签 flex: grow || shrink || base

1. grow 膨胀，shrink 缩水。值为 无符号 1、2、3... （用来表示相对比例）
2. base 基本值，不可改变。取值广泛，像普通的px、em、rem，百分比

按顺序，先算base，多了少了，按比例分配。

2.布置功能

flex容器

方向

• flex-direction

允许了竖直方向设计

• flex-wrap

设置wrap后，item的shrink就无效了

空间摆放

• justify-content
• align-content

拓展了空间摆布

内容对齐

• align-items

统一设置内容的对齐方式

item属性

除去flex，剩下：

• align-slef

自对齐

• order

顺序，相当于打破已有顺序，初始都为0
order在视图上没有问题，但当用户按Tab键时，大多浏览器，顺序还是原来的顺序。