最近越來越依賴display:flex 了。本來只是在移動端用來作彈性布局，現在在PC端，我基本用它來取代 float:left。比如昨天做的一個專題，基本都用 flex 來布局。
但是這其中的原理呢，flex布局的相對於float的優勢又在哪呢。只是對這些有一個模糊的概念。
比如float:left/right 這個功能，一般用來排版。而它的高度塌縮，一些潛在的未被觸發的問題，總是給人一種很“不靠譜”的感覺。
先來盤點下float的特性：
1. 脫離當前文檔流。浮動盒子會貼着容器或者另一個浮動元素的邊緣（包括水平方向和垂直方向的邊緣），寬度不夠的話，就排到下一行。
舉個例子：
<style> .box1 { width: 100px; height: 100px; background: #aedbf0; float:left; } .box2 { width: 100px; height: 150px; background: #ffbe84; float:left; } .box3 { width: 100px; height: 100px; background: #d4e280; float:left; } .parent { overflow: hidden; padding: 10px; border:1px solid #005e96; text-align:left; width: 250px; /*這里設置寬度為250px，無法容下3個100px寬度的方塊*/ /*height: 200px;*/ } </style> </head> <body> <div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body>
這里將第二個浮動元素的高度設置為150px，比其他多了50。效果如下：
如果將第一個浮動元素設置為150px，則效果如下：
2. 文檔流的行內元素將會圍繞浮動元素，這個和塊狀元素不一樣。塊狀元素如果不設置float屬性，則會被浮動盒子覆蓋。比如文字環繞效果。
3. 對於浮動元素，top/left/right/bottom, z-index無效。（貌似很久前，我在使用z-index時被這個坑過...）
4. 形成 block formatting context （BFC）。創建了 BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素。
二、display: flex
1. 垂直居中 align-items: center;
配合align-items: center，輕松達到垂直居中的效果，好用到哭。解決了折磨我幾百年的圖片和多行文字垂直居中的問題。
具體效果可以點這里查看，垂直居中的幾個辦法
在實際開發中，假設我有並列兩個div，兩個div寬度不一致。假設比較小的flex盒子寬度比例設置為1，那么另外一個的寬度比例 = 大盒子寬度/設置比例為1的盒子寬度。
這樣，當包裹兩個flex盒子的容器整體寬度需要發生改變時，就不需要再去更改兩個盒子的寬度。
<style> .tips { max-width: 800px; height: 100px; display: flex; align-items: center; // 在容器設置這個屬性，達到垂直居中效果。 background-color: #1e5dad; border-radius: 15px; margin: 25px auto; } .tips div:nth-child(1) { flex: 1; //小盒子比例為1 margin-left: 25px; } .tips div:nth-child(2) { flex: 9.5; //大盒子寬度比例 = 大盒子寬度/小盒子寬度 } .tips p { color: #fff; text-align: left; font-size: 20px; line-height: 31px; } </style> </head> <body> <div class="tips"> <div> <img src="images/doc.png" alt=""> </div> <div> <p>注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。</p> </div> </div> </body>
效果圖如下：
再來看看另外一個復雜點的例子：
<style> *{ /*實際開發中，別這樣偷懶哦*/ margin: 0; padding: 0; } .frequency { max-width: 1000px; margin-bottom: 20px; display: flex; align-items: center; background-color: #f3f4f6; height: 175px; } .fre_left { flex: 1; } .fre_right { flex: 4.78; } .fre_left div { color: #fff; width: 100px; height: 100px; background-color: #3ac1d5; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border: 10px solid #e7eef8; margin: 0 auto; text-align: center; line-height: 50px; } .fre_left p { font-size: 26px; height: 24px; line-height: 31px; padding-top: 17px; } .fre_right ul { display: flex; } ul, ol { list-style: none; } .fre_right ul li { flex: 1; color: #4c4c52; font-size: 16px; line-height: 31px; } .fre_right ul li:before { content: url(images/arrow.png); } </style> </head> <body> <div class="frequency"> <div class="fre_left"> <div> <p>熱點<br>問題</p> </div> </div> <div class="fre_right"> <ul> <li> 一、Flex 布局是什么？</li> <li> 二、基本概念</li> <li> 三、容器的屬性</li> </ul> <ul> <li> flex-direction屬性決定主軸的方向</li> <li> flex-wrap屬性定義如何換行。</li> <li> flex-flow屬性默認值為row nowrap</li> </ul> <ul> <li> justify-content屬性定義了項目在主軸上的對齊方式。</li> </ul> </div> </div> </body>
效果圖如下：
在CSS布局中，Flex布局還有許多妙用，等待研究。
但是並不是什么時候都一股腦兒用這個。實際上每一種方式都有它自己的優勢和缺陷。
比如，Flex 布局下，
1. 子元素的float、clear和vertical-align屬性將失效。
2. 移動端img標簽下的圖片，如果設定了寬度，未設定高度，圖片高度產生變形。原因是：align - items 屬性的默認值：
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。