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

資訊專欄INFORMATION COLUMN

淺談新的布局方式-flex

Maxiye / 777人閱讀

摘要：布局，可以簡便完整響應(yīng)式地實(shí)現(xiàn)各種頁面布局。一基本概念采用布局的元素，稱為容器，簡稱容器。它的所有子元素自動(dòng)成為容器成員，稱為項(xiàng)目，簡稱項(xiàng)目。項(xiàng)目在垂直上的對(duì)齊方式。優(yōu)先級(jí)或者允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋屬性。

引言：

　　網(wǎng)頁布局在flex出來之前，是由盒模型為底子，float，position，table，百分比來進(jìn)行布局的，重繪的比較多，影響性能，復(fù)雜又不好維護(hù)。flex布局，可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。我在網(wǎng)上看到有很多寫flex布局的博文，自己就寫著復(fù)習(xí)一下這個(gè)flex布局。

一 基本概念：

　　采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。（任何一個(gè)容器都可以指定為Flex布局，塊級(jí)元素，行內(nèi)元素也可。） 　　它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱”項(xiàng)目”。

二 屬性：

　容器的6大屬性： 　　1 flex-direction 項(xiàng)目的排列方向 　　　　flex-direction: row;（默認(rèn)值）主軸為水平方向,從右往左。 　　　　　　　　　　? ?row-reverse; 主軸為水平方向，從左往右。 　　　　　　　　　　? ?column; 主軸為垂直方向，從上往下。 　　　　　　　　　　　column-reverse; 主軸為垂直方向，從下往上。 　　2 flex-wrap 是否換行 　　　　flex-wrap: no-wrap（默認(rèn)）：不換行。 　　　　　　　　? ??wrap : 換行。 　　　　　　　　　 wrap-reverse : 換行，從下往上換行。 　　3 flex-flow flex-direction屬性和flex-wrap屬性的簡寫形式。 　　　　flex-flow : row nowrap (默認(rèn)值) 　　4 justify-content 項(xiàng)目item在水平上的對(duì)齊方式。 　　　　justify-content: flex-start; 往右邊對(duì)齊 　　　　　　　　　　　? flex-end; 往左邊對(duì)齊 　　　　　　　　　　　? center; 往中間對(duì)齊 　　　　　　　　　　　? space-between; 兩邊對(duì)齊，項(xiàng)目之間的間隔都相等。 　　　　　　　　　　　? space-around; 每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。 　　5 align-items 項(xiàng)目item在垂直上的對(duì)齊方式。 　　　　align-items: flex-start; 往上對(duì)齊。 　　　　　　　　　　flex-end; 往下對(duì)齊。 　　　　　　　　　　center; 往中間對(duì)齊。 　　　　　　　　　　baseline; 項(xiàng)目的第一行文字的基線對(duì)齊。 　　　　　　　　　　stretch;（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。 　　6 align-content 多個(gè)項(xiàng)目在垂直上的對(duì)齊方式。 　　　　ps：如果項(xiàng)目只有一根軸線，該屬性不起作用 　　　　屬性和align-content的屬性一樣。 ? 　項(xiàng)目的6大屬性 ? 　　1 order 項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0（按代碼書寫的順序來。） 　　2 flex-grow 項(xiàng)目的放大比例，默認(rèn)為0（即如果存在剩余空間，也不放大。） 　　　　如果item都為1，則均等平攤整個(gè)空間。如果有一個(gè)item和其他的item不相等，則按照比例放大。 　　3 flex-shrink 項(xiàng)目的縮小比例，默認(rèn)為1（即如果空間不足，該項(xiàng)目將縮小。） 　　　　如果item都相等，則均等平攤空間，若空間不足，則都等比例縮小。如果有一個(gè)item為0；當(dāng)空間不足時(shí)，其不縮小。 　　　　ps：負(fù)值無效。 　　4 flex-basis 在分配多余空間之前，項(xiàng)目占據(jù)的水平上的空間。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。 　　5 flex 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。 　　　　優(yōu)先級(jí)：auto (1 1 auto) 或者 none （0 0 auto); 　　6 align-self 允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。 　　　　ps:只針對(duì)于垂直方向上的,水平方向上沒有該屬性。 　　　　屬性和align-items是的屬性一樣，多了一個(gè)auto。

三 實(shí)例

?　flex布局大部分實(shí)例可以參考https://www.w3.org/TR/css-flexbox/#box-model　寫的特別詳細(xì)。

　　1 div使用display：flex后初始化的結(jié)果：

　　html代碼：

<div class="container">
     <span class="item">
         <span class="item">111span>
     span>
     <span class="item">2span>
     <span class="item">3span>
     <span class="item">4span>
     <span class="item">5span>
div>

　　css 樣式：

.container{
     height: 500px;
     width: 500px;
     border: 1px solid;
     display: flex;
     position: relative;       
}
.item{
     width: 50px;
     height: 50px;
     border:1px solid #ccc;
     float: right;
     vertical-align: middle;
}

　　結(jié)果：

? ? ? ? ? ? ??? ??

　　這個(gè)例子說明了:

　　　　1 只要父元素設(shè)置了display：flex;所有的item都成了行內(nèi)塊或者塊級(jí)元素，可以設(shè)置寬度高度. 　　　　2 item中的flaot無效，同樣的 clear也無效，vertical-align也無效， 但是position:absolute是有效（我看網(wǎng)上有人說是無效的。） 　　　　3 父元素設(shè)置了flex后，只針對(duì)于子元素，其后代元素不起作用，若想要后代元素起作用，必先給他的父元素聲明flex。 ? 　　2 實(shí)現(xiàn)導(dǎo)航欄的nav兩邊對(duì)齊，就是有導(dǎo)航的在左邊，登陸之類的在右邊。 　　html: 
<nav>
     <ul>
          <li><a href="/">首頁a> li>
          <li><a href="/">產(chǎn)品a>li>
          <li><a href="/">關(guān)于我們a>li>
          <li class="login"><a href="/">登陸a>li>
      ul>
nav>

　　css樣式：

nav > ul{
   display: flex;
}
nav  li {
    list-style: none;
    margin: 10px;
}
.login{
     margin-left: auto;
}

　　結(jié)果如下：

　　　　

　　如果不使用display：flex來做的話，可以使用float的方式來說，但是相對(duì)來說稍微麻煩點(diǎn)，代碼量絕對(duì)比flex多。追求簡單何樂不為？

四 兼容性

　　

　　如圖可知，兼容性基本上都支持來，只有ie9以下不支持。flex布局最適合在移動(dòng)端進(jìn)行布局，開發(fā)中要適當(dāng)?shù)奶砑铀接星熬Y來兼容。

.flex() {
    display: -webkit-box; 
    display: -moz-box; 
    display:-webkit-flex;
    display: -ms-flexbox;
    display:flex;
}

?

?

參考資料：

菜鳥教程?http://www.runoob.com/w3cnote/flex-grammar.html

阮一峰大大?http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

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

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

相關(guān)文章

  • 2018你成長了么？一份給你的前端技術(shù)清單

    摘要：由于個(gè)人精力有限，一些技術(shù)點(diǎn)的歸納可能有失偏頗，或者目前并未納入進(jìn)來，因此上的清單內(nèi)容也會(huì)不斷更新。 2018 眼看就要過去了，今年的你相較去年技術(shù)上有怎樣的收獲呢？ 記得年初的時(shí)候我給自己制定了一個(gè)學(xué)習(xí)計(jì)劃，現(xiàn)在回顧來看完成度還不錯(cuò)。但仍有些遺憾，一些技術(shù)點(diǎn)沒有時(shí)間去好好學(xué)習(xí)。 在學(xué)習(xí)中我發(fā)現(xiàn)，像文章這樣的知識(shí)往往是碎片化的，而前端涉及到的面很多，如果不將這些知識(shí)有效梳理，則無法形成...

    K_B_Z 評(píng)論0 收藏0

  • 2018你成長了么？一份給你的前端技術(shù)清單

    摘要：由于個(gè)人精力有限，一些技術(shù)點(diǎn)的歸納可能有失偏頗，或者目前并未納入進(jìn)來，因此上的清單內(nèi)容也會(huì)不斷更新。 2018 眼看就要過去了，今年的你相較去年技術(shù)上有怎樣的收獲呢？ 記得年初的時(shí)候我給自己制定了一個(gè)學(xué)習(xí)計(jì)劃，現(xiàn)在回顧來看完成度還不錯(cuò)。但仍有些遺憾，一些技術(shù)點(diǎn)沒有時(shí)間去好好學(xué)習(xí)。 在學(xué)習(xí)中我發(fā)現(xiàn)，像文章這樣的知識(shí)往往是碎片化的，而前端涉及到的面很多，如果不將這些知識(shí)有效梳理，則無法形成...

    LancerComet 評(píng)論0 收藏0

  • 2018你成長了么？一份給你的前端技術(shù)清單

    摘要：由于個(gè)人精力有限，一些技術(shù)點(diǎn)的歸納可能有失偏頗，或者目前并未納入進(jìn)來，因此上的清單內(nèi)容也會(huì)不斷更新。 2018 眼看就要過去了，今年的你相較去年技術(shù)上有怎樣的收獲呢？ 記得年初的時(shí)候我給自己制定了一個(gè)學(xué)習(xí)計(jì)劃，現(xiàn)在回顧來看完成度還不錯(cuò)。但仍有些遺憾，一些技術(shù)點(diǎn)沒有時(shí)間去好好學(xué)習(xí)。 在學(xué)習(xí)中我發(fā)現(xiàn)，像文章這樣的知識(shí)往往是碎片化的，而前端涉及到的面很多，如果不將這些知識(shí)有效梳理，則無法形成...

    Flands 評(píng)論0 收藏0

  • 華為云CEO張平安談新組織架構(gòu)調(diào)整：圍繞業(yè)務(wù)場景已成立三個(gè)業(yè)務(wù)部_云資訊

    摘要：新的云組織架構(gòu)不再只針對(duì)單一的云服務(wù)領(lǐng)域，比如計(jì)算服務(wù)存儲(chǔ)服務(wù)，現(xiàn)在我們分別圍繞對(duì)云需求的三種業(yè)務(wù)場景成立了三個(gè)業(yè)務(wù)部即公有云領(lǐng)域，伙伴云領(lǐng)域，以及華為云領(lǐng)域。這輪新的組織架構(gòu)調(diào)整震驚業(yè)界，代表著華為對(duì)云的押注投入更上一層樓。 華為云CEO張平安（左二）。圖片來源：每經(jīng)記者 王晶 攝今年以來，華為對(duì)云業(yè)務(wù)進(jìn)行了多次組織架構(gòu)調(diào)整。伴隨著人事調(diào)整進(jìn)入穩(wěn)定期，...

    flybywind 評(píng)論0 收藏0

  • 淺談web自適應(yīng)

    摘要：本篇文章分享了一些處理多屏幕自適應(yīng)的經(jīng)驗(yàn)，希望有益于各位。該寬度自適應(yīng)在新的時(shí)代有了新的方法，隨著彈性布局的普及，它經(jīng)常被的伸縮性布局方式替代，變得越來越彈性十足。 轉(zhuǎn)自：http://www.cnblogs.com/consta... 前言 隨著移動(dòng)設(shè)備的普及，移動(dòng)web在前端工程師們的工作中占有越來越重要的位置。移動(dòng)設(shè)備更新速度頻繁，手機(jī)廠商繁多，導(dǎo)致的問題是每一臺(tái)機(jī)器的屏幕寬度和...

    kid143 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<