CSS移动端之flex布局（弹性布局）

一、原理

通过给父元素设置display：flex,来达到控制子盒子的位置和排列。

采用了Flex布局的元素叫做flex容器，他的所有子元素叫做Flex项目，采用了flex布局float、clear、vertical-align属性失效。

采用了flex布局的元素不用管他是行内元素还是块级元素。

二、flex布局VS传统布局

传统布局：

兼容性好 布局繁琐 局限性 不能在移动端很好的布局

flex弹性布局：

操作方便 布局极为简单 移动端广泛 PC端浏览器支持情况较差

三、flex布局的相关属性设置

1、给父元素设置flex属性

1、flex-decoration设置主轴的方向

默认是row,沿着x轴从左到右正向排列。

row-reverse沿着x轴从右到左反向排列。

column沿着y轴从上到下正向排列。

column-reverse沿着y轴从下到上反向排列。

2、justify-content设置主轴子元素排列

要先是设置好主轴！

flex-start默认的,在主轴的开始

flex-end在主轴的结束排列

space-around平分剩余空间

space-between先把两边贴边后，再平分剩余空间（重要）

3、flex-wrap子元素是否换行

默认normal，不换行。所以当父盒子宽度或者高度不够了，子元素会重叠。

wrap换行

4、align-items设置侧轴子元素排列（单行）

stretch拉伸，默认值，但是要把子盒子的宽度或者高度去掉，若主轴是x轴&#x