Flex佈局總結之flex的主要屬性及參數用法

    這篇筆記是系統學習flex時所記,適合複習使用,新手學習仍是要配合圖示和代碼來學習更容易理解。ssh

    flex佈局模型:彈性盒子( Flexible Box 或 flexbox),是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。ide

    首先要弄清楚幾個重要概念:佈局

    flex-container:彈性盒子容器學習

    flex-items:flex-container裏面的直接子元素叫作flex-itemsflex

    主軸:main axis:main start & main end & main sizeflexbox

    交叉軸:cross axis:cross start & cross end & cross sizespa

    用在flex container上的CSS屬性:flex-flow、flex-direction、flex--wrap、justify-content、align-items、align-contentcode

    應用在flex items上的CSS屬性:flex、flex-grow、flex-basis、flex-sshrink、order、align-selform

    開啓flex佈局:blog

.box { display:flex or inline-flex; } // 塊級元素或行內元素

   

    1. flex-direction :決定了main axis主軸方向,默認沿着main axis主軸從main start開始從main start開始往main end方向排布。

    row---默認從左至右, row-reverse----從右至左, column----從上至下, column-reverse----從下至上


    2. justify-content:決定了flex items在主軸上的對齊方式
    flex-start-----默認與main start對齊, flex-end------與main end對齊, center-------居中對齊

    space-between-----兩邊對齊中間等分間距對齊, space-evenly-----等分間距對齊, space-around-----邊距時中間距離一半


    3. align-items:決定了flex items在cross axis上的對齊方式

    normal------效果至關於stretch-----當flex items在cross axis方向的size爲auto時,會自動拉伸至填充flex container

    flex-start----默認與cross start對齊, flex-end------與cross-end對齊, center------居中對齊, baseline------基線對齊,第一行文本底部爲基線


    4. flex-wrap: 默認nowrap,不換行;wrap,換行。

    默認狀況下,全部的flex items都會在同一行顯示 , wrap-reverse-----對比wrap,cross start 與cross end 相反


    5. flex-flow: 是flex-direction || flex-wrap的簡寫,能夠省略,順序任意


    6. align-content: 決定了多行flex items 在cross axis上的對齊方式,用法與justify-content相似
    stretch-----默認值,與align-items的stretch相似, flex-start-----默認與cross start對齊, flex-end------與cross end對齊, center-------居中對齊

    space-between-----兩邊對齊中間等分間距對齊, space-evenly-----等分間距對齊, space-around-----邊距時中間距離一半


    7. order: 決定flex items的排布順序,默認爲0,值能夠設置爲任意整數(正,負,0),值越小排在前面

    8. align-self: flex items經過它覆蓋flex container設置的align-items

    auto(默認值):聽從flex container的align-items設置,

    stretch、flex-start、flex-end、center、baseline,效果跟align-items一致


    9. flex-grow: 決定了flex items如何擴展

    能夠設置任意非負數字(正小數、正整數、0),默認是0。

    當flex container在main axis方向上有剩餘size時,flex-grow屬性纔會生效

     若是全部flex items的flex-grow總和sum超過1,每一個flex item擴展的size爲:flex container的剩餘size*flex-grow/sum

    若是全部flex items的flex-grow總和sum不超過1,每一個flex item擴展的size爲:flex container的剩餘size*flex-grow

    flex items擴展後的最終size不能超過max-width\max-height


    10. flex-shrink:決定了flex items如何收縮
    能夠設置任意非負數字(正小數、正整數、0),默認值是1

    當flex items在main axis方向上超過了flex container的size,flex-shrink屬性纔會有效

    若是全部flex items的flex-shrink總和超過1,每一個flex item收縮的size爲:flex items超出flex container的size*收縮比例/全部flex items的收縮比例之和 

    若是全部flex items的flex-shrink總和sum不超過1,每一個flex item收縮的size爲:flex items超出flex container的size*sum*收縮比例/全部flex items的收縮比例之和

    收縮比例=flex-shrink*flex item的base size

    base size就是flex item放入flex container以前的size

    flex items收縮後的最終size不能小於min-width\min-height

 

    11. flex-basis:用來設置flex items在main axis方向上的base size

    auto(默認值)、具體的寬度數值(100px)

    決定flex items最終base size的因素,從優先級高到低

    max-width\max-height\min-width\min-height > flex-basis > width\height > 內容自己的size

 

    12. flex:是flex-grow || flex-shrink || flex-basis的簡寫,flex屬性能夠指定1個,2個或3個值

    單值語法:無單位數---grow,有效寬度值---basis,關鍵字none,auto或initial

    雙值語法:第一個必須爲無單位數,第二位:無單位---shrink,有效寬度值---basis

    三值語法:無單位,無單位,有效寬度值


    13. 總結:

    佈局---->左側------->item------->清除浮動(父元素設置固定高度 or clear-fix寫在父元素)

    語義化標籤:nav,header,footer,section,article,aside

    媒體標籤:video、audio

    input:placeholder、multiple、autofocus、type(date、time、tel、color、number、e-mail......)

相關文章
相關標籤/搜索