flex布局

一.flex布局与传统布局

传统布局：兼容性好；布局繁琐；局限性，不能在移动端很好的布局
flex弹性布局：操作方便，布局简单，移动端应用广泛；PC端仅其支持情况较差；更低版本不支持或仅仅部分支持

二.flex布局原理

1.布局原理
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2.注意
任何一个容器都可以指定为flex布局
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效；
伸缩（盒）布局=弹性（盒）布局=flex布局；

三.flex布局父项常见属性

1.flex-direction设置主轴的方向
默认主轴x轴，行row
（1）主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下
（2）属性值
主轴和侧轴是会变化的，就看flex-direction设置哪个轴为主轴
默认从左到右：row
从右到左：row-reverse
从上到下：column
从下到上：column-reverse

2.justify-content设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式（在使用这个属性之前要去欸的那个好主轴是哪个）
默认值，从头部开始，如果轴是x轴，则从左到右：flex-start
从尾部开始排列：flex-end
在主轴居中对齐（如果主轴是x轴则水平居中）：center
平分剩余空间：spaca-around
先两边贴边，再平分剩余部分：space-between

3.flex-wrap设置子元素是否换行
默认情况下，子元素不换行，排在一条直线上，如果装不开，会缩小元素的宽
换行：wrap
不换行，默认：nowrap

4.align-items设置侧轴上的子元素排列方式（单行）
从上到下：flex-start
从下到上：flex-end
挤在一起居中（垂直居中）：center
拉伸（默认值）：stretch（子盒子不要给宽度）

5.align-content设置侧轴子元素排列（多行）
设置子项再侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的
默认值在侧轴的头部开始排列：flex-start
在侧轴的尾部开始排列：flex-end
在侧轴中间显示：center
子项在侧轴先分布在两头，再平分剩余空间：space-between
子项在侧轴平分剩余空间：space-around
设置子项元素高度平分父元素高度：stretch

6.flex-flow
是flex-direction和flex-wrap的结合
语法格式：flex-flow：row wrap；

四.flex布局子项常见属性

1.flex属性
flex属性定义子项目分配剩余空间，用flex表示占多少份数
代码格式：flex：<number>(数值越大，分配的越多)

2.align-self控制子项目自己在侧轴上的排列方式
align-self属性单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性，默认值为auto，表示继承父亲的align-items属性，如果没有父元素，则等同于stretch

3.order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0，注意：和z-index不一样