響應式布局之CSS3彈性盒flex布局模型的具體介紹

頁面配置一直都是web應用樣式設計的重點

我們傳統的布局方式都是基於盒模型的
利用display、position、float來布局有一定局限性
比如說實現自適應垂直置中
隨著響應式布局的流行，CSS3引入了更加靈活的彈性布局模型

flex彈性布局

使用彈性布局可以有效分配一個容器的空間
即使我們的容器元素尺寸改變
它內部的元素也可以調整它的尺寸來適應空間

若想讓一個元素變成彈性盒
很簡單

.demo { /*區塊層級元素*/    display: flex;}

.demo { /*行級元素*/    display: inline-flex;}

設定了flex布局後，子項目的float、clear和vertical-align屬性就會失效

舉個小例子

<p class="flex-box">    <p class="flex-item">1</p>    <p class="flex-item">2</p>    <p class="flex-item">3</p></p>

.flex-box {    width: 500px;    height: 100px;    border: 1px solid black;}.flex-item {    width: 100px;    height: 100px;    font-size: 80px;    line-height: 100px;    text-align: center;}.flex-item:nth-child(1) {    background-color: lightseagreen;}.flex-item:nth-child(2) {    background-color: violet;}.flex-item:nth-child(3) {    background-color: cornflowerblue;}

正常情況下，子項目p預設佔滿一行，所以他們只能縱向排列

現在我們使用彈性布局

.flex-box {    display: flex; /*增*/    width: 500px;    height: 100px;    border: 1px solid black;}

我們發現子項目在父元素中呈現行排列
看起來好像子項目應用了浮動float
但這個屬性遠遠沒有這麼簡單
現在才剛剛開始(⊙▽⊙)

相關概念

在講那些屬性之前，我們先來看一些基本概念
設定了flex布局的元素，稱為“flex容器”，簡稱“容器”
它的子項目，稱為“flex項目”，簡稱“項目”
這裡我引入一張圖（原諒我的盜圖，自己懶得畫了..）

“容器”中有兩條垂直的座標軸
橫向的叫做主軸
縱向的叫做交叉軸
主軸左邊與右邊分別叫做主軸起點與主軸終點
交叉軸上邊與下邊分別叫做交叉軸起點與交叉軸終點

“項目”也有兩個名詞
每個項目的寬與高叫做主軸尺寸與交叉軸尺寸

這回我們就能理解了為什麼使用彈性布局後子項目呈現行排列
項目在容器中就是沿著主軸排列的

容器屬性

彈性盒布局“容器”有如下屬性

• flex-flow：flex-direction，flex-wrap

• justify-content

• align-items

• align-content

flex-direction

我們可以使用flex-direction指定主軸的方向，從而改變項目的排列方向
屬性值：

• row（預設）

• row-reverse

• column

• column-reverse

.flex-box {    display: flex;    width: 500px;    height: 100px;    border: 1px solid black;    flex-direction: row-reverse; /*增*/}

其他屬性也不多解釋了，很好理解

這張圖片分別對應了column-reverse、column、row、row-reverse

flex-wrap

我們彈性盒的項目預設都是排列在一個軸上的
這樣如果項目多的話，會“彈性”壓縮在一行
比如說我多加一些項目

我並沒有改變項目的寬
但是由於處於彈性盒中項目過多，項目在主軸上被壓縮

現在添加flex-wrap屬性

.flex-box {    ......    flex-wrap: wrap; /*增*/}

flex-wrap: wrap可以讓我們指定當容器“裝不下”項目時，是否換行
屬性值如下：

• no-wrap

• wrap

• wrap-reverse

前兩個我們都理解了
第三個屬性值wrap-reverse
換行的項目會排在上面像這樣

flex-flow

flex-flow是flex-direction和flex-wrap的複合屬性
兩個屬性都是必寫的
就不多解釋了

justify-content

justify-content屬性定義了項目在主軸上的對齊
屬性值如下：

• flex-start：靠左對齊（預設）

• flex-end：靠右對齊

• center：置中

• space-between：左右對齊（項目間間隔相同）

• space-around：兩端間隔對齊（項目間間隔是項目與邊框間隔的2倍）

flex-start ：

flex-end：

center：

space-between：

space-around：

align-items

align-items屬性定義項目在交叉軸上如何對齊
屬性值如下：

• stretch：未設定高度（或height: auto）的項目佔滿整個容器高度（預設）

• flex-start ：交叉軸起點對齊

• flex-end：交叉軸終點對齊

• center：交叉軸中點對齊

• baseline：項目第一行文字的基準對齊

flex-start：

flex-end：

center：

baseline：

align-content

align-content屬性定義多根軸線的對齊
這個屬性只有在容器有多條主軸是才有效，一條主軸無效
類似於justify-content屬性
屬性值如下：

• stretch：軸線佔滿整個交叉軸（預設值）

• flex-start：與交叉軸的起點對齊

• flex-end：與交叉軸的終點對齊

• center：與交叉軸的中點對齊

• space-between：與交叉軸左右對齊，軸線間間隔相等

• space-around：每根軸線兩側的間隔都相等

flex-start：

flex-end：

center：

space-between：

space-around：

項目屬性

彈性盒布局“項目”有如下屬性

• order

• flex：flex-grow、flex-shrink、flex-basis

• align-self

order

order允許我們自訂項目的排列順序
預設為0，屬性值是數字，數值越小越靠前
有點類似我們優先隊列中的優先順序

.flex-item:nth-child(1) {    ......    order: 99;}.flex-item:nth-child(2) {    ......    order: -1;}.flex-item:nth-child(3) {    ......}

flex-grow

flex-grow定義項目的放大比例
預設是0，就是如果沒有佔滿容器整行，也不放大項目，就像上面的圖片

.flex-item:nth-child(1) {    ......    flex-grow: 1; <--}.flex-item:nth-child(2) {    ......    flex-grow: 2; <--}.flex-item:nth-child(3) {    ......    flex-grow: 3; <--}

這就相當於三個項目把剩下的空間“切成”6塊
項目一拿走1塊，項目二拿走2塊，項目三拿走3塊

flex-shrink

flex-shrink定義項目的縮小比例
預設是1，就是如果空間不足，該項目將等比縮小
通過這個屬性我們可以控制各個項目縮小的比例

.flex-item:nth-child(1) {    ......    flex-shrink: 1; <--}.flex-item:nth-child(2) {    ......    flex-shrink: 2; <--}.flex-item:nth-child(3) {    ......    flex-shrink: 3; <--}

這樣各個項目縮小的比例就是 1:2:3
從而保證所有項目總寬度和容器寬度相等

flex-basis

flex-basis定義在分配多餘空間之前，項目佔據的主軸空間
預設auto，就是項目本來的寬度
我們可以手動設定長度

.flex-item:nth-child(1) {    ......    flex-basis: 150px; <--}.flex-item:nth-child(2) {    ......}.flex-item:nth-child(3) {    ......}

flex

flex是flex-grow、flex-shrink、flex-basis的複合屬性
預設值：0 1 auto，後兩個屬性可選
可以寫關鍵字：auto (1 1 auto) 和 none (0 0 auto)

align-self

align-self屬性允許個別項目擁有與眾不同的對齊
就是會覆蓋align-items設定的對齊屬性
預設值auto，繼承彈性容器的align-items屬性值
屬性值除了auto外，和align-items一樣，就不多解釋了

• auto

• stretch

• flex-start

• flex-end

• center

• baseline

.flex-box {    ......    align-items: center;}.flex-item:nth-child(2) {    ......    align-self: flex-end;}

彈性盒的全部屬性就是這些了
其實這些都是最新的文法
在此之前瀏覽器的實現都不一致，瞭解一下就好了

• 2009年規範文法：
  display: box

• 2011年非官方規範文法：
  display: flexbox

• 最新版本規範文法：
  display: flex