还在使用 float / position 一个像素一个像素地去布局你的页面吗？？使用flex弹性布局多香 一、弹性布局的优缺点 优点： 代码简洁易懂，使用方面； 很大程度上替代了 float 、position的复
优点：
- 代码简洁易懂，使用方面；
- 很大程度上替代了 float 、position的复杂布局，特别是元素的水平和垂直居中，不用一个像素一个像素地调；
- 是页面布局快速达到自己想要的效果。
缺点：
- 浏览器兼容性比较差，版本低一点的浏览器可能实现不了自己想要的布局效果。
1、什么是flex：flex 是 Flexible Box 的缩写，意为”弹性布局”。
2、flex的作用：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
三、如何使用flex
1、使用flex布局只需要在最外层容器设置 display:flex; 即可。
2、我们可以将整个网页看成一个flex容器。
3、采用flex布局称为flex容器，所有子容器自动生成容器成员称为flex项目。
四、容器属性
1. justify-content 属性：用于设置或检索弹性盒子元素在主轴（横轴，X轴）方向上的对齐方式。
(1)justify-content: flex-start; /* 默认值，从行首起始位置开始排列 */
(2)justify-content: center; /* 元素沿横轴居中排列 */
(3)justify-content: flex-end; /* 元素沿横轴从行尾位置开始排列 */
(4)justify-content: space-between; /* 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 */
(5)justify-content: space-around; /* 均匀排列每个元素，每个元素周围分配相同的空间 */
(6)justify-content: space-evenly; /* 均匀排列每个元素，每个元素之间的间隔相等 */
(7)justify-content: stretch; /* 均匀排列每个元素， 'auto'-sized 的元素会被拉伸以适应容器的大小 */
(8)/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;
2. align-items 属性:定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
(1)align-items:stretch; /*默认值,元素被拉伸以适应容器。*/
(2)align-items:center; /*元素位于容器纵轴的中心,弹性盒子元素在该行的纵轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。*/
(3)align-items:flex-start; /*元素位于容器纵轴的开始位置。*/
(4)align-items:flex-end; /*元素位于容器纵轴的结束位置。*/
/*小提示*/
/*同时使用 align-items:center; 和 justify-content: center; 能很好地实现元素水平和垂直居中，这也是项目中经常见的*/
3. flex-direction 属性：规定灵活项目的方向。
(1)flex-direction:row; /*默认值,灵活的项目将水平显示，正如一个行一样。*/
(2)flex-direction:row-reverse; /*与 row 相同，但是以相反的顺序。*/
(3)flex-direction:column; /*灵活的项目将垂直显示，正如一个列一样。*/
(4)flex-direction:column-reverse; /*与 column 相同，但是以相反的顺序。*/
4. flex-wrap 属性:规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
(1)flex-wrap:nowrap; /*默认值,规定灵活的项目不拆行或不拆列,同时等分容器宽度。*/
(2)flex-wrap:wrap; /*规定灵活的项目在必要的时候拆行或拆列。*/
(3)flex-wrap:wrap-reverse; /*规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。*/
/*扩展*/
/*flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。*/五、项目（元素）属性
1. order 属性：设置或检索弹性盒模型对象的子元素出现的顺序。
2. flex-grow 属性：设置或检索弹性盒子的扩展比率（用于决定元素在有剩余空间的情况下是否扩大占满剩余空间）。
//取值：默认为 0 ，即不放大使用默认的自身宽度；
//取值为 1 时，将会放弃自身的宽度而占满容器剩余的空间，若有多个元素取值为 1 ，则平均分配容器剩余空间。
3. flex-shrink 属性：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值（用于决定容器空间不足时，是否缩放元素）。
//取值：默认值为 1 ，即容器空间不足时，元素也不缩放
//取值：值为 0 ，即容器空间不足时，元素放弃自身原有的宽度，进行缩放以自适应容器
4. flex-basis 属性：设置或检索弹性盒伸缩基准值。（用于设置项目宽度）
//取值：默认 auto ，项目保持默认的宽度，或以width为自身的宽度
//取了有效值后，权重是最高的，会覆盖默认的或width的宽度
要点：flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
值 描述 作用 auto 与 1 1 auto 相同。 等分放大缩小 none 与 0 0 auto 相同。 不放大，但等分缩小