如果你身受頁面不能自適應的困擾，那可別錯過flex這么好用的屬性哦。
如果你對浮動定位和絕對定位已經有點厭煩，那你了解一下flex布局吧。
目前，Flex布局，可以簡便、完整、響應式地實現各種頁面布局。
而且，它已得到了所有瀏覽器的支持。
這意味着，我能很安全地使用這項功能。
一、 初次了解flex
以前我給頁面進行布局時，我是基於盒子模型上，采用的是float浮動和position定位2個主要屬性，當時，我不知道flex布局。
那我是怎么開始知道flex的呢？
有一次，我做wap端項目時，隨着項目的逐漸完成，我發現頁面上出現的問題越來越多了，例如圖片亂浮動、居中、內外邊距等。自己那段時間真的是忙翻天，一邊繼續切頁面，一邊又需要解決頁面的各種bug。
后來我意識到了，wap端上的自適應，頁面結構自適應用bootstrap框架和媒體查詢就足夠了，但是頁面內容有時還是會出現各種問題， 頁面小結構容易亂動，所以為了頁面結構更穩定，我同事教我flex屬性，我覺得很好用。
我為什么會對flex布局有好感呢？
首先是因為以前的布局方式有點不夠用了，需要有新的布局方式。
剛開始切頁面我最常用的是float浮動布局，那時，我簡直是把float當做救星一般，只要我的頁面視覺稍有問題，我就會隨意使用float浮動，完全沒有考慮到會影響網頁的兼容性或者出現亂版。甚至有時當我忘記清除浮動，導致頁面結構全亂了。
需要注意的是，當標簽使用了float屬性后，就脫離了標准輸出流，就不受頁面約束了。這樣不方便，也不利於頁面布局。所以，一般浮動之后一定是要及時清除浮動的。
另一個就是position定位布局，這也是我經常會用到的布局方式之一，不過呢，在用之前一定要弄清楚父級與子級，同時也需要清除浮動。
我的總結（友情提示）：如果有其他的布局方式，千萬不能亂用或者依賴上float浮動和position布局
二、熟悉flex（我的實踐-簡單）
(1)簡單的實現‘比例性’排列
利用flex屬性，可以實現塊級元素1：1：1
同理，若將item2里面的flex值改成2，則會出現下面的效果
（2）簡單的就能使里面的內容居中（尤其是垂直居中，好用到爆）
上面就是用了jsutify-content與align-item2個屬性，對應是實現水平居中和垂直居中。
（3）橫向排列、豎向排列等（flex-direction:row/column）
三、flex還有太多魅力，等你來體驗
先聲明，上面寫的幾個屬性只是我最近布局常用的，不是全部的flex屬性，其實flex好用的屬性還有很多很多的，你自己去研究吧。