最近在項目中用到了flexbox，總結一下使用心得。
一、什么是flexbox，干嘛使的？
曾幾何時，我們特別希望能像word一樣，在排版時有個分散對齊選項（平均分配子元素寬度）這樣我就可以任意在父元素里添加子元素的個數，而不用經過繁瑣的計算。
css3中的flexbox可以實現這一點，並且還有很多很多別的高端上檔次的用法，包括垂直居中、反向排列子元素等等……本文先介紹其中一種比較常用到的方法，別的案例碰到了再補充。
二、flexbox的兼容性問題
由於歷史原因，flexbox的標准比較混亂，目前通用的版本就有三種：
老版本：display:box 和 display:inline-box（前者是塊級元素，后者是內聯元素）
混合版本（該版本僅ie10支持，移動端完全不用考慮）：display:flexbox 和 display:inline-flexbox（同上）
新版本：display:flex 和 display:inline-flex（同上）
每種版本的支持的瀏覽器不同，而且要針對不同瀏覽器添加前綴適配，為了兼容移動端的大部分瀏覽器，提煉如下：
display: -webkit-box; /* 老版本 - 適配iOS 6-, Safari 3.1-6 */
display: -webkit-flex; /* 新版本 - 適配Chrome */
display: flex; /* 新版本,- 適配Opera 12.1, Firefox 20+ */
在這里他們的順序非常重要。“display”屬性本身並不添加任何瀏覽器前綴，我們需要確保我們老語法不要覆蓋新語法讓瀏覽器（可能總是會）同時支持。
三、使用方法：
要使用flex需要先了解以下概念：
1、伸縮盒子和伸縮項目：伸縮盒子就是父元素，伸縮項目就是子元素，只有先設置了父元素為flexbox，子元素里的伸縮相關屬性才能生效。
2、主軸和側軸：頁面橫向的軸是主軸，縱向的軸是側軸。
3、伸縮流：伸縮盒子內的元素排列方式，類似流水順序一樣，因此稱之為流。
由於flex的屬性繁多，一上來就列舉一堆屬性概念不方便閱讀學習，下面直接通過案例來了解flex是怎么用的，這樣能先對這個css3的新屬性有個直觀的了解，之后可以自行查閱其他屬性。
案例：設置一個伸縮盒子（父元素），無論添加多少個伸縮項目（子元素），都讓它們平均分配寬度，如圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title></title> <style> .flex-parent { /*設置父元素為伸縮容器*/ display: -webkit-box; /*老版本：iOS 6-, Safari 3.1-6*/ display: -webkit-flex; /*新版本：Chrome*/ display: flex; /*標准規范：Opera 12.1, Firefox 20+*/ /*設置父元素內部的伸縮子元素項目換行規則：水平排列（row）不換行（nowrap）*/ -webkit-box-orient: horizontal; /*老版本：iOS 6-, Safari 3.1-6*/ -webkit-flex-flow: row nowrap; /*新版本：Chrome*/ flex-flow: row nowrap; /*標准規范：Opera 12.1, Firefox 20+*/ } .flex-son { /*設置子元素伸縮項目的伸縮比例*/ -webkit-box-flex: 1; /*老版本：iOS 6-, Safari 3.1-6*/ -webkit-flex: 1; /*新版本：Chrome*/ flex: 1; /*標准規范：Opera 12.1, Firefox 20+*/ /*此處無需設置寬度，因為flexbox會自動伸縮*/ height: 2rem; margin: 0 0.5rem; background: #000; } </style> </head> <body> <div class="flex-parent"> <div class="flex-son"></div> <div class="flex-son"></div> <div class="flex-son"></div> </div> </body> </html>
更多flexbox的使用方法可參考大漠的《圖解CSS3》及w3c的flexbox標准原文http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/