css知識：flex 、bfc

1.flex

       flex是css3新出來的佈局方式，是非常厲害常用的東西。

       詳情可查詢www.runoob.com/w3cnote/fle…

2.flex易錯點：

       2.1 flex-grow （擴大）

 <div class="main">          
     <div class="item1">11</div>          
     <div class="item2">22</div>          
     <div class="item3">33</div>  </div>
<style>            
.main{
    width:500px;
    height: 200px;
    display: flex;
}            
.item1{
     width:100px;                
     flex-grow: 1;                
     background: #f00;            
}            
.item2{
     width:100px;                
     background: #f60;           
 }            
.item3{               
    width:150px;                
    background: #ff0            
} 
</style>複製程式碼

  頁面ui為:

我們發現：

   item1元素佔據了除了item2和item3所有的位置。

為什麼會出現這樣的情況？

    那我們需要從"剩餘空間"這個詞說起。

    什麼是剩餘空間呢？具備flex環境的父容器，通常是有一條主軸和一條側軸，預設情況下主軸就是水平從左向右的，側軸是垂直從上到下的（類似書寫模式）。 剩餘空間就是父容器在主軸的方向上還有多少可用的空間。

     main是父容器，item1、item2、item3就是子元素，那麼

剩餘空間 = main元素寬度 - item1寬度 - item2寬度 - item3寬度 = 150px;（上述程式碼計算）

flex-grow其實就是參與剩餘空間的寬度，預設為0，說明元素預設都不會參與使用剩餘空間。

1. 此例中，只有item1設定了flex-grow：1，也就是說剩餘空間1等分，全部給了item1，所以item1的實際寬度為:250px;
   
2. 如果此例中，item2也設定了flex-grow:2，則說明剩餘空間已經3等分了，(item1和item2都設定了flex-grow)，所以item1寬度 = 100 + 150 / 3 *1 = 150px; item2寬度 = 100 + 150 /3 * 2 = 200px;

    2.2 flex-basis

     這個屬性值的作用也就是width的替代品。 如果子容器設定了flex-basis或者width，那麼在分配空間之前，他們會先跟父容器預約這麼多的空間，然後剩下的才是歸入到剩餘空間，然後父容器再把剩餘空間分配給設定了flex-grow的容器。 如果同時設定flex-basis和width，那麼width屬性會被覆蓋，也就是說flex-basis的優先順序比width高。有一點需要注意，如果flex-basis和width其中有一個是auto，那麼另外一個非auto的屬性優先順序會更高。

   2.3 flex-shrink （縮小）

    注意一句話: 如果剩餘空間為正數，則說明子專案寬度之和小於 父元素專案寬度，也就不存在flex-shrink

    當子專案不存在換行，且子專案寬度之和 大於 父元素專案寬度，為了完整的顯示子元素，肯定會子專案進行縮小處理，那這個縮小規則是什麼呢？

     flex-shrink：預設為1，也就說如果子專案寬度之和 大於 父元素專案寬度，那麼所有的子元素都縮小相同的寬度。

 <div class="main">          
    <div class="item1">11</div>          
    <div class="item2">22</div>          
    <div class="item3">33</div>  
</div>

<style>            
.main{               
    width:500px;                
    height: 200px;               
    display: flex;            
}            
.item1{
    width:200px;                
    background: #f00;            
}            
.item2{                
     width:300px;                
     background: #f60;
     flex-shrink:2            
}            
.item3{                
    width:150px;                
    background: #ff0            
}
 </style>複製程式碼

     如果此例中，item2的flex-shrink：2，如果預設的壓縮率是x，則item2的壓縮率為2x

     則 500 = 200 *（ 1-x） + 300 *( 1-2x) +150*(1-x) 可以計算出每個子元素各佔的寬度。

     如果flex-shrink:0;則說明這個容器在任何時候都不被壓縮

    也就是說:必須子元素合盒子寬度之和 大於 父元素，該屬性才會生效。

        2.3 flex

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

總結：

1、剩餘空間＝父容器空間－子容器1.flex-basis/width - 子容器2.flex-basis/width - …
2、如果父容器空間不夠，就走壓縮flex-shrink，否則走擴張flex-grow；
3、如果你不希望某個容器在任何時候都不被壓縮，那設定flex-shrink:0；
4、如果子容器的的flex-basis設定為0(width也可以，不過flex-basis更符合語義)，那麼計算剩餘空間的時候將不會為子容器預留空間。
5、如果子容器的的flex-basis設定為auto(width也可以，不過flex-basis更符合語義)，那麼計算剩餘空間的時候將會根據子容器內容的多少來預留空間。

2.BFC

2.1 知識準備(對以往知識的重新理解)

• float到底因為什麼出現？ 

• float有那些特性？

// 看下面程式碼(來自css世界-張鑫旭)						<div class="father">

   <img src="me.jpg">

   <p class="animal">小貓1，小貓2，...</p>

</div>img { float: left; }它的效果是一個：文字環繞圖片的效果。
// 明明當初學的時候說到： float元素會脫離文件流，那應該p內容會從最左邊開始展示，那為什麼是在img右邊
呢？
// 其實還有一個概念：部分無視和完全無視
部分無視：(以上面程式碼為例) 雖然img元素脫離了文件流，p會無視img(我們發現，p的width確實是螢幕寬度)，
但是p內部的文字會為img讓出位置(所有的float元素都有這個問題)
完全無視：比如absolute元素，其他元素會完全無視

*** 這因為“部分無視”的緣故，才能有“文字環繞效果” ***複製程式碼

// 方法1
.left{
 float:left;
 width:200px;
 height:200px
}
.right{
  overflow:hidden
}
// 方法2
.left{
 float:left;
 width:200px;
 height:200px
}
.right{
  display: table-cell; width: 9999px}// 以上均支援ie8及其以上適配               複製程式碼