Flex弹性布局简述

1. flex简述

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

在没有flex之前，一般使用流式布局、浮动布局、定位布局等等

flex布局的优势：

具有很多自定义属性完成分配空间效果，不需要计算，分配合理，新版本的浏览器基本都兼容

flex布局的劣势：

多行多列时，父级元素需要高度，布局效果可能不尽如人意

一般情况下移动端开发用flex较多，解决了布局问题、分配间距和响应式

2. flexbox弹性盒的指定

给需要使用弹性布局空间的元素添加display:flex;

这个元素就作为了flex的容器元素，这时整个容器就可以使用flex的相关属性了

3.flex的注意事项

1. 子元素是依赖容器的元素，想要控制子元素排列，依靠的是父级容器

2. 设置父元素为弹性盒，子元素的float将失效

3. 切记不要把flex与浮动布局或定位布局一起使用

4. 使用display:flex;其子元素将块状化

4.容器和项目

1 使用display:flex;的父级元素叫做"容器"，在容器中使用的相关属性叫做"容器属性"

2 容器中的第一层子元素，受控于容器的子元素叫做"项目"，使用项目的相关属性叫做"项目属性"