CSS3中的彈性盒子模型

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

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

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

4、彈性容器中子元素的羅列方式(主軸羅列方式) 屬性值： row:默認在一行羅列 row-reverse:反轉橫向羅列（右對齊，從后往前排，最后一項排在最前面。） column：縱向羅列。 column-reverse：反轉縱向羅列，從下往上排，最后一項排在最上面 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 設置彈性盒子的子元素超出父容器時是否換行 屬性值： nowrap: 默認值。規(guī)定元素不拆行或不拆列。 wrap:規(guī)定元素在須要

6、的時候拆行或拆列。 wrap-reverse:規(guī)定元素在須要的時候拆行或拆列，但是以相反的挨次。 flex-wrap .box height: 600px; background-color: lightgoldenrodyellow; display: flex; /*設置了屬性為wrap，那么一行放不下的時候會自動的去下一行*/ /*flex-wrap:wrap;*/ /*設置了屬性為wrap-reverse會讓排序發(fā)生一個反轉，雖然同樣是多行，但是會變成從下到上*/ 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 的簡寫 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 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式 相關屬性值： flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。 flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。 center：

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

10、/*側軸盡頭橫向羅列*/ /*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, 但不是設置子元素對齊，而是設置行對齊(行與行的對其方式). 相關屬性： flex-

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

12、上*/ /*align-content: flex-end;*/ /*側軸盡頭對齊，第一行依舊在上，沒有行間距*/ /*align-content:center;*/ /*兩端對齊，中間自動分配*/ /*align-content: space-between;*/ /*自動分配距離*/ 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 設

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

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