<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          flex布局,學習flex彈性布局總結

          時間:?2017-11-09閱讀:?1151標簽:?布局作者:?Peale

          flex布局(Flexible Box)是對界面css盒模型的一個優化,適應不同尺寸的屏幕,被定義flex的容器可以控制子元素的排列方向和大小,能夠用更簡單清晰的代碼來完成復雜的布局。  

          瀏覽器支持:

          ChromeSafariFirefox
          20-(old)、21+(new)3.1+(old)、6.1+(new)2-21(old)、22+(new)
          OperaIE
          12.1+(new)10(tweener)、11+(new)
          AndroidiOS
          2.1+(old)、4.4+(new)3.2+ (old)、7.1+(new)

          Flex布局概念:


          包含元素(flex container)設置display:flex或inline-flex來定義彈性容器,子元素為彈性項目(flex-item)。每個彈性容器包含兩根軸(Axis),彈性項目默認從左到右排列的那個軸為主軸(main axis),垂直主軸的那根軸為交叉軸(cross axis)。

          彈性盒子使用了不同的布局算法,某些屬性用在彈性容器上沒有意義:

          1. 多欄布局模塊的column-*屬性對彈性項目無效。
          2. float與clear對彈性項目無效。使用float將使元素的display屬性計為block。
          3. vertical-align對彈性項目的對齊無效。

          語法

          設置在容器上的屬性
          a. flex-direction: row(默認) | row-reverse | column | column-reverse ;


          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          flex-direction:row
          }
          * 主軸在水平方向,從左到右排列。



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          flex-direction:row-reverse
          }
          * 主軸在水平方向,從右到左排列。



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          flex-direction:column
          }
          * 主軸在垂直方向,從上到下排列。



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          flex-direction:column-reverse
          }
          * 主軸在垂直方向,從下到上排列。



          item1
          item2
          item3




          b. flex-wrap: nowrap(默認) | wrap | wrap-reverse ;


          1
          2
          3
          4
          .container{
          display:flex;
          flex-wrap:nowrap
          }



          item1
          item2
          item3
          item4



          1
          2
          3
          4
          .container{
          display:flex;
          flex-wrap:wrap
          }



          item1
          item2
          item3
          item4



          1
          2
          3
          4
          .container{
          display:flex;
          flex-wrap:wrap-reverse
          }



          item1
          item2
          item3
          item4


          c.justify-content: flex-start(默認) | flex-end | center | space-between | space-around ;


          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          justify-content:flex-start
          }
          *左邊對齊



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          justify-content:flex-end
          }
          *右邊對齊



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          justify-content:center
          }
          *居中



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          justify-content:space-between
          }
          *兩邊對齊,項目之間的間隔相等



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          justify-content:space-around
          }
          *項目兩邊間距一樣,項目之間的間距是項目一側間距之和



          item1
          item2
          item3



          d.align-items: flex-start(默認) | flex-end | center | baseline | stretch ;


          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          align-items:flex-start;
          }
          *項目在交叉軸(cross axis)上,向起點(cross start)對齊。



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          align-items:flex-end;
          }
          *項目在交叉軸(cross axis)上,向終點(cross end)對齊。



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          align-items:center;
          }
          *項目在交叉軸(cross axis)上,居中對齊。



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          align-items:baseline;
          }
          *項目在交叉軸(cross axis)上,基于第一行文字的基線對齊。



          什么是基線?

          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          .container{
          display:flex;
          align-items:stretch;
          }
          *項目在交叉軸(cross axis)上,撐滿整個容器。(前提未設置高度或auto)



          item1
          item2
          item3



          e. align-content: flex-start | flex-end | center | space-between | space-around | stretch ; 定義了多根抽條件下在交叉軸(cross axis)下的對齊方式,容器只有一行時無作用


          1
          2
          3
          4
          5
          .container{
          display:flex;
          flex-wrap:wrap;
          align-content:flex-start
          }



          item1
          item2
          item3



          1
          2
          3
          4
          5
          .container{
          display:flex;
          flex-wrap:wrap;
          align-content:flex-end
          }



          item1
          item2
          item3



          1
          2
          3
          4
          5
          .container{
          display:flex;
          flex-wrap:wrap;
          align-content:center
          }



          item1
          item2
          item3



          1
          2
          3
          4
          5
          .container{
          display:flex;
          flex-wrap:wrap;
          align-content:space-between
          }



          item1
          item2
          item3



          1
          2
          3
          4
          5
          .container{
          display:flex;
          flex-wrap:wrap;
          align-content:space-around
          }



          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          7
          .container{
          display:flex;
          flex-wrap:wrap;
          align-content:stretch
          }
          *占滿整個交叉軸,下面的空隙是設置了margin,非剩余空隙



          item1
          item2
          item3



          設置在項目上的屬性

          a.order 定義項目的排列順序,按屬性值大小,從小到大排列。


          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          .container{
          display:flex
          }
          .item1{
          order:1
          }
          .item2{
          order:3
          }
          .item3{
          order:2
          }

          item1
          item2
          item3


          b.flex-grow 定義項目等放大比例,默認是0(不放大)。


          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          .container{
          display:flex
          }
          .item1{
          flex-grow:1
          }
          .item2{
          flex-grow:2
          }
          .item3{
          flex-grow:1
          }
          *存在在剩余空間的條件下,item2的占有剩余空間的大小是item3和item1的兩倍。
          注:下面的空間是設置了padding 和 margin 值,非剩余空間。

          item1
          item2
          item3


          c.flex-shrink 定義項目等縮小比例,默認是1(如果空間不夠,將縮小)。


          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          .container{
          display:flex
          }
          .item1{
          flex-shrink:1
          }
          .item2{
          flex-shrink:0
          }
          .item3{
          flex-shrink:1
          }
          *空間不足的條件下,item3和item1將等比縮小,item2不縮小。
          注:下面的空間是設置了padding 和 margin 值,非剩余空間。

          item1
          item2
          item3


          d.flex-basis 指定了項目在主軸方向上的初始大小,默認值是auto。


          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          .container{
          display:flex
          }
          .item1{
          flex-basis:50px
          }
          .item2{
          flex-basis:150px
          }
          .item3{
          flex-basis:300px
          }
          *item1的在主軸上的初始的大小是50px,item2是150px,item3是300px。

          item1
          item2
          item3


          e.flex: none | [<’flex-grow’> <’flex-shrink’>? || <’flex-basis’>] ; 默認值是 0 1 auto ,快捷屬性 flex:auto (1 1 auto) 、 flex:none (0 0 auto)


          1
          2
          3
          4
          5
          6
          .container{
          display:flex
          }
          .item{
          flex:auto
          }

          item1
          item2
          item3


          f. align-self: auto(默認) | flex-start | flex-end | center | baseline | stretch ;


          1
          2
          3
          4
          5
          6
          7
          8
          .container{
          display:flex
          }
          .item3{
          align-self:auto
          }
          *設置auto 繼承父元素的align-items屬性,如果父元素沒有設置,則相當于項目設置成了stretch。

          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          7
          8
          .container{
          display:flex
          }
          .item3{
          align-self:flex-start
          }
          *項目在交叉軸(cross axis)上起點對齊。

          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          7
          8
          .container{
          display:flex
          }
          .item3{
          align-self:flex-end
          }
          *項目在交叉軸(cross axis)上終點對齊。

          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          7
          8
          .container{
          display:flex
          }
          .item3{
          align-self:center
          }
          *項目在交叉軸(cross axis)上居中。

          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          7
          8
          .container{
          display:flex
          }
          .item3{
          align-self:baseline
          }
          *項目的第一行文字的基線對齊。

          item1
          item2
          item3



          1
          2
          3
          4
          5
          6
          7
          8
          .container{
          display:flex
          }
          .item3{
          align-self:stretch
          }
          *項目在交叉軸(cross axis)充滿。

          item1
          item2
          item3


          結束

          在整理的過程中發現內容也不少啊!其實沒那么難,很多重復的東西,只是運用對象不一樣罷了。  

          來源:http://peale.cn/2016/11/30/2016_11_30_flex/#more


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/78

          CSS五種方式實現 Footer 置底

          頁腳置底(Sticky footer)就是讓網頁的footer部分始終在瀏覽器窗口的底部。當網頁內容足夠長以至超出瀏覽器可視高度時,頁腳會隨著內容被推到網頁底部;但如果網頁內容不夠長,置底的頁腳就會保持在瀏覽器窗口底部。

          響應式布局和自適應布局詳解

          自適應布局給了你更多設計的空間,因為你只用考慮幾種不同的狀態。而在響應式布局中你卻得考慮上百種不同的狀態。雖然絕大部分狀態差異較小,但仍然也算做差異。它使得把握設計最終效果變得更難,同樣讓響應式布局更加的難以測試和預測

          前端響應式布局

          Responsive design,意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

          彈性(Flex)布局的使用

          最近我參與實施的兩個項目中,一個頁面交互復雜,而另一個相對傳統,兩個項目相比之下凸顯出了頁面布局樣式的時間占比不可忽視,使用了彈性布局代碼量精簡了不少

          CSS:BFC規則的應用自適應兩欄布局

          兩欄布局是寫頁面時經常用到的,要想實現兩欄布局,就需要明白BFC規則,Block formatting context,直譯為“塊級格式化上下文”,可以簡單的理解它為一個獨立的區域,把區域內部元素與外部元素區分開,兩者互不干擾。

          css怎么讓文字豎著排列?

          css可以使用css樣式writing-mode:tb-rl來設置文字豎著排列。writing-mode屬性設置或檢索對象的內容塊固有的書寫方向。

          css3 彈性盒布局的使用-Flex

          css3 的Flex彈性盒的布局是一個用于頁面布局的全新CSS3模塊功能。它可以把列表放在同一個方向(從左到右或從上到下排列),并且讓這些列表能延伸到占用可用的空間。較為復雜的布局可以通過嵌套一個伸縮容器

          CSS實現自適應兩欄布局方法

          浮動+margin第一種: 左側欄固定寬度向左浮動,右側主要內容則用margin-left留出左側欄的寬度,默認寬度為auto,自動填滿剩下的寬度。 第二種:左邊絕對定位(脫離文檔流,不占位置)

          CSS中的圣杯布局與雙飛翼布局

          什么是圣杯布局?所謂圣杯布局就是用于實現一個兩側寬度固定,中間寬度自適應的三欄布局;什么是雙飛翼布局?和圣杯布局一樣,雙飛翼布局也是用于實現一個兩側寬度固定,中間寬度自適應的三欄布局,就是布局的形式上存在差異 

          網站設計和布局的重要性和過程

          網站的設計是吸引客戶的非常重要的因素。如今,互聯網上存在著很多競爭,每個人都可以點擊其客戶,但是只有少數人能吸引他們。這通常是由于網站給人的第一印象。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网