## 一、Flex布局是什么？ Flex是Flexible Box的缩写，是弹性布局的意思，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{ display:flex; } 行内元素也可以使用Flex布局。 .box{ display:inline-flex; } 注意： 1.设为Flex布局以后，子元素的float、clear和vertical-align都将失效。 2.暂时没有考虑浏览器前缀，后续我们通过工具自动添加前缀。 ## 二、Flex解析 使用Flex布局的元素，我们可以称其为Flex容器(Flex Container),简称容器。它所有的子元素自动成为容器成员，我们称其为Flex项目(Flex item),简称项目。  可以看到上图中，容器的主要部分分为两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置与边框的交叉点叫做main start，结束位置叫做main end； 交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。