站長資訊網彈性盒子模型
布局方案
傳統(tǒng)的布局方案大多采用div+css+float+position+display來實現，但是隨著css3中彈性盒子模型的推出，在前端布局方案中就又多出了一項彪悍的選項。
而因為最近在研究小程序，發(fā)現中間使用彈性盒子布局效果更好效率更高一點，所以就將之前學習彈性盒模型的相關知識點整理出來，給大家分享。
彈性盒模型flex布局介紹
彈性盒模型(flexbox)又稱為彈性布局，是css3中新提出的一種布局方式，通過彈性布局，可以讓子元素自動調整寬度和高度，從而達到很好的填充任何不同屏幕大小的顯示設備的顯示空間。
彈性盒模型與之前的布局方式是完全不同的兩種，雖然依然采用div+css的方式，但是卻將之前使用的浮動給替換成了彈性布局。從而使頁面元素布局方式更加的簡單。
不同于我們后面所學習的網格系統(tǒng)，彈性布局更加適用于應用組件以及小比例布局。
在之前,flex經歷了三次迭代，每一次迭代都產生了不同的語法，目前我們學習遵循最終版本的語法。因為之前版本在使用的時候需要考慮兼容問題，而最新版本，所有的瀏覽器都支持無前綴的終極規(guī)范。
彈性盒子模型認知
flex布局方式是一個完整的布局模塊，而不是只某個屬性。flex的布局主要依靠父容器和元素組成。
父容器稱之為flex container(flex容器) 而其子元素稱之為flex item(flex元素)。
而整個flex布局的核心在于 對其方式、排布和順序。
彈性盒子模型的使用
想要使用flex布局，首先要使用display:flex 或者 display:inline-flex來設置父容器。
display:flex 給父元素設置完成后，那么整個父元素會變成彈性容器，但是是一個塊級元素。
display:inline-flex給父元素設置完成后，那么整個父元素會變成彈性容器，但是是一個行內塊級元素，有些類似于inline-block的效果。
當父容器設置了這個屬性之后，里面的子元素默認的全部變成flex item (flex元素)
Tip:flex布局與我們之前所學習的布局方式是屬于另外一套布局方案，所以在使用了flex布局之后，如Block”，“inline”，“float” 和 “text-align” 等一些屬性會失效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container-flex { width: 600px; border:1px solid #ccc; display:flex; } .container-inline { width: 600px; border:1px solid #ccc; display:inline-flex; } .container-flex div { width: 200px; height: 200px; background-color: orange; } .container-inline div { width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div class="container-flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="container-flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="container-inline"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="container-inline"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
執(zhí)行的效果如下：
必備名詞解釋
在使用彈性盒子模型之前，需要了解一些彈性盒模型的基礎概念名詞。
main axis 主軸
cross axis 交叉軸/側軸 與主軸垂直
main start 主軸起點邊
main end 主軸終點邊
cross start 交叉軸起點邊
cross end 交叉軸終點邊
為什么使用彈性盒子模型
彈性盒子模型在開發(fā)手機端的時候使用頻率較高，在微信小程序開發(fā)的時候也是使用頻率非常高的技術，可以通過幾個實例來看一下彈性盒子的好處：
實例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*啟用flex布局*/ background-color: pink; } .square { width: 200px; height: 200px; background-color: orange; } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } </style> </head> <body> <div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div> </div> </body> </html>
代碼結果如下：
在上述實例中需要注意的點：
① 啟用flex布局 display:flex
② 父元素的子元素在父元素設置了display:flex之后，子元素會自動的變?yōu)閺椥院凶拥淖釉兀?br />被稱為flex items
③ 默認情況，所有的 flex-item 會按照 flex 容器的頂部和左側對齊。
實例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*啟用flex布局*/ background-color: pink; justify-content:flex-start;/*默認*/ justify-content:flex-end;/*在主軸的末端對其*/ justify-content:center;/*在主軸的中間對其*/ justify-content:space-between;/*在整個主軸中平均分配空間，無論其中有多少個元素*/ justify-content:space-around;/*Flex-item 默認會被均勻的分布，但是每一個 都會在其給定的空間內居中顯示。*/ align-items:center;/*讓items在垂直方向上居中*/ } .square { width: 200px; height: 200px; background-color: orange; } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } </style> </head> <body> <div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div> </div> </body> </html>
代碼效果如下：
我們可以通過非常簡單的屬性設置來調整對其方式，例如：
justify-content: flex-start / flex-end /center /space-between /space-around
我們也可以通過align-items:center 屬性讓 items 在垂直方向居中。
實例3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*啟用flex布局*/ background-color: pink; justify-content:flex-start;/*默認*/ justify-content:flex-end;/*在主軸的末端對其*/ justify-content:center;/*在主軸的中間對其*/ justify-content:space-between;/*在整個主軸中平均分配空間，無論其中有多少個元素*/ justify-content:space-around;/*Flex-item 默認會被均勻的分布，但是每一個 都會在其給定的空間內居中顯示。*/ align-items:center;/*讓items在垂直方向上居中*/ } .square { width: 200px; height: 200px; background-color: orange; order: -1; /*讓正方形顯示在第一位而不是中間*/ } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } </style> </head> <body> <div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div> </div> </body> </html>
實例3 和 實例2 大體相似，但是在.square類里存在一句order:-1，可以更改元素的渲染順序。這個是彈性盒模型中一個非常厲害的一個方面。
實例3代碼效果如下：
flex布局方式屬性
在flex整個體系當中，大體上可以分為兩類，一類是給父容器設置的屬性，一類是給父容器中子元素設置的屬性。
彈性容器屬性 — 給父元素設置的屬性
1.flex-direction 定義內部元素如何在flex容器中布局，定義了主軸的方向(是正是反)。
語法：
row | row-reverse | column | column-reverse
row 默認值，子元素會排列在一行 從主軸左側開始
row-reverse 子元素會排列在一行。不過是從右側開始
column 子元素垂直顯示，從側軸起始點開始
column-reverse 垂直顯示，不過從結束點開始
實例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { width: 100%; height: 500px; border:1px solid #ccc; display:flex; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; } .container div { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
2.flex-wrap 控制容器內的子元素是被強制放在一行中或者是被放在多個行上 。如果允許換行，這個屬性允許你控制行的堆疊方向。
語法：
nowrap | wrap | wrap-reverse
nowrap 所有的元素被擺在一行 默認值
wrap 當一行元素過多，則允許元素 換行
wrap-reverse 將側軸起點和終點顛倒
實例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { width: 600px; height: 500px; border:1px solid #ccc; display:flex; flex-wrap:wrap; flex-wrap:wrap-reverse; } .container div { width: 200px; height: 100px; background-color: orange; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> </body> </html>
3.justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性（flex）元素之間及其周圍的空間。
語法：
flex-start | flex-end | center | space-between | space-around
flex-start : 從行首開始排列。每行第一個彈性元素與行首對齊，同時所有后續(xù)的彈性元素與前一個對齊。默認
flex-end : 從行尾開始排列。每行最后一個彈性元素與行尾對齊，其他元素將與后一個對齊
center : 伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同
space-between : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首 對齊，每行最后一個元素與行尾對齊。
space-around : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。
實例代碼:
參考上面的實例2.
4.align-items 屬性以與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊。
語法：
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 對齊到側軸起點
align-items: flex-end; 對齊到側軸終點
align-items: center; 在側軸上居中
align-items: baseline; 與基準線對齊
align-items: stretch; 拉伸元素以適應 默認值
實例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*啟用flex布局*/ background-color: pink; justify-content:space-around; align-items:baseline;/*與基準線對齊*/ } .square { width: 200px; height: 200px; background-color: orange; } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } .container { width: 500px; height: 600px; border:1px solid #ccc; display:flex; align-items: stretch; } .container div { width: 100px; background-color:red; border:1px solid green; } </style> </head> <body> <div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div> </div> <!-- <div class="container"> <div>1</div> <div>2</div> </div> --> </body> </html>
5.align-content 多行對其方式，如果只有一行，則失效。
語法：
flex-start | flex-end | center | space-between | space-around | stretch
flex-start : 與交叉軸的起點對其
flex-end : 與交叉軸的終點對其
center : 與交叉軸的中點對其
space-between : 與交叉軸兩端對其，軸線之間的間隔平均分布
space-around: 所有行在容器中平均分布，相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最后一行的距離是相鄰兩行間距的一半。
stretch ：拉伸所有行來填滿剩余空間。剩余空間平均的分配給每一行
實例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { width: 600px; height: 900px; border:1px solid #ccc; display:flex; flex-wrap:wrap; align-content:flex-start; align-content:flex-end; align-content:center; align-content:space-between; align-content:space-around; align-content:stretch; /*默認*/ } .container div { width: 200px; height: 80px; background-color: orange; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> </body> </html>
彈性元素屬性 — 給子元素設置的屬性
order order屬性規(guī)定了彈性容器中的可伸縮項目在布局時的順序。元素按照order屬性的值的增序進行布局。擁有相同order屬性值的元素按照它們在源代碼中出現的順序進行布局。
語法：
order:
align-self 定義flex子項單獨在側軸（縱軸）方向上的對齊方式
語法：
stretch|center|flex-start|flex-end|baseline
flex-grow 定義彈性盒子元素擴展比率
flex-shrink 定義彈性盒子元素的收縮比率
flex-basis 指定了flex item在主軸方向上的初始大小。如果不使用box-sizing來
改變盒模型的話，那么這個屬性就決定了flex item的內容盒content-box）的寬 或者高（取決于主軸的方向）的尺寸大小。
Tip:需要注意的是，在上面的最后的flex-grow、flex-shrink、flex-basis 三個屬性最好相互搭配使用。
實例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex; } #main div { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } #main div:nth-of-type(2) { flex-shrink: 3; } </style> </head> <body> <div id="main"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:khaki;"></div> <div style="background-color:pink;"></div> <div style="background-color:lightgrey;"></div> </div> </body> </html>
ok，上面大概就是一些常用的彈性盒子模型flex-box常用的屬性，上面的實例很多只是給了代碼，沒有給效果圖，是因為希望正在學習彈性盒子模型的同志們最好把代碼實際的敲一下，并且親自嘗試不同的屬性值，來分析不同屬性帶來的不同的效果。
彈性盒子模型難度不大，但是卻與傳統(tǒng)的布局方案有很大的差別。
