CSS3伸縮布局盒模型

CSS3伸縮布局盒模型

早期的布局主要依賴于表格，從CSS2.1中有關于布局的機制有所改變，但還是并不多。開發者通常不愿意使用絕對定位，因為太不靈活；浮動定位常用于頁面的布局，但對于全頁多列布局來說，它總是存在一些小毛病，功能上也有很多限制。CSS3中引入了許多的布局機制，使構建一個多列布局變得更加輕松，同時，CSS2. 1 規則是比較難實現的一些復雜布局表現， 如今也變得更加容易。

1. 彈性盒模型：Flexbox模型基礎知識CSS3引入一種新的布局模式——Flexbox 布局，即伸縮布局盒（FlexibleBox）模型，用來提供一個更加有效的方式制定、 調整和分布一個容器里的項目布局，即使它們的大小是未知或者動態的，這里簡稱 Flex。

CSS 中的布局模式

談到布局，CSS2.1中定義了四種布局模式，由一個盒與其弟、祖先盒的關系決定其尺寸與位置的算法。 

-塊布局： 呈現文檔的布局模式。 

-行內布局： 呈現文本的布局模式。 

-表格布局： 用格子呈現2D數據的布局模式。http:/ /www.iis7.com/b/plc/ 

-定位布局： 能夠直接地定位元素的布局模式，定位元素基本與其他元素沒有任何關系。 

CSS3引入的布局模式Flexbox布局，主要思想是讓容器有能力讓其子項目能夠改變其寬度、高度（甚至順序），以最佳方式填充可用空間（主要是為了適應所有類型的顯示設備和屏幕大小）。Flex容器會使子項目（ 伸縮 項目）擴展來填滿可用空間， 或縮小它們以防止溢出容器。

最重要的是，Flexbox布局方向不可預知，不像常規的布局（塊就是從上到下，內聯就從左到右），而那些常規的適合頁面布局，但對于支持大型或者復雜的應用程序（ 特別是涉及取向改變、縮放和收縮等）就缺乏靈活性。

：Flexbox 模型的功能

Flexbox布局對于設計比較復雜的頁面非常有用。可以輕松地實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變。 同時減少了依賴于浮動 布局實現元素位置的定義以及重置元素的大小。 Flexbox 布局在定義伸縮項目大小時伸縮容器會預留一些可用空間， 可以調節伸縮項目的相對大小和位置。 例如，可以確保伸縮容器中的多余空間平均分配多個伸縮項目。當然，如果伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。綜合而言，Flexbox 布局功能主要具有以下幾點：

1· 屏幕和瀏覽器窗口大小發生改變也可以靈活調整布局。 

2· 指定伸縮項目沿著主軸或側軸按比例分配額外空間（ 伸縮容器額外空間），從而調整伸縮項目的大小。 

3· 指定伸縮項目沿著主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之后或之間。 

4· 指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍。 

5· 控制元素在頁面上的布局方向。 

6· 按照不同于文檔對象模型（ DOM） 所指定排序方式對屏幕上的元素重新排序。 也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項目順序。

：Flexbox 模型中的術語

Flexbox模型中的術語和CSS3其他屬性不一樣，Flexbox并不是一個屬性，而是一個模塊，包括多個CSS3屬性，涉及很多東西，包括整個組屬性。 雖然現在對Flexbox有 一定的了解，如果想更好地使用 Flexbox，新的術語和概念可能是一個障礙，所以首先了解基本概念。

1.主軸和側軸在Flexbox模型中與布局計算偏向使用書寫模式方向的塊布局與行內布局不同，伸縮布局偏向使用伸縮流的方向。一個row伸縮容器中各種方向與大小術語 

·主軸，主軸方向：用戶代理沿著一個伸縮容的主軸配置伸縮項目，主軸是主軸方向的延伸。伸縮容器的主軸，伸縮項目主要沿著這條軸進行布局。小心，它不一定是水平的， 這主要取決于justify- content屬性。 如果其取值為column，主軸的方向為縱向的。 

·主軸起點，主軸終點：伸縮項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。也就是說，伸縮項目放置在伸縮容器內從主軸起點（ main- start） 向主軸終點（ main- end）方向。 

·主軸長度，主軸長度屬性：伸縮項目的在主軸方向的寬度或高度就是項目的主軸長度，伸縮項目的主軸長度屬性是width或height屬性，由哪一個對著主軸方向決定。 

·側軸，側軸方向：與主軸垂直的軸稱做側軸， 側軸是側軸方向的延伸。 主要取決于主軸方向。 

·側軸起點，側軸終點：填滿項目的伸縮行的配置配置從容器的側軸起點邊開始， 往側軸終點邊結束。 

·側軸長度，側軸長度屬性：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是width或 height屬性，由 一個對著側軸 方向決定。

2. 伸縮容器和伸縮項目通過display屬性顯式地給一個元素設置為flex或者inline-flex，這個容器就是一個伸縮容器。伸縮容器會為其內容創立新的伸縮 格式化上下文，其中設置為flex的容器被渲染為一個塊級元素，而設置 為inline-flex的容器則渲染為一個行內元素。若元素display的指定值是inline-flex 且元素 是一個浮動或絕對定位元素， 則display的計算值是flex。一個伸縮容器的內容具有零個以上的伸縮項目——伸縮容器的每個子元素（ 除了需要盒修復的元素 之外）都會成為一個伸縮項目，且用戶代理會將任何直接在伸縮容器里的連續文字塊包起來成為匿名伸縮項目。

3. 伸縮容器的屬性Flexbox伸縮布局中伸縮容器和伸縮項目是伸縮布局模塊中的重要部分，其中每一部分都具有各自的屬性。伸縮容器的屬性包括以下幾個：

 1). 伸縮流方向。是指伸縮容器的主軸方向，其決定了伸縮項目放置在伸縮容器的方向。伸縮流方向主要通過flex- direction屬性來設置，其默認值為row。 伸縮流方向和書寫模式有關系，換句話說，伸縮項目根據書寫模式的方向布局。

 2). 伸縮行換行。伸縮項目在伸縮容器中有時候也會溢出伸縮容器。與傳統的盒模型一樣，CSS允許使用overflow屬性來處理溢出內容的顯示方式。 在伸縮容器中有一個伸縮換行屬性，主要用來設置伸縮容器的伸縮項目是單行顯示還是多行顯示，以及決定側軸的方向。 使用此屬性來啟用溢出的伸縮容器的伸縮項目自動換行到下一行以及控制流動方向。在伸縮容器屬性中，主要通過flex-wrap屬性來設置伸縮項目是否換行， 默認值為 nowrap。

 3). 伸縮方向與換行。是伸縮流方向與伸縮換行的結合物，換句話說，伸縮方向與換行屬性flex-flow同時設定了伸縮流方向flex-direction和伸縮換行flex-wrap 兩個屬性，簡而言之是這兩個屬性的縮寫，這兩個屬性決定了伸縮容器的主軸與側軸。 

 4). 主軸對齊。用來設置伸縮容器當前行伸縮項目在主軸方向的對齊方式，指定如何在伸縮項目之間分布伸縮容器額外空間。當一行上的所伸縮項目不能伸縮或 可伸縮但已達到最大長度時，這一屬性才會對伸縮容器額外空間進行分配。當伸縮項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。

5). 側軸對齊。伸縮項目可以在伸縮容器當前行的側軸上進行對齊，這類似于主軸對齊方式，只是另一個方向。也就是說側軸對齊主要用來指定伸縮項目在伸縮 容器中如何放置和對齊的方式。換句話說，用來定義伸縮項目在伸縮容器的當前行的側軸上對齊方式。 

6). 堆棧伸縮行。 用來定義伸縮容器中伸縮項目行在側軸的對齊方式，類似于側軸對齊，只不過這是用來控制伸縮項目行在布局軸的堆放方式。

4.    伸縮項目的屬性一個伸縮項目是一個伸縮容器的子元素。伸縮容器中的文本也被視為一個伸縮項目。伸縮項目中內容與普通流一樣。比如說，當一個伸縮 項目被設置為浮動， 依然可以在這個伸縮項目中放置一個浮動元素。 伸縮項目都有一個主軸長度和一個側軸長度。 主軸長度是伸縮項目在主軸上的尺寸， 側軸 長度是伸縮項目在側軸上的尺寸。 或者說，一個伸縮項目的寬度或高取決于伸縮容器的軸，可能就是它的主軸長度或側軸長度。下面的幾個屬性可以調整伸縮 項目的行為： 

1). 顯示順序。 伸縮容器中的伸縮項目默認顯示順序是遵循文檔在源碼中的出現的先后順序（HTML文檔的DOM結構中的先后順序）。可以通過伸縮項目的顯示 順序修改伸縮項目在頁面中顯示順序，也可以通過這個屬性對伸縮項目進行排序組合。 

2). 側軸對齊。 包括兩種， 一種是align-items屬性， 可以用來設置伸縮容器中包括匿名伸縮項目的所有項目的對齊方式； 另一種是align-self屬性， 主要用來 在單獨的伸縮項目上覆寫默認的對齊方式。 對于匿名伸縮項目， align-self的值永遠與其關聯的伸縮容器的align-items的值相同。 

3). 伸縮性。 定義伸縮項目可改變它們的寬度或高度填補可用的空間。可以將伸縮容器的額外空間分發給其伸縮項目（ 與伸縮項目的正彈性成正比） 或將它們 縮小以防止伸縮項目溢出（ 與伸縮項目的負彈性成正比）。

5.      伸縮行伸縮項目沿著伸縮容器內的一個伸縮行定位。 伸縮容器可以是單行的， 也可以是多行的。 其主要由flex-warp屬性決定。單行的伸縮容器會將其 所有子元素在單獨的一行上進行布局，這種情況之下有可能導致內容溢出伸縮容器； 多行的伸縮窗口會將其伸縮項目配置在多個伸縮行上，這類似于文本的 排列。 當文本過寬導致一行無法容納時，內容會斷開并移至新的一行。 當用戶代理創建新的伸縮行時，這些伸縮行會根據flex-wrap屬性沿著側軸進行堆疊。 除非伸縮容器本身是空的， 每一個伸縮行至少包含一個伸縮項目。

：Flexbox 模型規范狀態 

Flexbox布局的語法規范經過幾年發生了很大的變化，也給 Flexbox 的使用帶來一定的局限性， 因為語法規范版本眾多， 瀏覽器支持不一致， 致使 Flexbox 布局使用不多。 Flexbox 語法規范主要經歷 了以下階段。 

1). 2009 年 07 月 工作 草案（ display: box）

2). 2011 年 03 月 工作 草案（ display: flexbox）

3). 2011 年 11 月 工作 草案（ display: flexbox）

4). 2012 年 03 月 工作 草案（ display: flexbox）

5). 2012 年 06 月 工作 草案（ display: flex）

6). 2012 年 09 月 候選 推薦（ display: flex）

把Flexbox布局語法規范主要分成三種。

-舊版本（Old），2009年版本，使用display: box 或者display: inline-box。 

-混合版本（ Hybrid），2011年版本，使用display: flexbox 或者display: inline-flexbox。 

-最新版本（ Modern），使用display:flex或者display:inline-flex。

：如何辨別舊Flexbox和新Flexbox

-看到“ display:box”或者“ box-{*}”屬性，說明是2009年版本的Flexbox。 

-看到“ display:flexbox”或者“ flex()”函數，說明是2011年版本，也稱為Flexbox混合版本。 

-看到“ display:flex”或者“ flex-{*}”屬性，說明是當前規范，也就是W3C標準規范版本的Flexbox。

：伸縮容器設置display要改變元素的模式，需要使用display屬性， 如果在讓一個元素變成伸縮容器， 也離不開display屬性。

屬性值主要有兩種。 

-box： 設置為塊伸縮容器。 

-inline- box： 設置為內聯級伸縮容器。

：伸縮流方向box-orient伸縮流方向box-orient 屬性主要用來創建主軸， 從而定義了伸縮項目在伸縮容器中的流動布方向。 換句話說主要用來指定伸縮項目如何放置在伸縮容器的主軸上。

伸縮流方向box-orient主要適用于伸縮容器。 伸縮流方向主要是用來確定伸縮項目在伸縮容器中的流動布局方向，該屬性主要有四個屬性值， 其取值說明如下：

-horizontal： 伸縮項目在伸縮容器中從左到右在一條不平線上排列顯示。 

-vertical： 伸縮項目在伸縮容器中從上到下在一條垂直線上排列顯示。 

-inline- axis： 伸縮項目沿著內聯軸排列顯示。 

-block- axis： 伸縮項目沿著塊軸排列顯示。

伸縮流方向和文本書寫模式也有關系， 如果書寫模式是ltr， 表示排版本方向從左向右， 如果書寫模式是rtl表示排版方向從右向左排列。 伸縮流的取值為 horizontal 和 inline- axis 時， 確認伸縮項目的 伸縮流方向和書寫模式的方向關連性非常的強。 可以說書寫模式直接影響了它們的排列方向。