前言

 Flex是Flexible Box的縮寫，就是「彈性佈局」。從2012年已經面世，但由於工作環境的原因一直沒有詳細瞭解。最近工作忙到頭暈腦脹，是要學點新東西刺激一下大腦，打打雞血。

Flex就這麼簡單

瀏覽器相容性

 一說到相容性就是永遠的痛，不過幸運的是隻要在IE10加-ms-字首就可以用啦^_^

涉及的物件

 Flex佈局主要是操作Flex Container 和 Flex Item兩類物件。

Flex Container為作為佈局容器擁有main axis，main start，main end，cross axis，cross start 和 cross end屬性。

1. main axis為主軸，預設是水平方向；
2. main start為主軸起始位置，預設是主軸和左側邊框的交叉點(Flex Item會從main start和cross start開始排列)；
3. main end為主軸結束位置，預設是主軸和右側邊框的交叉點；
4. cross axis為交叉軸，預設是垂直方向；
5. cross start為交叉軸起始位置，預設是交叉軸和上邊框的交叉點；
6. cross end為交叉軸結束位置，預設是交叉軸和下邊框的交叉點。

Flex Item則為容器內的孩子元素，擁有main size和cross size屬性。

1. main size為Flex Item的主軸方向寬度；
2. cross size為Flex Item的交叉軸方向寬度。

玩轉Flex Container

/* 設定Flex Container，為其直接孩子節點建立Flex Context */
display: flex;        /* 定義塊級Flex Contianer */
display: inline-flex; /* 定義行級Flex Contianer */

/* 設定main/cross axis方向和main/cross start, main/cross end的位置
 * row - 預設值，main axis為水平，main start為主軸和左側邊框的交叉點，main end為主軸和右側邊框的交叉點
 *               cross axis為垂直，cross start為交叉軸和上邊框的交叉點，cross end為交叉軸和下邊框的交叉點
 * row-reverse
 
 - main axis為水平，main start為主軸和右側邊框的交叉點，main end為主軸和左側邊框的交叉點
 *               cross axis為垂直，cross start為交叉軸和上邊框的交叉點，cross end為交叉軸和下邊框的交叉點
 * column - main axis為垂直，main start為主軸和上邊框的交叉點，main end為主軸和下邊框的交叉點
 *          cross axis為水平，cross start為交叉軸和左側邊框的交叉點，cross end為交叉軸和右側邊框的交叉點
 * column-reverse - main axis為垂直，main start為主軸和下邊框的交叉點，main end為主軸和上邊框的交叉點
 *                  cross axis為水平，cross start為交叉軸和左側邊框的交叉點，cross end為交叉軸和右側邊框的交叉點
 */
flex-direction: row | row-reverse | column | column-reverse 

/* 是否換行
 * nowrap - 預設值，打死都不換行
 * wrap - 乖乖換行，第一行到最後一行的方向為從 cross start 到 cross end
 * wrap-reverse - 乖乖換行，但第一行到最後一行的方向為從 cross end 到 cross start
 */
flex-wrap: nowrap | wrap | wrap-reverse

原文連結