Flex 布局：语法篇

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局很是不方便，好比，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案 ---- Flex 布局，能够简便、完整、响应式地实现各类页面布局。目前，它已经获得了全部浏览器的支持，这意味着，如今就能很安全地使用这项功能。
Flex 布局将成为将来布局的首选方案。
如下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties.
1、Flex布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器均可以指定为 Flex 布局。
1 .box {
2     display: flex; 
3 }
行内元素也能够使用 Flex 布局。
1 .box {
2     display: inline-flex; 
3 }
Webkit 内核的浏览器，必须加上 -webkit 前缀。
1 .box {
2     display: -webkit-flex; /* Safari */
3     display: flex; 
4 }
注意，设为 Flex 布局之后，子元素的 float、clear 和 vertical-align 属性将失效。

<a href="www.changtu.com/chepiao/baodingshi-zhangjiakoushi.html" class="lightblue">保定到张家口的汽车</a>
2、基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器".它的全部子元素自动成为容器成员，称为Flex项目（flex item），简称"项目".
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫作 main start,结束位置叫作 main end;交叉轴的开始位置叫作 cross start,结束位置叫作 cross end.
项目默认沿主轴排列。单个项目占据的主轴空间叫作 main size,占据的交叉轴空间叫作 cross size.