淺談新的布局方式-flex

Maxiye 發布于2019-04-23 13:35 / 742人閱讀

摘要：布局，可以簡便完整響應式地實現各種頁面布局。一基本概念采用布局的元素，稱為容器，簡稱容器。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。項目在垂直上的對齊方式。優先級或者允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。

引言：

　　網頁布局在flex出來之前，是由盒模型為底子，float，position，table，百分比來進行布局的，重繪的比較多，影響性能，復雜又不好維護。flex布局，可以簡便、完整、響應式地實現各種頁面布局。我在網上看到有很多寫flex布局的博文，自己就寫著復習一下這個flex布局。

一基本概念：

　　采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。（任何一個容器都可以指定為Flex布局，塊級元素，行內元素也可。）　　它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

二屬性：

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

三實例

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

　　1 div使用display：flex后初始化的結果：

　　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;
}

　　結果：

? ? ? ? ? ? ??? ??

　　這個例子說明了:

　　　　1 只要父元素設置了display：flex;所有的item都成了行內塊或者塊級元素，可以設置寬度高度. 　　　　2 item中的flaot無效，同樣的 clear也無效，vertical-align也無效，但是position:absolute是有效（我看網上有人說是無效的。）　　　　3 父元素設置了flex后，只針對于子元素，其后代元素不起作用，若想要后代元素起作用，必先給他的父元素聲明flex。 ? 　　2 實現導航欄的nav兩邊對齊，就是有導航的在左邊，登陸之類的在右邊。　　html:

<nav>
     <ul>
          <li><a href="/">首頁a> li>
          <li><a href="/">產品a>li>
          <li><a href="/">關于我們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;
}

　　結果如下：

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

四兼容性

　　如圖可知，兼容性基本上都支持來，只有ie9以下不支持。flex布局最適合在移動端進行布局，開發中要適當的添加私有前綴來兼容。

.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?^%$

GPU云服務器云服務器 flex布局 android布局方式設計淺談淺談javascript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2063.html

2018你成長了么？一份給你的前端技術清單

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

K_B_Z 2019-08-02 11:53 評論0 收藏0
2018你成長了么？一份給你的前端技術清單

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

LancerComet 2019-08-29 17:08 評論0 收藏0
2018你成長了么？一份給你的前端技術清單

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

Flands 2019-08-23 12:46 評論0 收藏0
華為云CEO張平安談新組織架構調整：圍繞業務場景已成立三個業務部_云資訊

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

flybywind 2021-10-14 09:42 評論0 收藏0
淺談web自適應

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

kid143 2019-08-02 15:57 評論0 收藏0