flex布局：

flex布局中，一些属性定义会失效，如float、clear等

关于flex布局的属性：

主轴和交叉轴

在flex布局中，可以想象为在二维坐标系中，主轴为x轴，交叉轴为y轴，并且交叉轴和主轴呈90度，flex-direction可以设置主轴的方向

容器和项目：

在flex布局中有两种角色，容器可以理解为父元素，项目可以理解为子元素

容器：六个属性

• flex-direction：决定主轴的方向

flex-direction：column

   
             
    
       
     
       
     
       
     
       
     
   
    
复制代码

flex-direction：row（默认）

    
                
    
        
     
        
     
        
     
        
     
    
    
复制代码

• flex-wrap：决定主轴里的项目是否换行

    
                
    
        
     
        
     
        
     
        
     
        
     
        
     
        
     
    
    
复制代码

• flex-flow：flex-direction和flex-wrap的集合
• align-items：项目的对齐方式（交叉轴上的对齐）

align-items:flex-end

    
                
    
        
     
        
     
        
     
        
     
        
     
        
     
        
     
    
    
复制代码

align-items:center

    
                
    
        
     
        
     
        
     
        
     
        
     
        
     
        
     
    
    
复制代码

• justify-content：容器中项目的对齐方式（主轴轴上的对齐）

justify-content：flex-end

    
            
    
    
     
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
    
复制代码

justify-content: center

    
            
    
    
     
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
    
复制代码

• align-content：多根轴线的对齐方式(一根轴线无效)

align-content: flex-end

    
            
    
    
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
     
    
复制代码

项目：六个属性

• order：排列顺序

先初始化一个页面如下：

我们将偶数的div排到前面

    
            
    
    
     
      1
     
 
     
      2
     
 
     
      3
     
 
     
      4
     
 
     
      5
     
 
     
      6
     
 
     
      7
     
 
     
      8
     
 
     
      9
     
 
     
      10
     
 
     
      11
     
 
     
      12
     
    
复制代码

运行效果：

• flex-grow：有剩余空间，决定是否扩张（默认：0）

未占满一个主轴时：

设置flex-frow：1时：

    
            
    
     
     
      6
     
 
     
      7
     
 
     
      8
     
 
     
      9
     
 
     
      10
     
 
     
      11
     
 
     
      12
     
    
复制代码

• flex-shrink：太满，决定是否缩小（默认：1）

未占满一个主轴时：

沾满并溢出主轴时：

    
            
    
    
     
      1
     
 
     
      2
     
 
     
      3
     
 
     
      4
     
 
     
      5
     
 
     
      6
     
 
     
      7
     
 
     
      8
     
 
     
      9
     
 
     
      10
     
 
     
      11
     
 
     
      12
     
    
复制代码

设置flex-shrink：0时：

    
            
    
    
     
      1
     
 
     
      2
     
 
     
      3
     
 
     
      4
     
 
     
      5
     
 
     
      6
     
 
     
      7
     
 
     
      8
     
 
     
      9
     
 
     
      10
     
 
     
      11
     
 
     
      12
     
    
复制代码

• flex-basis：项目的宽度
• flex：flex-grow，flex-shrink，flex-basis
• align-self：项目在交叉轴上的排列

关于雪碧图

雪碧图：background-position 响应式界面下：background-size：定位雪碧图的大小 给定一张图片，我们想象是很多图片的组合

截取2号图片作为背景图

    
                
    
复制代码

运行效果：

关于雪碧图的兼容： 1、兼容部分老的IE浏览器：可以使用background-position-x & background-position-y进行兼容 2、兼容部分老版浏览器：使用css hock技术