css中的flex布局
flex布局
任何一个容器都可以指定为flex布局
当父盒子设为flex布局后，子元素的float、clear、vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex的元素，称为Flex容器（flex container）简称”容器“。
它的所有子元素自动成为容器成员，成为Flex项目（flex item）简称“项目”
启用flex布局：给标签加上样式：display:flex;
常见的父项属性：
1、flex-direction设置主轴方向
flex布局，分为主轴和侧轴方向也称行和列、x轴和y轴
默认主轴方向就是x方向，水平向右
默认侧轴方向就是y方向，水平向下
元素跟着主轴排列
属性值：row：默认，为水平方向,相当于float:left
row-reverse：水平反方向，相当于float:right，即从右到左
column：垂直方向，即从上到下
column-reverse：垂直反方向，即从下到上
2、justify-content 设置主轴上的子元素排列方式
使用该属性之前一定要确定好主轴方向
属性值：flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右；如果主轴是Y轴，则从上到下
flex-end：从尾部开始排列，如果主轴是x轴，则子元素贴着右边，但是顺序不变 ，如果主轴是y轴，子元素就贴着下边
center：在主轴居中对齐（如果主轴是X轴则水平居中）
space-around：平分剩余空间，平分父元素的空间，每个子元素之间的间距一样
space-between：先两边贴边，再平分剩余空间：父元素里面的子元素两边贴着边缘，剩余的子元素平分剩下的空间
3、flex-wrap 设置子元素是否换行
默认情况下，子元素是不换行的，如果父元素一行装不下，会缩小子元素的宽度，放到父元素空间里面。
属性值：nowrap：默认值，不换行
wrap：换行
4、align-items设置侧轴（默认侧轴为y轴）上的子元素排列方式（单行）
设置子项在侧轴上的排列顺序，用于子元素是单行的情况下，即子元素不换行
属性值：flex-start：默认值，从侧轴的头部开始排列
flex-end：从侧轴的尾部开始排列
center：在侧轴中垂直居中显示
stretch：拉伸：如果子元素设置高度，设置stretch就没有变化，只有当子元素没有设置高度或者高度等于auto时，子元素的高度会被拉伸到和父元素一样高
baseline：各个Flex Item相对于基线对齐。
A .若Flex Item内部没有任何文本内容，则Flex Item在Flex Container的顶端 且各个Flex Item之间底部对齐。 B .若Flex Item内部具备文本内容，则各个Flex Item相对于文本基线对齐
5、align-content 设置侧轴上的子元素的排列顺序（多行）
设置子项在侧轴上的排列顺序，只能用于多行的情况下，即子元素换行，在单行情况下没有效果
属性值：flex-start：默认值，从侧轴的头部开始排列
flex-end：从侧轴的尾部开始排列
center：在侧轴中垂直居中显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
stretch：设置子项元素高度平分父元素高度，跟单行效果差不多。如果子元素设置高度，设置stretch就没有变化，只有当子元素没有设置高度或者高度等于auto时，子元素才会平分父元素的高度
*****注意align-items和align-content的区别
flex-flow属性是flex-direction和flex-wrap属性的复合属性，相当于flex-direction和flex-wrap的简写
例如：flex-flow:row wrap;
子项常见属性
1、flex属性
定义子项目分配剩余空间，用flex来表示占多少份数
flex: <number>; // flex 的值是数字
flex:1;
2、align-self控制子项自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性
例如：align-self:flex-end;
3、order属性定义子项的排序顺序（前后顺序）
数值越小，排列越靠前，默认值为0
例如order: -1;