成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

彈性布局的基礎(chǔ)講解

Yangder / 1547人閱讀

摘要：彈性布局的基礎(chǔ)講解彈性布局是由在年提出的一種布局方法，目前瀏覽器都已經(jīng)支持彈性布局忽略吧。其值為表示不縮小縮放的方向?yàn)榈姆较?。默認(rèn)值為，表示繼承父元素的屬性，如果沒有父元素，則為。

彈性布局的基礎(chǔ)講解 
彈性布局是由w3c在2009年提出的一種布局方法，目前瀏覽器都已經(jīng)支持彈性布局（忽略IE6吧）。本文主要講解彈性布局的基本語法并將其應(yīng)用到實(shí)際網(wǎng)頁布局中

如何應(yīng)用彈性布局，代碼如下：




    
    
    
    Document
    


    

        
Document1

        
Document2

        
Document3

        
Document4

        
Document5

運(yùn)行結(jié)果如下：

容器的設(shè)置

flex有6個屬性可以設(shè)置：

flex-direction:row(主軸由左向右，默認(rèn)) / row-reverse（主軸由右向左） / column （主軸由上向下）/ column-reverse （主軸由下向上） 決定主軸的方向

flex-wrap:nowrap（默認(rèn)，不換行） / wrap(換行) / wrap-reverse(換行，第一行在下方) 決定項(xiàng)目在一條軸線上排不下時的換行方式

flex-flow：是上面兩個屬性的簡寫模式 默認(rèn)值：flex-flow：row nowrap。

justify-content：flex-start(默認(rèn)值，左對齊) / flex-end（右對齊） / center（居中） / space-between（兩端對齊，項(xiàng)目之間的間隔相等） /
space-around（每個項(xiàng)目之間的間隔相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊框之間的價格大一倍）; 決定項(xiàng)目在主軸上的對齊方式。space-between/around在自適應(yīng)調(diào)節(jié)間距時很有用

align-items：flex-start（交叉軸的起點(diǎn)對齊） / flex-end（交叉軸的終點(diǎn)對齊） / center（交叉軸的中點(diǎn)對齊） / baseline（項(xiàng)目的第一行文字的基線對齊）/stretch（默認(rèn)值，若項(xiàng)目未設(shè)置高度或設(shè)置為auto，項(xiàng)目將占滿這整個容器的高度）。 定義項(xiàng)目在交叉軸上的對齊方式

align-content：flex-start（與交叉軸的起點(diǎn)對齊） / flex-end（與交叉軸的終點(diǎn)對齊） / center（與交叉軸的中點(diǎn)對齊） /
space-between（與交叉軸的兩端對齊，軸線之間的間隔平均分布） /space-around（每跟軸線兩側(cè)的間隔都相等，所以，軸線之間的間隔比軸線與邊框的間隔大一倍）
/ stretch（默認(rèn)值，軸線占滿整個交叉軸）。定義多根軸線的對齊方式，如果項(xiàng)目自有一根軸線，該屬性不起作用

項(xiàng)目的屬性設(shè)置

order：定義項(xiàng)目的排列順序，數(shù)字越小，排列越靠前，默認(rèn)為0.

flex-grow：定義項(xiàng)目的放大比例，默認(rèn)為0，默認(rèn)情況下即使有剩余空間項(xiàng)目也不會放大?？s放的方向?yàn)閒lex-direction的方向。

flex-shrink：定義項(xiàng)目的縮小比例，默認(rèn)為1，空間不足時，該項(xiàng)目會縮小。其值為0表示不縮小.縮放的方向?yàn)閒lex-direction的方向。

flex-basis：定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size），瀏覽器根據(jù)這個屬性沒計算主軸是否有多余空間，默認(rèn)值為 auto，即項(xiàng)目的本來大小。flex-basis：80px；寬度（方向?yàn)閞ow）設(shè)置為80px；

flex：是上面三個屬性的簡寫，默認(rèn)值為 0 1 auto.有兩個快捷值：auto（1 1 auto）和none（0 0 auto）

align-self：該屬性允許耽擱項(xiàng)目與其他項(xiàng)目不同的對齊方式，課覆蓋align-items的屬性值。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則為stretch。

align-self：auto / flex-start / flex-end / center /baseline /stretch flex-basis:值為0與auto（默認(rèn)）時的區(qū)別：前者沒有將整個項(xiàng)目進(jìn)行計算，而后者則是忽略內(nèi)容進(jìn)行算的，所以如果布局是需要的是每個項(xiàng)目的百分比配置，則應(yīng)當(dāng)將flex-basis設(shè)置為0.

如果對你有幫助就收藏一下唄！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113610.html

相關(guān)文章

  • 彈性布局的基礎(chǔ)講解

    摘要：彈性布局的基礎(chǔ)講解彈性布局是由在年提出的一種布局方法，目前瀏覽器都已經(jīng)支持彈性布局忽略吧。其值為表示不縮小縮放的方向?yàn)榈姆较颉ＤJ(rèn)值為，表示繼承父元素的屬性，如果沒有父元素，則為。 彈性布局的基礎(chǔ)講解 彈性布局是由w3c在2009年提出的一種布局方法，目前瀏覽器都已經(jīng)支持彈性布局（忽略IE6吧）。本文主要講解彈性布局的基本語法并將其應(yīng)用到實(shí)際網(wǎng)頁布局中 如何應(yīng)用彈性布局，代碼如下： ...

    CoyPan 評論0 收藏0

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...

    Amos 評論0 收藏0

  • 解剖CSS布局原理

    摘要：前言本文將帶你重新認(rèn)識布局，帶你解剖布局原理，前提是你要有基礎(chǔ)本文將解除你在布局方面的疑惑。以下將對布局元素和文檔流進(jìn)行詳細(xì)講解。而且還能保持文檔流，這是其他元素做不到的。 前言 本文將帶你重新認(rèn)識CSS布局，帶你解剖布局原理，前提是你要有基礎(chǔ)！本文將解除你在布局方面的疑惑。認(rèn)識每個布局元素，了解他們的特性，你才知道為什么會是這樣的結(jié)果。本文內(nèi)容純屬個人理解，不代表官方。 此文主要為理...

    李文鵬 評論0 收藏0

  • 彈性盒模型flex

    摘要：一是的縮寫，意為彈性布局定義彈性布局二基本定義我只簡單的說一下容器和項(xiàng)目，因?yàn)橹魂P(guān)系容器和項(xiàng)目來講的個人理解。它可以設(shè)為或?qū)傩砸粯拥闹?，則該項(xiàng)目占據(jù)固定的空間。默認(rèn)值為，表示繼承夫元素的屬性，如果沒有夫元素，則等同于。一、flex flex是flexible box的縮寫，意為彈性布局； 定義彈性布局 display:flex; box{ display:flex; } 二...

    Gemini 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<