CSS3伸縮布局盒模型

CSS3伸縮布局盒模型

早期的布局主要依賴于表格，從CSS2.1中有關(guān)于布局的機(jī)制有所改變，但還是并不多。開發(fā)者通常不愿意使用絕對(duì)定位，因?yàn)樘混`活；浮動(dòng)定位常用于頁面的布局，但對(duì)于全頁多列布局來說，它總是存在一些小毛病，功能上也有很多限制。CSS3中引入了許多的布局機(jī)制，使構(gòu)建一個(gè)多列布局變得更加輕松，同時(shí)，CSS2. 1 規(guī)則是比較難實(shí)現(xiàn)的一些復(fù)雜布局表現(xiàn)， 如今也變得更加容易。

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

CSS 中的布局模式

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

-塊布局： 呈現(xiàn)文檔的布局模式。 

-行內(nèi)布局： 呈現(xiàn)文本的布局模式。 

-表格布局： 用格子呈現(xiàn)2D數(shù)據(jù)的布局模式。http:/ /www.iis7.com/b/plc/ 

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

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

最重要的是，F(xiàn)lexbox布局方向不可預(yù)知，不像常規(guī)的布局（塊就是從上到下，內(nèi)聯(lián)就從左到右），而那些常規(guī)的適合頁面布局，但對(duì)于支持大型或者復(fù)雜的應(yīng)用程序（ 特別是涉及取向改變、縮放和收縮等）就缺乏靈活性。

：Flexbox 模型的功能

Flexbox布局對(duì)于設(shè)計(jì)比較復(fù)雜的頁面非常有用?？梢暂p松地實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對(duì)位置和大小不變。 同時(shí)減少了依賴于浮動(dòng) 布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小。 Flexbox 布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會(huì)預(yù)留一些可用空間， 可以調(diào)節(jié)伸縮項(xiàng)目的相對(duì)大小和位置。 例如，可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目。當(dāng)然，如果伸縮容器沒有足夠大的空間放置伸縮項(xiàng)目時(shí)，瀏覽器會(huì)根據(jù)一定的比例減少伸縮項(xiàng)目的大小，使其不溢出伸縮容器。綜合而言，F(xiàn)lexbox 布局功能主要具有以下幾點(diǎn)：

1· 屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局。 

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

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

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

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

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

：Flexbox 模型中的術(shù)語

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

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

·主軸，主軸方向：用戶代理沿著一個(gè)伸縮容的主軸配置伸縮項(xiàng)目，主軸是主軸方向的延伸。伸縮容器的主軸，伸縮項(xiàng)目主要沿著這條軸進(jìn)行布局。小心，它不一定是水平的， 這主要取決于justify- content屬性。 如果其取值為column，主軸的方向?yàn)榭v向的。 

·主軸起點(diǎn)，主軸終點(diǎn)：伸縮項(xiàng)目的配置從容器的主軸起點(diǎn)邊開始，往主軸終點(diǎn)邊結(jié)束。也就是說，伸縮項(xiàng)目放置在伸縮容器內(nèi)從主軸起點(diǎn)（ main- start） 向主軸終點(diǎn)（ main- end）方向。 

·主軸長度，主軸長度屬性：伸縮項(xiàng)目的在主軸方向的寬度或高度就是項(xiàng)目的主軸長度，伸縮項(xiàng)目的主軸長度屬性是width或height屬性，由哪一個(gè)對(duì)著主軸方向決定。 

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

·側(cè)軸起點(diǎn)，側(cè)軸終點(diǎn)：填滿項(xiàng)目的伸縮行的配置配置從容器的側(cè)軸起點(diǎn)邊開始， 往側(cè)軸終點(diǎn)邊結(jié)束。 

·側(cè)軸長度，側(cè)軸長度屬性：伸縮項(xiàng)目的在側(cè)軸方向的寬度或高度就是項(xiàng)目的側(cè)軸長度，伸縮項(xiàng)目的側(cè)軸長度屬性是width或 height屬性，由 一個(gè)對(duì)著側(cè)軸 方向決定。

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

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

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

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

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

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

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

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

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

1). 顯示順序。 伸縮容器中的伸縮項(xiàng)目默認(rèn)顯示順序是遵循文檔在源碼中的出現(xiàn)的先后順序（HTML文檔的DOM結(jié)構(gòu)中的先后順序）。可以通過伸縮項(xiàng)目的顯示 順序修改伸縮項(xiàng)目在頁面中顯示順序，也可以通過這個(gè)屬性對(duì)伸縮項(xiàng)目進(jìn)行排序組合。 

2). 側(cè)軸對(duì)齊。 包括兩種， 一種是align-items屬性， 可以用來設(shè)置伸縮容器中包括匿名伸縮項(xiàng)目的所有項(xiàng)目的對(duì)齊方式； 另一種是align-self屬性， 主要用來 在單獨(dú)的伸縮項(xiàng)目上覆寫默認(rèn)的對(duì)齊方式。 對(duì)于匿名伸縮項(xiàng)目， align-self的值永遠(yuǎn)與其關(guān)聯(lián)的伸縮容器的align-items的值相同。 

3). 伸縮性。 定義伸縮項(xiàng)目可改變它們的寬度或高度填補(bǔ)可用的空間?？梢詫⑸炜s容器的額外空間分發(fā)給其伸縮項(xiàng)目（ 與伸縮項(xiàng)目的正彈性成正比） 或?qū)⑺鼈?縮小以防止伸縮項(xiàng)目溢出（ 與伸縮項(xiàng)目的負(fù)彈性成正比）。

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

：Flexbox 模型規(guī)范狀態(tài) 

Flexbox布局的語法規(guī)范經(jīng)過幾年發(fā)生了很大的變化，也給 Flexbox 的使用帶來一定的局限性， 因?yàn)檎Z法規(guī)范版本眾多， 瀏覽器支持不一致， 致使 Flexbox 布局使用不多。 Flexbox 語法規(guī)范主要經(jīng)歷 了以下階段。 

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布局語法規(guī)范主要分成三種。

-舊版本（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()”函數(shù)，說明是2011年版本，也稱為Flexbox混合版本。 

-看到“ display:flex”或者“ flex-{*}”屬性，說明是當(dāng)前規(guī)范，也就是W3C標(biāo)準(zhǔn)規(guī)范版本的Flexbox。

：伸縮容器設(shè)置display要改變?cè)氐哪Ｊ?，需要使用display屬性， 如果在讓一個(gè)元素變成伸縮容器， 也離不開display屬性。

屬性值主要有兩種。 

-box： 設(shè)置為塊伸縮容器。 

-inline- box： 設(shè)置為內(nèi)聯(lián)級(jí)伸縮容器。

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

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

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

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

-inline- axis： 伸縮項(xiàng)目沿著內(nèi)聯(lián)軸排列顯示。 

-block- axis： 伸縮項(xiàng)目沿著塊軸排列顯示。

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