flex基礎(chǔ)點

flex的兩種寫法
    old：-webkit-box
    new: -webkit-flex  flex
        1.容器 項目
        2.主軸 側(cè)軸
        3.項目永遠(yuǎn)排列在主軸的正方向上

老版本

• 容器（注意:項目永遠(yuǎn)是在主軸上排列的）
  • 容器的布局方向(本質(zhì)上控制的是主軸是哪一根)
    
    box-orient:horizontal (主軸是x軸)
    
    box-orient:vertical (主軸是y軸)
  • 容器的排列方向(本質(zhì)上控制的是主軸的方向)
    
    box-direction:normal(正方向)
    
    box-direction:reverse(反方向)
  • 富?？臻g的管理(富?？臻g的管理不會給項目去分配空間，只是管理富?？臻g的位置)
    • 主軸(x,y代表主軸是哪一根)
      
      • box-pack
        
        start: 右(x) 下(y)
        
        end: 左(x) 上(y)
        
        center:富裕空間在整體的兩邊
        
        justify:富?？臻g在項目的之間
    • 側(cè)軸(x,y代表側(cè)軸是哪一根)
      • box-align
        
        start: 右(x) 下(y)
        
        end: 左(x) 上(y)
        
        center:富?？臻g在整體的兩邊
• 項目
  • 彈性空間的管理（將富裕空間按比例分配到項目上）
    • box-flex指定比例

新版本

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

flex-direction:column(正方向）/column-reverse(反方向)
  • 富?？臻g的管理(富?？臻g的管理不會給項目去分配空間，只是管理富?？臻g的位置,富?？臻g的管理默認(rèn)是作用于每一行的)
    • 主軸(x,y代表主軸是哪一根)
      • justify-content:
        
        flex-start：富裕空間在主軸的正方向
        
        flex-end：富?？臻g在主軸的反方向
        
        center:富裕空間在兩邊
        
        space-between:富?？臻g在項目之間
        
        space-around(box 沒有的):：富?？臻g在項目兩邊
    • 側(cè)軸(x,y代表側(cè)軸是哪一根)
      • align-items:
        
        flex-start：富?？臻g在側(cè)軸的正方向
        
        flex-end：富?？臻g在側(cè)軸的反方向
        
        center：富?？臻g在兩邊
        
        baseline(box 沒有的):富?？臻g按基線分配
        
        stretch(box 沒有的):在項目沒有高度的情況實現(xiàn)等高布局（高度默認(rèn)被拉伸）
• 項目
  • 彈性空間的管理（將富?？臻g按比例分配到項目上）
    flex-grow指定比例

新版本新增的

• 容器
  • flex-wrap（本質(zhì)上是用來控制側(cè)軸的方向）
    • nowrap:所有元素在一行
    • wrap:元素自動換成多行
    • wrap-reverse:元素自動換成逆序的多行
  • align-content（控制多行/列時富裕空間的管理，單行/列時不起作用）
    • flex-start:多行集中在頂部
    • flex-end：多行集中在底部
    • center：多行居中
    • space-between：行與行之間保持相等距離
    • space-around：每行的周圍保持相等的距離
  • flex-flow（flex-wrap flex-direction的簡寫屬性，本質(zhì)上用來控制主軸和側(cè)軸是哪一根，以及他們各自的方向）
    • 第一個值為：方向
    • 第二個值為：單列還是多列
• 項目
  • order(控制項目在主軸上的排列順序)
  • 大的排列在后面，可以為負(fù)值
  • align-self（(控制項目自己在側(cè)軸上的富?？臻g管理,會覆蓋align-items的值）
    • flex-shrink：收縮因子
    • flex-grow：拉伸因子
    • flex-basis：基值
  • 等分等比布局
  • flex :1 (flex-shrink：1 flex-grow：1 flex-basis：0%) ----> 等分等比例布局

多列布局

• 欄目寬度column-width指定每一欄的寬度（這是多列布局的第一種分法）
• 欄目列數(shù)olumn-count指定要多少欄（這是多列布局的第二種分法）
• 欄目距離column-gap
• 欄目間隔線column-rule

注意點

為什么要學(xué)習(xí)老版本flex?
    因為在移動端大多數(shù)瀏覽器上只支持老版本

在老版本的felx中，容器的布局和排列方向是由兩個屬性四個屬性值來控制的
在新版本的felx中，容器的布局和排列方向是由一個屬性四個屬性值來控制的

flex-direction自帶富?？臻g的管理

默認(rèn)值

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