今天，本文会以尽量精简的文字来介绍Flexbox，代码示例会比以往少很多，因为要全面讲述，估计十篇文章都讲不完……
一、什么是Flexbox?
Flexbox，又叫弹性盒子布局。简单来说，它是一种CSS快速布局方式，相比于传统文档流布局方式，具有简洁、高效和响应式等优点。
二、为什么要使用Flexbox?
1、超简洁语法
就说元素水平垂直居中布局这个经典难题吧！ 这个问题其实在我之前的纯CSS七大居中方法这篇文章中已经总结过，其中最后两个方法就是用的Flexbox，尤其是最后一个，就两句代码，相比于传统布局，简单到不好意思~~
父元素：display: flex;
子元素：margin: auto;
2、响应式布局
比如要将一个盒子分成三等分，可以这样写：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul{ display: flex; width: 300px;}
ul li{ flex: 1; height: 100px;}
是不是很简洁？而且比直接写width: 33.33%精确多了吧。
三、开始学习Flexbox
1、Flexbox模型
大家在中学阶段都学过直角坐标系，它是由垂直的横轴和纵轴构成，横轴方向向右，纵轴方向向上。而今天所要讲的Flexbox与此极为相似，它也是由垂直的两条轴构成，只不过一条叫做主轴，另一条叫做交叉轴（垂直与主轴），图示如下：
Flexbox模型（flex-direction: row）
默认情况下主轴就是横轴，方向水平向右，交叉轴就是纵轴，方向竖直向下。具体用法，我们接着往下看。
2、Flexbox众多属性的作用范围
设置父容器的属性有：
