CSS3 flex 佈局 （轉：阮一峯）

新版本

新版本的 Flexbox 模型於 2012 年 9 月提出。

新版本彈性伸縮盒的display屬性值：

屬性值	說明
flex	將容器盒模型做爲塊級彈性伸縮盒顯示
inline-flex	將容器盒模型做爲內聯級彈性伸縮盒顯示

div {
    display: flex;
}

注意：設爲 Flex 佈局之後，flex容器子元素的float、clear和vertical-align屬性將失效。

瀏覽器兼容性

IE	Firefox	Chrome	Opera	Safari
10+	22+	21+	12.1+	6.1+

基本概念

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱：容器

容器的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱：項目

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。

• 主軸的開始位置（與邊框的交叉點）叫作main start
• 主軸結束位置（與邊框的交叉點）叫作main end
• 交叉軸的開始位置叫作cross start
• 交叉軸的結束位置叫作cross end

項目默認沿主軸排列。

• 單個項目佔據的主軸空間叫作main size
• 單個項目佔據的交叉軸空間叫作cross size

屬性詳解

容器屬性

flex-direction

flex-direction屬性用於設置項目排列的依據（主軸或交叉軸）

flex-direction: row | column | row-reverse | column-reverse;

• 默認值：row

屬性值	說明
row	依據主軸排列，起點在左端
column	依據交叉軸排列，起點在右端
row-reverse	依據交叉軸排列，起點在上沿
column-reverse	依據交叉軸排列，起點在下沿

flex-wrap

flex-wrap屬性定義，若是項目在一條軸線排不下，如何換行。

flex-wrap: nowrap | wrap | wrap-reverse;

• 默認值：nowrap

屬性值	說明
nowrap	不換行，都在一行顯示
wrap	自動換行，第一行在上方
wrap-reverse	自動換行，第一行在下方

• nowrap ：不換行

• wrap ：換行，第一行在上方

• wrap-reverse ：換行，第一行在下方

flex-flow

flex-flow屬性是flex-direction（排列方向）和flex-wrap（控制換行）的簡寫形式。

flex-flow: <flex-direction> || <flex-wrap>;

• 默認值：row nowrap

justify-content

justify-content屬性用於設置項目在主軸的對齊方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

• 默認值：flex-start

屬性值	說明
flex-start	項目以主軸左側對齊
flex-end	項目以主軸右側對齊
center	項目以主軸中心居中對齊
space-between	項目兩端對齊，項目之間的間隔都相等
space-around	項目兩端對齊，每一個項目兩側的間隔相等

align-items

align-items屬性用於設置項目在交叉軸的對齊方式。

align-items: stretch | flex-start | flex-end | center | baseline;

• 默認值：stretch

屬性值	說明
stretch	若是項目未設置高度或設爲auto，將佔滿整個容器的高度
flex-start	項目以交叉軸起點對齊
flex-end	項目以交叉軸終點對齊
center	項目以交叉軸的中點對齊
baseline	項目以第一行文字的基線對齊

align-content

align-content屬性用於設置多根軸線的對齊方式。

注意：若是項目只有一根軸線，該屬性不起做用。

align-content: stretch | flex-start | flex-end | center | space-between | space-around;

• 默認值：stretch

屬性值	說明
stretch	軸線佔滿整個交叉軸
flex-start	以交叉軸起點對齊
flex-end	以交叉軸的終點對齊
center	以交叉軸的中點對齊
space-between	以交叉軸兩端對齊，軸線之間的間隔平均分佈
space-around	以交叉軸兩端對齊，每根軸線兩側的間隔都相等

項目屬性

order

order屬性設置項目出現的順序。

order: <integer>;

• 默認值：0

flex-grow

flex-grow屬性用於設置項目的放大比例（分配剩餘空間）

flex-grow: <number>;

• 默認值：0
• 若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間
• 若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

flex-shrink

flex-shrink屬性用於設置項目的縮小比例（處理溢出空間）

flex-shrink: <number>;

• 默認值：1
• 若是全部項目的flex-shrink屬性都爲1，則當空間不足時，都將等比例縮小。
• 若是一個項目的flex-shrink屬性爲0，則空間不足時，該項目不縮小。

flex-basis

flex-basis屬性定義了分配多餘空間以前，項目佔據的主軸空間

flex-basis: auto | <length>;

• 默認值：auto
• 瀏覽器根據這個屬性，計算主軸是否有多餘空間。
• flex-basis屬性設置固定值（例如：350px），則項目將佔據固定空間。

flex

flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫

flex: none | [ <flex-grow> <flex-shrink> || <flex-basis> ]

• 默認值：0 1 auto

屬性值	說明
auto	(1 1 auto)
none	(0 0 auto)

align-self

align-self用於單獨設置某個項目在交叉軸的對齊方式，可覆蓋align-items屬性。

align-self: auto | stretch | flex-start | flex-end | center | baseline;

• 默認值：auto

屬性值	說明
auto	表示繼承父元素的align-items屬性
stretch	若是項目未設置高度或設爲auto，將佔滿整個容器的高度
flex-start	項目以交叉軸起點對齊
flex-end	項目以交叉軸終點對齊
center	項目以交叉軸的中點對齊
baseline	項目以第一行文字的基線對齊

參考資源

阮一峯：Flex 佈局教程：語法篇