2019独角兽企业重金招聘Python工程师标准>>> 
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案 ---- Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 布局将成为未来布局的首选方案。
以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties.
一、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>
二、基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器".它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目".
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end.
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size.
