flex布局重要知识点

flex:
        第一步使用display:flex; 或inline-flex 那么这个元素就成了容器，也叫弹性盒子

        特点：他子元素会自动成为容器成员我们可以称他们为项目item   

   
        注意：定义成flex以后，容器里面，浮动会失效float clear vertical

        优点:flex也叫弹性布局，可以简便完整响应式实现各种页面布局
                  

---

        
       属性：flex-wrap: 属性定义，如果一条轴线排不下，如何换行。
        
               值：     wrap   换行           

   
               nowrap  不换行
               wrap-reverse  能换行，但是倒叙

        
        flex-direction: 是用来设置容器的主轴方向的，子元素对齐是要参照主轴方向的
        
         值： row             从左向右
        row-reverse     从右向左
        column          从上向下
        column-reverse  从下向上

        
        
        
        flex-flow:  可以同时设置主轴方向和换行属性
        也是flex-wrap和flex-direction属性的简写形式(结合体)
        
         值： column wrap           从上向下换行
        column-reverse wrap   从下向上换行
        column-reverse nowrap  从下向上不换行
      
        
        
        justify-content:  设置在主轴上如何对齐
        
          值：flex-start      向主轴起点对齐
        flex-end        向主轴结束点对齐
        center          向主轴中心点对齐(居中)
        space-around    平均分配多余空间
        space-between   两边先贴边，中间平均分配

        
        
        align-items: 设置在侧轴如何对齐
        
         值： flex-start  向侧轴起点对齐
        flex-end    向侧轴结束点对齐
        center      向侧轴中心点对齐
        baseline    以文字的基线对齐

        
        
        align-content:属性定义了多根轴线的对齐方式
        如果项目只有一根轴线，该属性不起作用。
 
         值：flex-start     向侧轴的起点对齐。
        flex-end       向侧轴结束点对齐
        center         向侧轴中心点对齐
        space-between  两边先贴边，中间平均分配
        space-around   平均分配多余空间
        
  

---

     
        
        
        项目属性:
        order: 默认值0      数值越小，越靠前，越大越向后
        如果值相同，安装默认位置

        flex-grow:默认值是0当父元素有多余空间的时候不会放大 数字越大所分配额度越多
        
        flex-shrink:默认值 是1 父元素空间不够的时候会缩小，数组越大 缩小的程度越多

        flex-basis: 用于设置项目在容器中所占的空间，类似于width
  
                 放大        缩小           尺寸
        flex:    0              1               2
       
       align-self: 默认值 为auto  单独设置自己在交叉轴如何对齐