flex布局开发

逃跑的火焰

flex布局开发

• 布局原理
  • flex时flexible Box的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以定位flex布局
  • 【注意】
    • 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
    • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
      
    
    
• 常见父项属性
  
  
  • flex-direction：设置主轴的方向
    
    
    • flex-direction属性值决定主轴的方向（及项目的排列方向）
    • 【注意】
      
      
      • 主轴和侧轴是会变化的，就看flex-diretion设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的
        
        

属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从上到下

justify-content：设置主轴上的子元素排列方式

• 【注意】
  
  
  • 使用这个属性之前要确定好主轴是哪个
    
    

属性值说明
flex-start默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐
space-around平分剩余空间
space-between先两边贴边 在平分剩余空间


flex-wrap：设置子元素是否换行


属性值说明
nowrap默认值，不换行
wrap换行

align-content：设置侧轴上的子元素的排列方式（多行）


属性值说明
flex-start从上到下
flex-end从下到上
center垂直居中
strech拉伸（默认值）【项目不要给高度】
space-around子项在侧轴平分剩余空间
stretch设置子项元素高度平分元素高度

align-items：设置侧轴上的子元素排列方式（单行）
属性值说明
flex-start从上到下
flex-end从下到上
center垂直居中
strech拉伸（默认值）【项目不要给高度】

• • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
    
    
• 子项常见属性
  
  
  • flex子项占的分数
    
    

.item{flex:<number>;}

• align-self控制子项子级在侧轴的排列方式
  • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
    
  默认值是auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch
• order属性定义子项的排列顺序（前后顺序）
  
  
  • 数值越小排列越靠前