1、css3中的彈性盒子模型css3中的彈性盒子模型介紹在css2當(dāng)中，存在標(biāo)準(zhǔn)模式下的盒子模型和ie下的怪異盒子模型。這兩種計(jì)劃表示的是一種盒子模型的渲染模式。而在css3當(dāng)中，新增強(qiáng)了彈性盒子模型，彈性盒子模型是一種新增強(qiáng)的強(qiáng)大的、靈便的布局計(jì)劃。彈性盒子模型是css3中新提出的一種布局計(jì)劃。是一種為了應(yīng)對(duì)針對(duì)不同屏幕寬度不同設(shè)備的一整套新的布局計(jì)劃。主要是對(duì)一個(gè)容器中的子元素舉行羅列、對(duì)齊和分配空白空間的計(jì)劃的調(diào)節(jié)。新舊版本的彈性盒子模型在之前，css3曾經(jīng)推出過(guò)舊版本的彈性盒子模型。相對(duì)于新版本的彈性盒子模型而言，舊版本的內(nèi)容與新版本還是有些出入。而且，從功能上來(lái)講，舊版本的彈性盒子模型遠(yuǎn)

2、遠(yuǎn)沒(méi)有新版本的盒子模型強(qiáng)大，從兼容性來(lái)講，二者在pc端ie9以下都存在著兼容性問(wèn)題，但是在移動(dòng)端，舊版本的彈性盒子模型兼容性則更好一點(diǎn)。但是對(duì)于我們來(lái)說(shuō)，我們依舊要將主要的精力放在新版本的彈性盒子模型的身上，由于舊版本的彈性盒子模型淘汰是必定，隨著手機(jī)端的兼容性逐漸提升，舊版本必將被淘汰。另外，新版本具有越發(fā)強(qiáng)大的功能，也值得我們舉行深度的學(xué)習(xí)。那么我們對(duì)于新舊兩個(gè)版本的彈性盒子模型，我們只需要抱著對(duì)照的心態(tài)學(xué)習(xí)即可，把握新版本，了解舊版本，這樣即使有一天我們需要用法舊版本，也可以十分簡(jiǎn)單的學(xué)習(xí)舊版本的彈性盒子模型。相關(guān)概念 主軸 我們以元素排在一行為例，當(dāng)元素羅列在一行的時(shí)候，主軸既表示元素

3、羅列的方向，橫向羅列則主軸即可以理解為一條橫線，又由于我們?cè)啬J(rèn)是從左向右羅列，那么我們可以說(shuō)在默認(rèn)的狀況下，元素的主軸的起始位置是在左，而方向?yàn)橛遥M頭也為右。 側(cè)軸 元素垂直的方向即為側(cè)軸。默認(rèn)上為起點(diǎn)，下為盡頭。 彈性容器 我們想要用法彈性盒子模型，就需要將容器轉(zhuǎn)換為彈性容器，我們說(shuō)一個(gè)包含于子元素的容器設(shè)置了display:flex，那么這個(gè)容器也就變成了彈性容器。 彈性子元素 當(dāng)子元素的父元素變成了彈性容器，那么其中的全部的子元素也自然而然的變成了彈性子元素。 如何創(chuàng)建一個(gè)彈性容器： display:flex | inline-flex 彈性容器屬性 flex-direction

4、彈性容器中子元素的羅列方式(主軸羅列方式) 屬性值： row:默認(rèn)在一行羅列 row-reverse:反轉(zhuǎn)橫向羅列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。） column：縱向羅列。 column-reverse：反轉(zhuǎn)縱向羅列，從下往上排，最后一項(xiàng)排在最上面 flex-direction html,body margin:0; padding:0; nav height: 500px; background-color: lightcyan; display: flex; flex-direction: row-reverse;/*居左1234 變成居右4321*/ flex-directi

5、on: column;/*居左1234變成上下1234*/ flex-direction: column-reverse;/*變成下上1234*/ nav div width: 100px; height: 100px; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin-right: 10px; 1 2 3 4 flex-wrap 設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行 屬性值： nowrap: 默認(rèn)值。規(guī)定元素不拆行或不拆列。 wrap:規(guī)定元素在須要

6、的時(shí)候拆行或拆列。 wrap-reverse:規(guī)定元素在須要的時(shí)候拆行或拆列，但是以相反的挨次。 flex-wrap .box height: 600px; background-color: lightgoldenrodyellow; display: flex; /*設(shè)置了屬性為wrap，那么一行放不下的時(shí)候會(huì)自動(dòng)的去下一行*/ /*flex-wrap:wrap;*/ /*設(shè)置了屬性為wrap-reverse會(huì)讓排序發(fā)生一個(gè)反轉(zhuǎn)，雖然同樣是多行，但是會(huì)變成從下到上*/ flex-wrap: wrap-reverse; .box div width: 100px; height: 100px

7、; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin: 10px; 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 flex-flow flex-direction 和 flex-wrap 的簡(jiǎn)寫 flex-wrap .box height: 600px; background-color: lightgoldenrodyellow; display: flex; flex-flow: row wrap; .box div widt

8、h: 100px; height: 100px; background-color: lightblue; line-height: 100px; text-align: center; font-weight: bold; margin: 10px; 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 align-item 設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式 相關(guān)屬性值： flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。 flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。 center：

9、彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（假如該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。 baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與&39;flex-start&39;等效。其它狀況下，該值將參加基線對(duì)齊。 align-item .box height: 600px; background-color: lemonchiffon; display: flex; /*默認(rèn) 側(cè)軸起點(diǎn)橫向羅列*/ /*align-items: flex-start;*/ /*側(cè)軸盡頭橫向羅列*/ /*align-items: flex-end;*/

10、/*側(cè)軸盡頭橫向羅列*/ /*align-items: center;*/ align-items: baseline; .box div width: 100px; height: 100px; background-color: lightsalmon; text-align: center; line-height: 100px; font-weight: bold; margin:10px; 1 2 3 4 align-content 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊(行與行的對(duì)其方式). 相關(guān)屬性： flex-

11、start： 沒(méi)有行間距 flex-end： 底對(duì)齊沒(méi)有行間距 center ：居中沒(méi)有行間距 space-between：兩端對(duì)齊，中間自動(dòng)分配 space-around：自動(dòng)分配距離 請(qǐng)注重本屬性在惟獨(dú)一行的伸縮容器上沒(méi)有效果。 align-content nav height: 600px; background-color: lemonchiffon; display: flex; /*開啟多行*/ flex-wrap: wrap; /*側(cè)軸起點(diǎn)上下兩行對(duì)齊，沒(méi)有行間距*/ /*align-content: flex-start;*/ /*側(cè)軸盡頭上下兩行對(duì)齊，沒(méi)有行間距，第一行依舊在

12、上*/ /*align-content: flex-end;*/ /*側(cè)軸盡頭對(duì)齊，第一行依舊在上，沒(méi)有行間距*/ /*align-content:center;*/ /*兩端對(duì)齊，中間自動(dòng)分配*/ /*align-content: space-between;*/ /*自動(dòng)分配距離*/ align-content:space-around; nav div width: 100px; height: 100px; background-color: lightcoral; margin:10px; 1 2 3 4 5 6 7 8 9 10 11 12 13 justify-content 設(shè)

13、置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式 相關(guān)屬性： flex-star：t默認(rèn)，頂端對(duì)齊 flex-end：末端對(duì)齊 center：居中對(duì)齊 space-between：兩端對(duì)齊，中間自動(dòng)分配 space-around：自動(dòng)分配距離 justify-content nav height: 600px; background-color: lightgoldenrodyellow; display: flex; /*justify-content: flex-start;*/ /*主軸對(duì)齊，貼右 1234*/ /*justify-content: flex-end;*/ /*主軸對(duì)齊，居中

14、*/ /*justify-content: center;*/ /*兩端對(duì)齊，中間自動(dòng)分配*/ /*justify-content: space-between;*/ /*自動(dòng)分配距離*/ justify-content: space-around; nav div width: 100px; height: 100px; background-color: lightblue; margin:10px; 1 2 3 4 5 6 彈性子元素屬性 order 設(shè)置彈性盒子的子元素羅列挨次。 number排序優(yōu)先級(jí)，數(shù)字越大越往后排，默認(rèn)為0，支持負(fù)數(shù)。 flex-grow 設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。 屬性值:int