CSS3佈局神器 - Flexbox

display:flex是CSS3的新特性，是一個強大的佈局神器。
在傳統的佈局中，一般使用浮動float、position，雖然能很好進行佈局，但自從接觸flex後，對前端的佈局來講簡直就是一種解放。

上圖爲 flex在各瀏覽器和設備上的兼容性問題，可見除了 IE瀏覽器外基本都支持了這一特性。不過即便這樣也不用擔憂，還記得 postcss的 autoprefixer插件嗎？結合 webpack便可解決兼容問題。

使用flex只需在父元素上定義display:flex,而後子級的全部元素都具備了flex功能。
index.html

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>
</div>
複製代碼

index.css

.box { display:flex; }
.box-item { margin:5px; width:100px; height:100px; background:red; }
複製代碼

如今.box以及子元素都具有了flex特性，能夠經過相應特性進行個性化佈局，接下來將逐一介紹每個特性。

flex術語圖示

flex的兩根軸

主軸水平方向
交叉軸垂直於主軸

這些屬性應用在父級元素上

flex-direction

row 設置主軸爲水平（默認從左到右）
row-reverse 設置主軸爲水平（從右到左）
column 設置主軸爲垂直（默認從上到下）
column-reverse 設置主軸爲垂直（從下到上）

flex-wrap

nowrap 不自動換行（默認）
wrap 自動換行
wrap-reverse 從下到上開始換行

flex-flow

是flex-direction和flex-wrap的簡寫屬性

justify-content

控制主軸的對齊方式
flex-start 左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊
space-around 使項目之間的間隔相等

align-items

控制單行交叉軸的對齊方式
flex-start 左對齊
flex-end 右對齊
center 居中 baseline 基線對齊
stretch 默認撐滿整個容器高度

align-content

控制 多行交叉軸的對齊方式
flex-start 左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊
space-around 使項目之間的間隔相等

注意：若是垂直方向沒有設置高度，那麼align-items和align-content會失效

---

下面的幾個屬性是用於單個項目裏面

align-self

覆蓋align-items而在單獨項目生效例子：align-self:flex-start;

order

改變項目位置，數值越小越靠前，能夠是負數 例子：order:-1;

flex-grow

設置放大比例（無單位）例子：flex-grow:2;

flex-shrink

設置當空間不足時的收縮比例（無單位）例子：flex-shrink:2;

flex-basis

設置初始大小（有單位） 例子：flex-basis:20%;

flex

是flex-grow、flex-shrink、flex-basis的簡寫屬性

• 單值（選其中之一）
  一個無單位數(): 它會被看成flex-grow的值。
  一個有效的寬度(width)值: 它會被看成 flex-basis的值。
  關鍵字none, auto,或initial.
  例子：flex:auto;
• 雙值
  第一個值必須爲flex-grow。
  第二個值能夠是flex-shrink或者flex-basis

例子：flex:2 2;

• 三值
  flex-grow>
flex-shrink>
flex-basis>
例子：flex:1 1 auto

參考文檔

• 使用盒模型
• flex簡寫屬性