Flex弹性布局

一.flex简述

    flex布局也叫flexbox（弹性盒），针对单行多列布局效果，有很强大的布局分配能力。

    flex的布局具有很多自定义属性完成分配空间效果，不需要计算，分配合理，新版本的浏览器基本都兼容；其劣势是多行多列，父级元素需要高度，布局效果可能不尽人意。复杂布局（嵌套较多的布局效果）一般情况下移动端开发用flex较多，解决了布局问题，间距分配和响应式。

二.flexbox弹性盒的指定

    给任意我们需要成为弹性布局的元素设置display:flex，弹性布局被创建，这时就可以使用flex的相关属性了。当给元素display：flex的时候布局并不会改变，接下来需要给相关的项目属性。

注意：不要把flex与浮动布局与定位布局一起使用。当父元素设置为弹性盒时，子元素的float将会失效，其子元素将块状化，因为flex的底层其实是浮动，只不过帮我们封装了。

三.主轴的排列方向

1.主轴的行模式和列模式

2.主轴和交叉轴

主轴，先要看是行模式还是列模式。 行模式的主轴是水平方向的，列模式的主轴是垂直方向的；交叉轴，就是垂直于主轴的轴线。