CSS3 彈性盒布局模型與響應式100%布局的區別？

01-16

說真的，不知道怎麼比，從何去比。Flexbox布局和Responsive Layout怎麼比。

簡單來講用百分比來進行布局是按比例分配全部空間；flex 主要是按比例分配多餘空間，另外還有很多控制盒子排列、對齊方式的特性。

一個是按照份數，一個是按照比例，flexbox的體系提供了更多細粒度的控制，實現更複雜的效果，你可以玩這個有趣的遊戲體驗下flexbox的magic: http://www.css88.com/tool/flexboxfroggy/#zh-cn

不一樣，flex更全能

flex 肯定更加強大，但是使用起來更加複雜一些。

pc 上就不能用 flex 了，移動端就可以盡情使用 flex 。但是簡單的能百分比解決的就百分比吧。

說一個百分比的巨坑。。。。。

一行放 N 個 div ，每個div 應該是 1/N 的寬，，，但是有時一些屏幕上,遇見一些 1/N ，算出每個div的真實寬頻, 這個寬頻 * N &> 屏幕寬度的，，，於是乎最後一個 div 就轉行了。。

1、

Flexbox 對子元素的操縱能力比 Responsive Layout 要強，它可以在各個方向上布局元素；

2、

Flexbox 更適合應用在組件上，比如對一個盒子內元素進行處理，以防空白和溢出問題；而 Responsive Layout 更適合在宏觀做布局，比如 Grid 布局；

3、

Flexbox 概念上比 Responsive Layout 略微複雜，而且在各種布局屬性參合時，Flexbox 的處理更有確定性，比如 float 和 clear 無效；

4、

之前看過一篇文章，沒親自測試，Flexbox 布局在性能上優於 Responsive 布局，尤其是 DOM 節點比較多的情況下更加明顯，具體原因有待分析，可能是 Flexbox 在計算上的消耗要低於 Responsive Layout。

以上並不全面，僅供參考，也歡迎補充。

當然，兩者沒有明顯的優劣之分，看場景選擇布局方式。比如 Flexbox 就無法解決圖文混排問題。

乍看上去好像沒什麼區別，但是假如像選項卡的標題，它會隨著數據的傳入有的多有的少，然後還是需要它們自動充滿盒子，這個時候，用百分比固定好了就不行，flex就完全不用擔心啦