Flex布局

一:组成部分
  弹性容器  display: flex;
  弹性盒子
  主轴(默认是水平方向)  justify-content: ;
  侧轴(默认是垂直方向) align-items:;

 二:特点:
    1.默认沿着主轴排列,主轴默认是水平方向
    2.挤压(当盒子过多弹性盒子会自动调整宽度)
    3.拉伸(当子元素没有高度时,默认是父元素高)

注意点: 
    在flex布局中,元素不在区分块,行内或者行内块,统一称之为弹性盒子,弹性盒子的特点是一行显示多个默认沿主轴排列, 可以设置宽高

三:flex主轴排列方式
    1.从起点开始排列 默认值 
        justify-content: flex-start;
    2.从终点开始排列  从终点开始排
        justify-content: flex-end;
    3.盒子居中  子盒子居中
         justify-content: center;
    4.两边靠边中间自适应
         justify-content: space-between;
    5.盒子比例平分,按照1:2的比例划分
        justify-content: space-around;
    6.盒子等比例平分,按照1:1的比例划分
         justify-content: space-evenly;

四:flex侧轴排列方式
    属性名:align-items:
    1.侧轴单行排列方式(控制一整行盒子): 
        1.默认值 拉伸
            align-items: stretch
                当子元素没有高时,默认拉伸
        2.侧轴起点开始排列
            align-items: flex-start;
        3.侧轴终点开始排列
            align-items: flex-end;
        4.侧轴居中 
             align-items: center;
    属性名:align-self:
    五.侧轴单个元素排列方式(控制一个盒子)
         align-self: center;
        align-self: flex-end;
        属性值与侧轴排列方式属性值一致

六.修改主轴方向 垂直方向侧轴自动变换到水平方向 
    flex-direction: column;

七.flex伸缩比
    伸缩比设置尺寸大小
    注意点:
         1.伸缩比占的父元素的大小
         2.伸缩比会优于宽度生效 
        3. 伸缩比默认是水平方向则设置的是宽,垂直方向设置的高度的比例
        伸缩比应用场景: 圣杯布局 

八.flex换行
    弹性盒子换行
          flex-wrap: wrap
    弹性盒子不换行
        flex-wrap: nowrap(默认值)

九.flex多行侧轴对齐方式
    语法:algin-content
    取值和主轴对齐方式一致
    取值
        多行侧轴盒子起点上方排列
             align-content: flex-start;
        多行侧轴盒子起点下方排列 
             align-content: flex-end;
        多行侧轴盒子居中排列
            align-content: center;
        多行侧轴盒子1:2排列
            align-content: space-around;
        多行侧轴盒子1:1排列
             align-content: space-evenly;
        多行侧轴盒子两边靠边,中间自适应排列
            align-content: space-between;