CSS3彈性盒子模型

基本概念：

Flexbox布局官方稱之為CSS Flexible Box布局模塊,他是CSS3中的一種新的布局模式。Flexbox可以控制未知容器元素的對(duì)齊方式，排列方向，排列順序等，甚至是在未知大小的容器也能這樣做。Flex容器的主要特點(diǎn)是能夠修改其子元素（Flex item）的寬度或高度，使其在不同的屏幕尺寸中填補(bǔ)可用的空間。

許多設(shè)計(jì)人員和開發(fā)人員發(fā)現(xiàn)使用Flexbox來布局更容易，可以使用更少的代碼，更簡單的方式實(shí)現(xiàn)更復(fù)雜的布局，也使整個(gè)開發(fā)過程更為簡單。Flexbox布局算法基于水平或垂直的塊或行內(nèi)元素來布局。Flexbox布局常用于小的應(yīng)用程序組件之中，而CSS Grid布局模塊將應(yīng)用于大規(guī)模的布局之中。

二，box-flex屬性：

2.1：理解：

有道桌面詞典顯示，”flex”一詞中文有“收縮”之意。不過，從此屬性實(shí)際上產(chǎn)生的效果來看，無論怎樣用“收縮”一詞解釋都顯得很牽強(qiáng)。所以，這里，直接拋開字面意思，我們可以將”box-flex”理解為”房子-分配”。box為“盒子”的意思，我們可以理解為當(dāng)下價(jià)格巨高的“房子”，”flex”指兄弟幾個(gè)“分配房子”。

舉個(gè)更實(shí)際點(diǎn)的例子：馬林大叔省吃儉用一輩子，終于在上海郊外買了間150平米的商品房。后來，馬林大叔想回老家養(yǎng)老，決定把房子分配給他的三個(gè)兒子。ok，先暫停下，這里提到的“房子”就是”box-flex”中的”box”，“分配”就是”box-flex”中的”flex”，于是，這個(gè)“分配房子”的舉動(dòng)就稱為”box-flex”，而box-flex屬性的值就是說的如何分配，分配比例是什么。oK，繼續(xù)我們的例子，馬林大叔的三個(gè)兒子分別叫做大馬，中馬和小馬，其中大馬已經(jīng)結(jié)婚多年，有一堆雙胞胎女兒，拖家?guī)Э诘娜硕?；而中馬和小馬是優(yōu)秀的光棍人士。所以，大馬要求分配更多的房子，最終，家人一番協(xié)商有了下面的分配結(jié)果，就是：

#大馬 { 房子-分配: 2; }

#中馬 { 房子-分配: 1; }

#小馬 { 房子-分配: 1; }

我想，上面的分配應(yīng)該很容易看懂的。房子分成了總共4份，其中有家室的大馬分得其中的兩份，而為國家省橡膠的中馬和小馬每人分得其中一份，于是用數(shù)值換算就是：

大馬 = 150 * (2 / (2+1+1)) = 75（平米）;

中馬 = 150 * (1 / (2+1+1)) = 37.5（平米）;

小馬 = 150 * (1 / (2+1+1)) = 37.5（平米）;

如果裝換成CSS表示就是：

#first_boy { box-flex: 2; }

#second_boy { box-flex: 1; }

#three_boy { box-flex: 1; }

2.2屬性要求：

box-flex的值為至少為1的整數(shù)時(shí)起作用。但是，僅僅一個(gè)box-flex屬性是不足以實(shí)現(xiàn)子元素間的空間分配，因?yàn)檫€要看其老爸的意思。所謂，我爸是李剛，撞人很囂張；恨爸不是剛，撞人心慌慌。只有老爸開口說：“這個(gè)房子現(xiàn)在你們隨意分配。”其子女才能分配。

所以，父元素也是需要添加必要的聲明的。此聲明就是：

#father { display: box; }

似乎也可以是：

#father { display: inline-box; }

2.3解釋說明：

此聲明好像是在說：孩子們，現(xiàn)在我把這個(gè)房子變成了可隨意分配狀態(tài)，非固定財(cái)產(chǎn)，你們可以自己協(xié)商分配了。

display: box;的聲明其實(shí)就是彈性盒子模型的聲明，此聲明下的子元素的行為與表現(xiàn)與CSS2中的傳統(tǒng)盒子模型的表現(xiàn)是有顯著的差異的。

畢竟屬于CSS3的東西，目前而言，僅Firefox/Chrome/Safari瀏覽器支持彈性盒子模型（IE9不詳，Opera尚未），且使用的時(shí)候，需要附帶私有前綴。就是諸如-moz-, -webkit-之類。

2.4，定寬元素彈性布局：

語法：

#大馬 { 房子-分配: 2; }

#中馬 { 房子-分配: 1; }

#小馬 { 房子-分配: 50m2; }

還是不難理解，當(dāng)子元素中有寬度值的時(shí)候，此元素就定寬處理，剩下的空間再按比例分配。

于是，此時(shí)，大馬的房子大小是：(150 – 50) * (2 / (1 + 2)) = 66.7平米，中馬分配房子大小是：(150 – 50) * (1 / (1 + 2)) = 33.3平米。

轉(zhuǎn)換成CSS：

#first_boy { box-flex: 2; }

#second_boy { box-flex: 1; }

#three_boy { width: 50px; }

三,父元素的其他屬性操作：

彈性盒子模型下的爸爸（父標(biāo)簽）其實(shí)是很有貨的，男人嘛，就應(yīng)該這樣，夠沉穩(wěn)夠內(nèi)涵。

爸爸肚子中的貨有：box-orient, box-direction, box-align, box-pack, box-lines. 現(xiàn)在依次講講這里box打頭的屬性都是干嘛用的。

3.1，box-orient

box-orient用來確定子元素的方向。是橫著排還是豎著走?？蛇x的值有：

horizontal | vertical | inline-axis | block-axis | inherit

其中，inline-axis是默認(rèn)值。且horizontal與inline-axis的表現(xiàn)似乎一致的，讓子元素橫排；而vertical與block-axis的表現(xiàn)也是一致的，讓元素縱列

3.2,box-direction

box-direction是用來確定子元素的排列順序，可選值有：

normal | reverse | inherit

其中normal是默認(rèn)值，表示按照正常順序排列。所謂正常順序，就是我們看書寫文字的順序，從左往右，由上至下，先出現(xiàn)的元素，就上面或是左邊。而reverse表示反轉(zhuǎn)，原本從左往右應(yīng)該是1-2-3的，結(jié)果顯示確實(shí)3-2-1。

3.3,box-align

box-align與box-pack都是決定盒子內(nèi)部剩余空間怎么使用的。在行為效果上就是表現(xiàn)為“對(duì)齊”，這跟Adobe的軟件中的一些“對(duì)齊”是一致的，例如化妝大師photoshop中的圖層-對(duì)齊：

其中box-align決定了垂直方向上的空間利用，也就是垂直方向上的對(duì)齊表現(xiàn)。為了便于記憶，我們可以拿來和CSS2中的vertical-align隱射記憶，兩者都有”align”，都是都是垂直方向的對(duì)齊；而剩下的box-pack就是水平方向的了。

box的可選參數(shù)有：

start | end | center | baseline | stretch

其中stretch為默認(rèn)值，為拉伸，也就是父標(biāo)簽高度過高，其孩子元素的高度就多高，//zxx:以后等高布局不用愁了。start表示頂邊對(duì)齊，end為底部對(duì)齊，center為居中對(duì)齊，baseline表示基線（英文字母o,m,n等的底邊位置線）對(duì)齊。

3.4box-pack

box-pack決定了父標(biāo)簽水平遺留空間的使用，其可選值有：

start | end | center | justify

就大部分的行為表現(xiàn)來說分別對(duì)應(yīng)text-align屬性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因?yàn)閎ox-direction屬性，這玩意可以反轉(zhuǎn)原本的排列，原本的“左對(duì)齊”反轉(zhuǎn)后結(jié)果是“右對(duì)齊”了，此時(shí)”left”顯然就詞不達(dá)意了，所以使用”start”更具有概括性，就是與父標(biāo)簽的起始位置對(duì)齊，從而不會(huì)產(chǎn)生語義與行為上的困擾。

其中”start”是box-pack屬性的默認(rèn)值，justify表示兩端對(duì)齊。

3.5,box-lines

box-lines是用來決定子元素是可以換行顯示呢？還是就算擠出油還是單行顯示。兩個(gè)可選值：

single | multiple

其中single是默認(rèn)值，表示死活不換行

3.6align-items

定義：設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。

語法

align-items:flex-start|flex-end|center|baseline|stretch

flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。

flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。

center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長度）。

baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。

stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。