word; clear: both; text-indent: 7px; color: rgb(24, 30, 51); font-family: PingFangSC, 微軟雅黑, 黑體, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">

word; clear: both; text-indent: 7px; color: rgb(24, 30, 51); font-family: PingFangSC, 微軟雅黑, 黑體, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">彈性盒布局（display:flex）

彈性盒布局（Flexible Box）是一種十分方便的，只需要依賴于CSS的樣式就可以輕松實現響應式布局。彈性布局 flex 是CSS中 display 的一個屬性值，通過在父容器上添加 display:flex;屬性，便可以實現其子元素在父元素中的彈性布局，但要注意的是 display:flex; 這一條樣式只會作用在添加這一屬性的父容器和非隔代子容器上，換句話說，父容器上的 diaplay:flex; 屬性并不會使其直系子元素中的子元素產生彈性布局。                           

圖6-39 彈性盒結構

通俗來講，爹只能管得到自己的兒子、而管不到自己的孫子。如果想要在下一層中繼續使用彈性布局，我們可以在相應的子元素上再次添加 display:flex; 屬性來實現。彈性布局就像是在一個大盒子里擺放的幾個小盒子，各自相對獨立，其彈性盒的結構如圖6-39所示。 從上圖可以看出，彈性盒由容器，子元素和軸構成，并且默認情況下，子元素的排布方向與橫軸的方向是一致的。彈性盒模型可以用簡單的方式滿足很多常見的復雜的布局需求。它的優勢在于只要開發人員聲明布局應該具有的行為，而不需要給出具體的實現方式。瀏覽器就會負責完成實際的布局。該種方式的布局模型幾乎在主流瀏覽器中都得到來支持。

1.彈性布局的使用

彈性布局在父、子元素上都有相對應的屬性來規范子元素在父元素中的“彈力”。

①　給父容器添加display:flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規文檔流的顯示方式；

②　容器添加彈性布局后，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；

③　display:flex;容器添加彈性布局后，顯示為塊級元素；

    display: inline-flex;容器添加彈性布局后，顯示為行級元素；

④　設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。但是position定位屬性依然生效。

2.作用于父容器的相關屬性

flex布局涉及到 12 個 CSS 屬性（不含 display: flex），其中父容器、子容器各 6 個。不過常用的屬性只有 4 個，父容器、子容器各 2 個；父容器相關屬性名稱如下：

（1）flex-direction

設置主軸方向，在Flex容器內使用主軸和副軸概念；默認x軸為主軸，y軸為副軸；可由Flex容器的 flex-direction 屬性修改，在使用彈性布局時，需要通過主軸和副軸確定編輯的方向，flex-direction屬性決定主軸的方向（即項目的排列方向），基本語法格式如下：

• row（默認值）：主軸為水平方向，起點在左端。

• row-reverse：主軸為水平方向，起點在右端。

• column：主軸為垂直方向，起點在上端。

• column-reverse：主軸為垂直方向，起點在下端。

flex-direction設置不同的值，決定了容器內元素的排列方向，如圖6-40所示。

                                 圖6-40 flex-direction屬性效果

(2)flex-wrap

設置可換行屬性，默認下容器內子元素會按照主軸方向排一行，不會換行，當總長度超過容器時子元素會被壓縮，通過 flex-wrap 屬性可設置換行模式，基本語法格式如下：

  nowrap（默認）：不換行。如果容器寬度不夠時，每個項目會被擠壓寬度；

                                  圖6-41 nowrap屬性效果

• wrap：換行，并且第一行在容器最上方；

                                     圖6-42 wrap屬性效果

  wrap-reverse：換行，并且第一行在容器最下方；

                                 圖6-43 wrap-reverse屬性效果

（3）flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap，基本語法格式如下。

（4）justify-content

該屬性定義了子容器在主軸上的排列對齊方式，此屬性與主軸方向息息相關。它有5個取值，基本語法格式如下。

• flex-start（默認值）：左對齊

• flex-end：右對齊

• center： 居中

• space-between：兩端對齊，項目之間的間隔都相等。

• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。（開頭和最后的項目，與父容器的邊緣有一定的間隔，是項目間隔的一半。）

圖6-44  justify-content屬性效果

（5）align-items

align-items屬性定義項目在交叉軸(副軸)上如何對齊，基本語法格式如下，效果如圖6-44所示。

圖6-44  justify-content效果 

                                           圖6-45align-content效果

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

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

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

• baseline: 項目的第一行文字的基線對齊。（文字的行高，字體大小會影響每行的基線）

• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

（6）align-content

align-content屬性在開啟換行模式后有換行時設置多行在副軸方向的對齊方式，如果項目只有一根軸線，該屬性不起作用，效果如圖6-45所示。

.box {

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

}

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

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

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

• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

• space-around：每根軸線兩側的間隔都相等。軸線之間的間隔比軸線與邊框的間隔大一倍。

• stretch（默認值）：軸線占滿整個交叉軸。

3．作用于子元素的相關屬性

作用于子元素的6個相關屬性如下所示。

（1）order

order屬性定義項目的排列順序,值為無單位整數,數值越小，排列越靠前，默認為0，效果如圖6-46所示。

圖6-46   order屬性效果

（2）flex-grow

定義子元素放大比例，只有在容器主軸方向大小大于子元素總大小時才有效果，即容器有空余，值為無單位非負數字，可設置浮點數，默認為0；當值為0時代表子元素不放大，如果容器有剩余空間則空出；如果有子元素 flex-grow 值不為0，則子元素會按照 flex-grow 值的比例放大并填充容器的剩余空間，效果如圖6-47所示。

                               圖6-47   flex-grow屬性效果

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。具體計算方式：

（3）flex-shrink

定義子元素縮小比例，只有在容器主軸方向大小小于子元素總大小且不換行時才有效果，即容器空間不足，值為無單位非負數字，可設置浮點數，默認為1；為0表示子元素不縮小，如果容器大小小于子元素總大小，而所有子元素均不縮小，則子元素會超出容器范圍；如果有子元素 flex-shrink 值不為0，則子元素會按照 flex-shrink 值的比例縮小在容器中，效果如圖6-48所示。

圖6-48  flex-shrink屬性效果

（4）    flex-basis

圖6-49  flex-basis屬性效果

    flex-basis屬性定義項目占據的主軸空間，如果主軸為水平，則設置這個屬性，相當于設置項目的寬度，原寬度width將會失效。推薦在彈性布局中多使用 flex-basis 而不是直接設置 width height 屬性，它的默認值為auto，即項目的本來大小，效果如圖6-49所示。

（5）flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1auto。后兩個屬性可選。這個屬性有兩個快捷設置：auto=(1 1 auto)/none=(0 0 auto)。通常直接用 flex 設置子元素比例大小，例如使用 flex: 1 直接設置大小比例，而不再單獨寫 flex-grow: 1

（6）align-self

align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch(默認值)，基本語法格式如下。除多出默認值 auto 外，屬性值同 align-items。效果如圖6-50所示。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}

圖6-50  flex-basis屬性效果

下面通過案例6-29來測試以上彈性盒布局的各個屬性,效果如圖6-51所示。

例6-29   example29.html

圖6-51彈性盒屬性應用效果

學習完彈性盒的各個屬性，接下來使用彈性盒來做一個非常常見且實用的響應式布局，圣杯布局。圣杯布局是指在頁面主體部分分為 left content right 3部分，left和right固定大小，content部分會自適應屏幕大小，后來國內的淘寶團隊對其進行了改良，改良后效果基本相同，一般叫做雙飛翼布局，使用搜索引擎搜索有很多相關介紹。

圣杯布局是使用 floatmargin padding 和定位等盒模型方法實現的，關鍵點是使用負值的 margin 使left和right可以與設置為100%寬度的content浮動在同一行中，這里使用彈性布局則可以非常方便清晰的實現有自適應效果的圣杯布局，通過案例6-30來體驗,效果如圖6-52、6-53所示。

例6-30  example30.html

Web瀏覽器運行效果如圖6-52所示。

                                  圖6-52 彈性盒布局PC端頁面效果

Web瀏覽器響應式設計模式下運行效果如圖6-53所示。

Web瀏覽器響應式設計模式下運行,如果頁面的高度超過設備屏幕的高度時，頁面的下半部分不會完全展示在移動設備上，這時，可以通過滑動屏幕的方式查看頁面下半部分內容。

本模塊詳細講解了HTML5的一些高級特性，過渡，變形，動畫，畫布，響應式布局設計等知識點。重點講解了什么是響應式WEB設計，然后對響應式WEB設計相關知識點，視口，媒體查詢，彈性盒模型等核心技術進行了講解。學習本模塊內容后，要求讀者能進行頁面基本動畫的處理，了解響應式布局的設計，掌握媒體查詢盒彈性盒布局的應用。

圖6-53 彈性盒布局移動端頁面效果