還記得我們曾經使用float布局嗎，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性，對於複雜的布局，真的沒法下手，而且導致頁面兼容性不好，很難做到滿意的效果，時常為了居中絞盡腦汁，左邊距、右邊距、上邊距、下邊距、居中對齊、都設置了也沒什麼卵用；發現真的好亂
然而，科技是進步的，總有一天有一個救世主來了，讓我們從此不再煩惱樣式布局，2009年，W3C提出了一種新的方案—-Flex布局，使用起來非常簡單，而且目前得到所有瀏覽器的支持，我們大可以放心大膽的使用，再也不用擔心兼容問題了（當然有些可能需要）。那我們就來認識一下她吧：
一、Flex是什麼東東
Flex是Flexible Box的縮寫，意為」彈性布局」，她可以為傳統的盒子布局提供最大的靈活性，並且任何東西都可以設置，行內元素也可以，只需要設置display:flex或者inline-flex；需要注意的是，如果是webkit內核的瀏覽器，需要加上前綴：-webkit，不過我們使用webpack打包，所以就不存在這樣的問題，它會為我們自動添加瀏覽器前綴；還有一點，設置了flex布局之後，其子元素的float、clear、vertical-align屬性都將不起作用。
在使用flex布局之前，我們需要了解一些概念：
a、設置了flex布局之後，包裹在其中的子元素自動成為flex容器的子成員
b、flex容器有兩個軸線，水平軸和垂直軸
c、默認按水平方向排列
二、開始使用
了解了基本概念之後，我們就要用flex布局了，如何設置呢？那就需要我們了解flex的樣式屬性；flex的樣式屬性分為兩種，一個是作用在容器上的，即設置為flex的元素，一個是作用在成員上的：
總共有六個：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
flex-direction：設置容器排列方向，默認主軸即水平方向；
flex-wrap：元素換行，即子元素在軸線上放不下時是否換行以及如何換行
flex-flow：flex-direction和flex-wrap的簡寫
justify-content：主軸的對齊方式，不一定是水平軸，由flex-direction指定
align-items：交叉軸對齊方式
align-content：多軸對齊方式，只有一軸的時候沒有效果
三、元素屬性
為每一個成員設置單獨屬性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
order：順序，從小到大，值越小，排列越靠前
flex-grow：放大比例，默認不放大，在自動撐開時需要
flex-shrink：縮放，是否在空間不足時縮放
flex-basis：主軸上默認空間，和最小寬度一個意思
flex：flex-grow、flex-shrink、flex-basis的簡寫
align-self：自身對齊方式
到此，flex就介紹完了，最後開心一笑：
女同事：「你看咱單位，哪有美女啊？」
我：「你照照鏡子就知道了。」
女同事：「討厭。。。」
我：「然後你看誰都是美女了。」
女同事：。。。。。