使用flex 實現聖盃佈局

sky_Bosco發表於2018-01-16
Flex

移動端flex佈局最近挺火的，空閒時間也看了些資料！好記性不如賴筆頭，做下筆記吧。閒話少說 先上程式碼。

<div id="container">
  <div id="header">頭部</div>
  <div id="center">
    <div id="dyleft">左欄div</div>
    <div id="dycenter">dycenter</div>
    <div id="dyright">右欄divx</div>

  </div>
  <div id="footer">底部</div>
</div>
複製程式碼

css 程式碼：

html, body {  //css 初始化
      margin: 0 0;
      padding: 0 0;
    }

    #container {
      width: 100%;
      display: flex;
      flex-flow: column nowrap;  //設定主軸方向 以及設定當一行排不完的時候，不換行
      min-height: 100vh;//css3中的長度單位， 相對於視口的高度。視口被均分為100單位的vh
    }

    #header, #footer {
      flex: 0.1; 
      max-height: 50px;
      background-color: red;
    }

    #center {
      flex: 1;
      display: flex;
      flex-flow: row nowrap;
    }

    #dyleft, #dyright {
      flex: 0 0 12em;
      background-color: pink;
    }

    #dycenter {
      flex: 1;
      background-color: yellow;
    }
複製程式碼

flex屬性解釋：

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。


flex-grow 官方解釋：設定或檢索彈性盒的擴充套件比率。

根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間。

  • 示例：b,c將按照1:3的比率分配剩餘空間
<ul class="flex">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
.flex li:nth-child(1){width:200px;}
.flex li:nth-child(2){flex-grow:1;width:50px;}
.flex li:nth-child(3){flex-grow:3;width:50px;}


flex-grow的預設值為0，如果沒有顯示定義該屬性，是不會擁有分配剩餘空間權利的。
本例中b,c兩項都顯式的定義了flex-grow，flex容器的剩餘空間分成了4份，其中b佔1份，c佔3分，
即1:3
flex容器的剩餘空間長度為：600-200-50-50=300px，所以最終a,b,c的長度分別為：
a: 200px
b: 50+(300/4*1)=125px
a: 50+(300/4*3)=275px
複製程式碼

flex-shrink：用數值來定義收縮比率。不允許負值。

設定或檢索彈性盒的收縮比率。

  • 根據彈性盒子元素所設定的收縮因子作為比率來收縮空間。
  • 示例：a,b,c將按照1:1:3的比率來收縮空間
<ul class="flex">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

.flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}
.flex li{width:200px;}
.flex li:nth-child(3){flex-shrink:3;}


flex-shrink的預設值為1，如果沒有顯示定義該屬性，將會自動按照預設值1在所有因子相加
之後計算比率來進行空間收縮。
本例中c顯式的定義了flex-shrink，a,b沒有顯式定義，但將根據預設值1來計算，可以看到總共
將剩餘空間分成了5份，其中a佔1份，b佔1份，c佔3分，即1:1:3
我們可以看到父容器定義為400px，子項被定義為200px，相加之後即為600px，超出父容器200px。
那麼這麼超出的200px需要被a,b,c消化
通過收縮因子， 200 /5 = 40;

最後a,b,c的實際寬度分別為：200-40=160px, 200-40=160px, 200-120=80px
複製程式碼

flex-basis：length|percent | auto | content

用長度值來定義寬度。不允許負值

percent

用百分比來定義寬度。不允許負值

auto：

無特定寬度值，取決於其它屬性值

content：

基於內容自動計算寬度

設定或檢索彈性盒伸縮基準值。

  • 如果所有子元素的基準值之和大於剩餘空間，則會根據每項設定的基準值，按比率伸縮剩餘空間 （沒明白什麼意思？？？？ 直接上程式碼吧）
<style>
.box{
	display:-webkit-flex;
	display:flex;
	width:600px;
        margin:0;
        padding:10px;
        list-style:none;
        background-color:#eee;}
.box li{
      width:100px;
      height:100px;
       border:1px solid #aaa;
       text-align:center;}

#box li:nth-child(3){
	-webkit-flex-basis:600px;
	flex-basis:600px;
}
</style>
</head>
<body>
<h1>flex-basis示例：</h1>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
</ul>
</body>
複製程式碼

程式碼顯示 box 總共寬 600px 每個li 設定寬100px .一共5個。那麼就是500px.但是li 也就是c 寬設定了600px. 我去 這一共寬600 + 400 =1000px 大於600px.不行啊肯定！

那怎麼辦？那就把別的li壓縮啊。一共1000.那麼100/1000 = 0.1（abde佔比)

600/1000 = 0.6（c的佔比）

1000-600 = 400px 那麼這400px *0.1 = 40；400*0.6 = 240;

so a、b、d、e 寬度：100-40=60；

c:600- 60*4 = 360；


ok？？？應該沒毛病吧

使用flex 實現聖盃佈局

？？？google瀏覽器上為毛顯示的寬是61？？狐火上顯示60.8？？我tmd算的是60？難道是誤差？

有知道的請留下言 謝謝！！

備註：

後期把flex 整個的知識點整理下 以供後期複習。歡迎關注。



相關文章