第 29 章 CSS3 彈性伸縮佈局[上]

學習要點：

1.佈局簡介

2.舊版本

主講教師：李炎恢

本章主要探討 HTML5 中 CSS3 提供的用來實現未來響應式彈性伸縮佈局方案，這裡做一個初步的瞭解。

一．佈局簡介

　　CSS3 提供一種嶄新的佈局方式：Flexbox 佈局，即彈性伸縮佈局模型(Flexible Box)。用來提供一個更加有效的方式實現響應式佈局。但是用於這個佈局方式還處於 W3C 的草案階段，並且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。在發展中，可能還有各種改動，瀏覽器的相容性還存在問題。所以，本節課作為初步瞭解即可。

首先，我們來看下舊版本的瀏覽器相容情況：

Flexbox 舊版本相容情況

以上的數據，我們摘自 CSS3 手冊上的。當然，不同的教材和文章的會略有不同。但誤差率也就一到兩個版本，影響不大。

首先，第一步：先創建一段內容，分成三個區域。

//HTML 部分 

<div>
    <p>
        第一段內容...
    </p>
    <p>
        第二段內容...
    </p>
    <p>
        第三段內容...
    </p>
</div>

//CSS 部分 

p {
    width: 150px;
    border: 1px solid gray;
    margin: 5px;
    padding: 5px;
}

div {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

通過以上設置，在除了 IE 瀏覽器外，佈局實現了水平分佈。那麼下麵，我們就重點研究一下這些屬性的含義。

二．舊版本

如果屬性和屬性值為：display:box，那麼就是 2009 年 7 月份設定的工作草案，屬於舊版本。它面向的是一些早期瀏覽器的彈性佈局方案。

首先，我們要將幾個需要佈局模塊的父元素設置一下容器屬性 display。

我們知道塊級它是占用整行的，類似<div>元素；而內聯級不占用整行，類似<span>元素。但是我們設置了整個盒子，他們都不占用，保持一致。

//設置彈性，以火狐為例

div {
    display: -moz-box;
}

1.box-orient 屬性

box-orient 主要實現盒子內部元素的流動方向。

//設置垂直流動

div {
    -webkit-box-orient: vertical;
}

2.box-direction

box-direction 屬性主要是設置伸縮容器中的流動順序。

//設置逆序

div {
    -moz-box-direction: reverse;
} 

3.box-pack

box-pack 屬性用於伸縮項目的分佈方式。

//分佈方式已結束位置靠齊

div {
    -moz-box-pack: end;
} 

4.box-align

box-align 屬性用來處理伸縮容器的額外空間。//居中對齊，清理上下額外空間

div {
    -moz-box-align: center;
}

5.box-flex

box-flex 屬性可以使用浮點數分配伸縮項目的比例//設置每個伸縮項目占用的比例

p:nth-child(1) {
    -moz-box-flex: 1;
}

p:nth-child(2) {
    -moz-box-flex: 2.5;
}

p:nth-child(3) {
    -moz-box-flex: 1;
}

6.box-ordinal-group

box-ordinal-group 屬性可以設置伸縮項目的顯示位置。

//將第一個位置的元素，跳轉到第三個位置

p:nth-child(1) {
    -moz-box-ordinal-group: 3;
}