## 一、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),简称项目。 ![](https://box.kancloud.cn/31d08d465e227052fc214b957f7e9aef_563x333.png) 可以看到上图中,容器的主要部分分为两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置与边框的交叉点叫做main start,结束位置叫做main end; 交叉轴的开始位置叫做cross start,结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。