浅谈flex

flex基础点

flex的两种写法
    old：-webkit-box
    new: -webkit-flex  flex
        1.容器 项目
        2.主轴 侧轴
        3.项目永远排列在主轴的正方向上

老版本

• 容器（注意:项目永远是在主轴上排列的）
  • 容器的布局方向(本质上控制的是主轴是哪一根)
    
    box-orient:horizontal (主轴是x轴)
    
    box-orient:vertical (主轴是y轴)
  • 容器的排列方向(本质上控制的是主轴的方向)
    
    box-direction:normal(正方向)
    
    box-direction:reverse(反方向)
  • 富裕空间的管理(富裕空间的管理不会给项目去分配空间，只是管理富裕空间的位置)
    • 主轴(x,y代表主轴是哪一根)
      
      • box-pack
        
        start: 右(x) 下(y)
        
        end: 左(x) 上(y)
        
        center:富裕空间在整体的两边
        
        justify:富裕空间在项目的之间
    • 侧轴(x,y代表侧轴是哪一根)
      • box-align
        
        start: 右(x) 下(y)
        
        end: 左(x) 上(y)
        
        center:富裕空间在整体的两边
• 项目
  • 弹性空间的管理（将富裕空间按比例分配到项目上）
    • box-flex指定比例

新版本

• 容器
  • 容器的布局方向(本质上控制的是主轴是哪一根)
    
    flex-direction:row (主轴是x轴)
    
    flex-direction:column (主轴是y轴)
  • 容器的排列方向(本质上控制的是主轴的方向)
    
    flex-direction:row (正方向)/ row-reverse (反方向)

flex-direction:column(正方向）/column-reverse(反方向)
  • 富裕空间的管理(富裕空间的管理不会给项目去分配空间，只是管理富裕空间的位置,富裕空间的管理默认是作用于每一行的)
    • 主轴(x,y代表主轴是哪一根)
      • justify-content:
        
        flex-start：富裕空间在主轴的正方向
        
        flex-end：富裕空间在主轴的反方向
        
        center:富裕空间在两边
        
        space-between:富裕空间在项目之间
        
        space-around(box 没有的):：富裕空间在项目两边
    • 侧轴(x,y代表侧轴是哪一根)
      • align-items:
        
        flex-start：富裕空间在侧轴的正方向
        
        flex-end：富裕空间在侧轴的反方向
        
        center：富裕空间在两边
        
        baseline(box 没有的):富裕空间按基线分配
        
        stretch(box 没有的):在项目没有高度的情况实现等高布局（高度默认被拉伸）
• 项目
  • 弹性空间的管理（将富裕空间按比例分配到项目上）
    flex-grow指定比例

新版本新增的

• 容器
  • flex-wrap（本质上是用来控制侧轴的方向）
    • nowrap:所有元素在一行
    • wrap:元素自动换成多行
    • wrap-reverse:元素自动换成逆序的多行
  • align-content（控制多行/列时富裕空间的管理，单行/列时不起作用）
    • flex-start:多行集中在顶部
    • flex-end：多行集中在底部
    • center：多行居中
    • space-between：行与行之间保持相等距离
    • space-around：每行的周围保持相等的距离
  • flex-flow（flex-wrap flex-direction的简写属性，本质上用来控制主轴和侧轴是哪一根，以及他们各自的方向）
    • 第一个值为：方向
    • 第二个值为：单列还是多列
• 项目
  • order(控制项目在主轴上的排列顺序)
  • 大的排列在后面，可以为负值
  • align-self（(控制项目自己在侧轴上的富裕空间管理,会覆盖align-items的值）
    • flex-shrink：收缩因子
    • flex-grow：拉伸因子
    • flex-basis：基值
  • 等分等比布局
  • flex :1 (flex-shrink：1 flex-grow：1 flex-basis：0%) ----> 等分等比例布局

多列布局

• 栏目宽度column-width指定每一栏的宽度（这是多列布局的第一种分法）
• 栏目列数olumn-count指定要多少栏（这是多列布局的第二种分法）
• 栏目距离column-gap
• 栏目间隔线column-rule

注意点

为什么要学习老版本flex?
    因为在移动端大多数浏览器上只支持老版本

在老版本的felx中，容器的布局和排列方向是由两个属性四个属性值来控制的
在新版本的felx中，容器的布局和排列方向是由一个属性四个属性值来控制的

flex-direction自带富裕空间的管理

默认值

拉伸因子
    flex-grow:0； box-flex:0;
收缩因子
    flex-shrink: 1;