需求:
兩邊欄固定寬度,中間寬度自適應,通常左邊欄爲導航,右邊欄爲廣告,中間欄爲主要內容的展現,div塊上中間欄放在第一位,重要的東西放在文檔流前面能夠優先渲染。css
聖盃佈局和雙飛翼佈局的共同特色都是利用float+margin的負值來實現並列的結構。首先中間欄width 100%後,左右欄被擠在第二行,左欄margin-left設置爲-100%後(實際即爲中間欄的寬度),這樣左欄就跟中間欄並列,且左欄和中間欄的左邊緣對其,同理右欄margin-left(由於float是向左的)設置爲右欄本身寬度的負值,這樣就升上去,且右邊緣和中間欄的右邊欄重合。html
如今的問題就是左右欄佔用了main的空間。聖盃佈局和雙飛翼的佈局的處理差別也就在這裏:瀏覽器
聖盃佈局的處理方式爲父容器container設置padding-left和padding-right爲左右欄的寬度,此時左右欄會表現往裏面縮一些,由於padding只是調節內部元素的位置並不會顯示width的content(盒子模型),對外部元素沒影響。此時就須要用相對定位調節左右欄left和right爲父容器pading左右值的負值,這樣就移開了左右欄對中間欄的佔據,且中間欄的內容所有顯示在width的content中。app
代碼:佈局
<!-- 聖盃佈局 --> <!DOCTYPE html> <html> <head> <style> .left { background: #E79F6D; width: 150px; float: left; } .main { background: #D6D6D6; width: 100%; float: left; } .right { background: #77BBDD; width: 190px; float: left; } .left { margin-left: -100%; } .right{ margin-left:-190px; } /* 設置padding後,margin是不佔用其餘元素的padding的,padding只是用來調節內部元素與自己的距離,margin調節纔是自己與周圍之間的距離 */ .con { padding-left: 150px; padding-right: 190px; } .left { position: relative; left: -150px; } .right { position: relative; right: -190px; } </style> </head> <body> <div class="con"> <div class="main">Main</div> <div class="left">Left</div> <div class="right">Right</div> </div> </body> </html>
雙飛翼並列的方式與聖盃佈局相同,可是擯棄了相對定位的方式。而是給中間欄加了一個父容器,父容器設置float,子容器設置margin-left和margin-right抵消左右欄佈局的寬度,避免content顯示部分被左右欄覆蓋到本身寬度。(注意不是float左右由於margin移動了,而是是中間欄的content的內容width一部分寬度分給了margin,本身縮小了,float是脫離的文檔流的,無視block,可是受影響到文字,參考文字環繞)。flex
代碼:ui
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .main-wrapper { float: left; width: 100%; } .main { height: 300px; /* 多10px間距 */ margin-left: 210px; margin-right: 190px; background-color: rgba(255, 0, 0, .5); } .sub { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); } .extra { float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); } </style> </head> <body> <div class="main-wrapper"> <div class="main"></div> </div> <div class="sub"></div> <div class="extra"></div> </body> </html>
1.order指定順序,默認爲0,越小越靠前code
2.flex-grow屬性定義項目的放大比例,默認爲0,即若是存在剩餘空間,也不放大htm
3.flex-basic:屬性定義了在分配多餘空間以前,項目佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的默認值爲auto,即項目的原本大小。文檔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> .container { display: flex; min-height: 300px; } .left { order: -1; flex-basis: 300px; background-color: green; } .right { flex-basis: 150px; background-color: red; } .main { flex-grow: 1; background-color: blue; } </style> <title>Document</title> </head> <body> <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>