flex布局目前基本上兼容主流的瀏覽器，且實現方式簡單。我整理了flex的一些知識點，並且總結歸納了幾種常見布局的flex寫法
flex基礎知識點
flex-grow和flex-shrink相關計算公式
公式1：子元素空間 < 父容器
父容器剩余空間 = 父容器寬度 - 子元素寬度之和
增長單位 = 父容器剩余空間 / 各子元素flex-grow之和
子元素實際寬度 = (flex-basis) + 增長單位*(flex-grow)
公式2：子元素空間 > 父容器
子元素溢出的寬度 = 子元素的寬度之和 - 子元素寬度之和
收縮單位 = 子元素溢出的寬度 / 各子元素flex_shrink之和
計算的子元素的寬度 = (flex-basis) - 收縮單位*(flex-shrink)
flex兼容性
目前flex兼容主流瀏覽器，對於部分兼容的瀏覽器可加私有屬性：
display:-ms-flex;/* IE10 */
display:-moz-flex;/* Firefox2 ~ Firefox21 */
display:-webkit-flex;flex bugs
在IE10~11瀏覽器,min-height不適合於flex容器的子元素flex項目。如果可能的話，使用height來替代min-height。
在Chrome，Opear和Safari瀏覽器不識別flex項目內容的最小尺寸。可以設置flex-shrink的值為0（而不是默認的1），以避免不必要的收縮。
不使用無單位的flex-basis值，因為在IE10~11中，flex簡寫被忽略。常使用0%來替代0px。
flex布局應用場景
Flexbox布局比較適合Web應用程序的一些小組件和小規模的布局，而Grid布局更適合用於一些大規模的布局。
flex布局優缺點
兼容所有主流瀏覽器
輕松實現元素的水平垂直居中
可以忽略內聯元素的4px外邊距
可以簡單的實現復雜的布局
推薦閱讀
大漠：《一個完整的Flexbox指南》
阮一峰：《Flex 布局教程》
Philip Walton和Greg Whitworth收集和整理了有關於Flexbox bugs。
幾種常見布局的flex寫法
首先要對父元素設置flex布局方式，同時在本案例中，利用媒體查詢，當屏幕分辨率小於768px的時候，flex布局變成縱向排列。
兩列布局
flex-grow定義的是元素的放大比例，默認值為0，表示元素不放大。當給所有子元素賦予flex-grow的值時，該值可以看作是元素尺寸所占父元素的比例。
兩列布局定寬
flex是flex-grow flex-shrink flex-basis的簡寫方式。
給第一個子元素賦值flex：1 0 100px;表示該元素在任何情況下的寬度均是固定位100px，不會隨着父元素和其他子元素縮放。
第二個子元素的flex-grow為1，則在任何情況下該元素均占滿父元素的剩余空間，設置overflow可以防止元素溢出。
三列布局
該布局中重點介紹的是order屬性，元素的先后排列順序與order的值對應，order值越大，元素越靠后。
n列等比布局
注意到第6個子元素的特殊性，我們希望這六個子元素能等寬分布，但是當元素內容過多時，它會占用更多的空間，甚至溢出。
因此對這些元素定義了width:100%;該方法表示所有的元素均占用父元素應有的位置，不因其他兄弟元素內容過多而少分配空間。
流式布局
流式布局可適用於自適應布局中，當父元素大小發生改變時，其子元素的大小也隨之改變。
該布局的重點屬性是flex-wrap:wrap;，如此設置可以使子元素自動換行，防止子元素溢出。
水平垂直居中
關鍵屬性為justify-content:center;align-item:center;這是flex布局的一個兩點，不需要知道父、子元素任何相關的尺寸信息，便能實現居中布局，靈活性很大。
對折線
該案例以及下面的“各種對齊方法”主要是介紹flex中，水平和垂直方向上的的各種對齊方式。
各類對齊方式
