几个重要的概念 主轴、主轴开始点、主轴结束点、 交叉轴 

容器（display:flex的元素上）属性

• flex-direction 表明主轴方向 可选值 
•  默认为row 就时横向从左到右显示 row-reverse就是横向靠右显示

  column就时纵向从上到下显示 column-reverse 就是纵向从下到上显示

• flex-wrap 表示 容器内显示的项是否换行，默认不换行nowrap.可选址

  不换行，如果超出宽度，自动整体缩减. wrap换行，wrap-reverse 翻转换行。注意换行和主轴方向有关

• flex-flow  时flex-direction和flex-wrap的简写 只有两个参数
• justify-content 主轴对齐选项(水平) 可选值有
• 

   

• align-items 交叉轴对齐选项(垂直)
• 可选值

   

• align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

 

 

            
                                     
     
            
      
                       默认主轴方向row 其他的有row-reverse colum colum-reverse            
      
            
      
                       默认不换行            
      
            
      
                       可以在container 上设置换行            
      
            
      
                       4            
      
            
      
                       5            
      
            
      
                       6            
      
        
     
        
     
            
      
                       换行 和 主轴方向有关系            
      
            
      
                       默认时row            
      
            
      
                       3            
      
            
      
                       4            
      
            
      
                       5            
      
            
      
                       6宽度不够 换行到第一行            
      
        
     
        
     
            
      
                   1            
      
            
      
                   2            
      
            
      
                       3            
      
            
      
                       4            
      
            
      
                       5            
      
            
      
                       6            
      
        
     
    

 

 效果