flex弹性布局_汪刚_2023.4.26

今日所学内容：

• Flex布局的原理
  
  • 传统布局和flex布局的区别
    
    • 传统布局
      
      • 传统布局的兼容性更好
        
    
    
    • 布局会比较的繁琐、
      
    
    
    • 局限性，在移动端中布局的速度相对较慢
      
  
  
  • flex布局
    
    • 操作会比较的方便，布局很简单，移动端使用很广泛
      
    • PC端的浏览器可能会有兼容性的问题，IE11以下的低版本浏览器对flex支持情况不好
      
  
  
  • 总结
    
    • PC端布局主要采用传统方式
      
    • 移动端布局或者PC端不考虑兼容性的时候，使用flex布局
      
  • 原理
    
    • flex 是弹性布局的意思，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局
      
  
  
  • 当我们的父盒子设置为flex布局之后，子元素里面的float、clear和vertical-align属性都将失效
    
  • 采用flex布局的父元素叫做flex容器（flex-container），子元素叫做flex项目（flex-item）
    

• Flex布局的父项常见属性
  
  • flex-direction
    
    • 设置主轴方向
      
    • 常用属性值
      
      • row  默认值，子元素沿x轴从左向右排列
        
    
    
    • row-reverse 子元素沿x轴从右向左进行排列
      
    • column 子元素沿y轴从上到下进行排列
      
    • column-reverse 子元素沿y轴从下到上进行排列
      
    • 在flex布局中x轴和y轴分别是水平向右和垂直向下的
      
    • x轴是默认的主轴，如果想将y轴设置为主轴，就可以使用flex-direction 属性
      
  • justify-content
    
    • 控制主轴子元素的排列方式
      
    • 常用属性值
      
      • flex-start 默认值，控制子元素沿主轴头部开始排列，如果主轴是x轴，就代表从左到右
        
      • flex-end 控制子元素沿主轴的尾部开始排列，如果是y轴，代表从下往上
        
      • center 控制子元素沿主轴居中对齐
        
      • space-around 控制子元素平分主轴剩余空间
        
      • space-between 控制子元素两侧元素先贴边，然后剩余的元素平分主轴剩余空
        
  • flex-wrap
    
    • 设置子元素是否换行
      
    • 在flex布局中，子元素超过父元素的宽度默认是不换行，如果需要换行就要用该属性来进行
      

• align-items
  
  • 设置主轴的子元素排列方式（单行）
    
  • 常用属性值
    
    • flex-start 从侧轴头部开始排列
      
    • flex-end 从侧轴尾部开始排列
      
    • center 沿侧轴居中排列
      
    • stretch 拉伸子元素到父级的宽度或高度（和主轴方向相关）
      

• align-content
  
  • 设置侧轴上的子元素的排列方式（多行）
    
  • 常用属性值
    
    • align-content: flex-start;
      
      • 默认值：沿侧轴头部开始排列
        
    • align-content: flex-end;
      
      • 沿侧轴尾部开始排列
        

• align-content: center;
  
  • 沿侧轴居中对齐
    
• align-content: space-around;
  
  • 侧轴上的多行子元素平分侧轴剩余空间
    


• align-content: space-between;
  
  • 侧轴上的多行子元素两侧先沿侧轴贴边，剩余的子元素平分侧轴剩余空间
    
• align-content: stretch;
  
  • 侧轴上的子元素拉伸到平分父级高度或宽度（与主轴方向相关）
    

• aligin-items和align-content的区别
  
  • algin-items适用于单行的情况，只有上对齐、下对齐、居中对齐和拉伸。
    
  • algin-content 适用于多行的情况，可以设置上对齐、下对齐、居中对齐、拉伸、平分空间等属性值。
    

• flex-flow
  
  • 是flex-direction flex-wrap的复合属性
    
  • 属性值：flex-direction flex-wrap
  • justify-content
    
    • 控制主轴子元素的排列方式
      
    • 常用属性值
      
      • flex-start 默认值，控制子元素沿主轴头部开始排列，如果主轴是x轴，就代表从左到右
        
      • flex-end 控制子元素沿主轴的尾部开始排列，如果是y轴，代表从下往上
        
      • center 控制子元素沿主轴居中对齐
        
      • space-around 控制子元素平分主轴剩余空间
        
      • space-between 控制子元素两侧元素先贴边，然后剩余的元素平分主轴剩余空间。
        

• 设置子元素是否换行
• 在flex布局中，子元素超过父元素的宽度默认是不换行，如果需要换行就要用该属性来进行设置
  

• algin-items适用于单行的情况，只有上对齐、下对齐、居中对齐和拉伸。
• algin-content 适用于多行的情况，可以设置上对齐、下对齐、居中对齐、拉伸、平分空间等属性值。