flex布局

display:flex激活

6个属性
flex-direction:row/column 默认row
flex-wrap:nowrap/wrap 项目换行方式
flex-flow:flex-derection||flex-wrap连用
justify-content:flex-start/flex-end/center
align-items:项目在交叉轴上如何对齐
align-content:多根轴线的对齐方式


水平居中：justify-content:center
垂直居中：align-items:center


flex基本概念：
一、轴
①主轴main axis
flex-direction//设置主轴方向
row(向左)/column(向下)/row-reverse(向左)/column-reverse(向上)
②交叉轴cross axis
主轴逆时针旋转90度就得到了交叉轴，也就是方向由主轴确定
二、容器
①父容器container
1.justify-content//设置子容器沿主轴排列
位置排列
flex-start(起始端对齐)/flex-end(末尾端对齐)/center(居中对齐)
分布排列
space-between(子容器沿主轴均匀分布位于首尾两端的子容器到父容器的距离是子容器间距的一半)
space-around(子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切)
2.align-items//设置子容器如何延交叉轴排列
位置排列
flex-start(起始端对齐)/start-end(末尾端对齐)/center(居中对齐)
基线排列
baseline(baseline默认指首行文字，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线)
拉伸排列
stretch(子容器延交叉轴方向的尺寸拉伸至与父容器一致)
②子容器item
1.flex//在主轴上如何伸缩
单指
宽高
flex-basis:10em/30px/auto/content
无单位
flex-grow:1/2
两个值
flex-grow/flex-basis:1 30px
flex-grow/flex-shink:1 1/2 2
三个值
flex-grow/flex-shink/flex-basis:1 1 10%
none
0 0 auto
2.align-self//单独设置子容器如何延交叉轴排列
位置排列
flex-start/flex-end/center
基线排列
baseline
拉伸排列
stretch
子元素也可单独设置属性，以子元素的设置为准




进阶概念：
1.父容器
flex-wrap//设置换行方式
nowrap不换行
wrap换行
wrap-reverse逆序换行（延交叉轴的反方向换行）
flex-flow//flex-direction与flex-wrap的组合
row colume/wrap nowrap自行配对
align-content//多行延交叉轴对齐
flex-start/flex-end/center/space-around/space-between/stretch
2.子容器
flex-basis//设置基准大小
具体像素值 lext-direction:row时表示宽度，反之表示高度
flex-grow//设置扩展比例
第一个子元素设置为1 第二个子元素设置为2 则以1:2分布
flex-shrink//设置收缩比例
第一个元素设置为1 第二个子元素设置为2 则超出部分按1:2的比例从子容器中减去（第一个减1 第二个减2）
order//设置排列顺序
数值越小排列越前，可以为负值，覆盖html中顺序