父元素设置

使用flex布局的时候，给父元素设置display:flex;
justify-content:center  水平居中
align-items:center  垂直居中

设置子元素沿主轴排列 justify-content

1 flex-start 沿开始位置对齐
  display:flex;
    justify-content:flex-start
2 flex-end 沿末端位置对齐
    display:flex
    justify-content:flex-end
3 center 居中对齐
  display:flex
  justify-content:center
4 space-around 环绕均匀分布
  display:flex;
  justify-content:space-around;
5  space-between 两端对齐的均匀分布
   display:flex
   justify-content:space-between

设置子容器如何沿交叉轴排列 align-items

1 flex-start 沿开始位置对齐
  display:flex
  align-items:flex-start
2 flex-ensd 沿末尾对齐
     dispay:flex 
     align-item:flex-end
3 center 沿中间对齐
        diplay:flex
        align-items:center
4 baseline 基线对齐
  diplay:flex
  align-items:baseline
5 stretch 拉伸致和父元素一致
    diplay:flex
    align-items:stretch

子容器

1 在主容器上设置display:flex
2 单独设置子容器的排列 align-self 
每个子容器可以单独自定义沿主轴排列的方式，此属性和父容器的align-items 属性完全一致
如果两个同时设置，则以子容器align-self 属性为准

主轴的方向

 justify-content 决定子容器的主轴排列方式， align-items 为交叉轴的排列方式
 flex-direction 属性决定主轴的方向 ,交叉轴方向有主轴决定
1 向右   flex-direction:row
2 向下 flex-direction:column
3 向上 flex-direction:column-reverse
4 向左 flex-direction:row-reverse

flex 进阶 父容器

1 设置换行方式  flex-wrap 
display:flex
flex-wrap:nowrap  //不换行
flex-wrap:wrap 换行
flex-wrap:wrap-reverse //逆序换行（沿着交叉轴的反方向换行）

多行沿交叉轴对齐 align-content

1 display:flex
 align-content:flex-start 沿起始端对齐 
2 display:flex
 align-content:flex-end  沿末尾对齐
3 display:flex 
 align-content:center 沿中间对齐
4 display:flex 
align-content:space-around 环绕均匀对齐
5 display:flex
  align-content:stretch  拉伸和父容器一样的高度