CSS魔法堂：Flex布局

前言

?Flex是Flexible Box的缩写，就是「弹性布局」。从2012年已经面世，但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀，是要学点新东西刺激一下大脑，打打鸡血。

Flex就这么简单

浏览器兼容性

?一说到兼容性就是永远的痛，不过幸运的是只要在IE10加-ms-前缀就可以用啦^_^

涉及的对象

?Flex布局主要是操作Flex Container 和 Flex Item两类对象。

Flex Container为作为布局容器拥有main axis，main start，main end，cross axis，cross start 和 cross end属性。

1. main axis为主轴，默认是水平方向；
2. main start为主轴起始位置，默认是主轴和左侧边框的交叉点(Flex Item会从main start和cross start开始排列)；
3. main end为主轴结束位置，默认是主轴和右侧边框的交叉点；
4. cross axis为交叉轴，默认是垂直方向；
5. cross start为交叉轴起始位置，默认是交叉轴和上边框的交叉点；
6. cross end为交叉轴结束位置，默认是交叉轴和下边框的交叉点。

Flex Item则为容器内的孩子元素，拥有main size和cross size属性。

1. main size为Flex Item的主轴方向宽度；
2. cross size为Flex Item的交叉轴方向宽度。

玩转Flex Container