Flexbox【彈性盒子模型】
1、Flexbox背景
Flexbox佈局（彈性盒模型）模塊的目的在於提供一種更有效的方法在容器中的項之間佈局、對齊和分配空間，即便它們的大小未知或是動態的(所以使用「flex一詞)。
2、Flexbox術語
- 伸縮容器：一個設有「display:flex」或「display:inline-flex」的元素
- 伸縮項目：伸縮容器的子元素
- 主軸、主軸方向：用戶代理沿着一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。
- 主軸起點、主軸終點：伸縮項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
- 主軸長度、主軸長度屬性：伸縮項目的在主軸方向的寬度或高度就是項目的主軸長度，伸縮項目的主軸長度屬性是width或height屬性，由哪個對着主軸方向決定。
- 側軸、側軸方向：與主軸垂直的軸稱做側軸，是側軸方向的延伸。
- 側軸起點、側軸終點：填滿項目的伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
- 側軸長度、側軸長度屬性：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是「width」或「height」屬性，由哪個對着側軸方向決定。
下圖是一個row伸縮容器中各類方向與大小術語的示意圖：
上圖以及術語介紹來自於：http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hanscss
3、Flexbox屬性和示例
普通示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; margin: 10px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
效果圖：
一、display: flex：指定某元素使用 Flexbox 佈局。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
效果圖：
二、flex-grow:1;【默認爲0】
說明：容器中剩餘的空間將平均分配給全部子元素。若是其中一個子元素的值爲2，那麼剩餘的空間將會佔用兩倍於其餘元素的空間；html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; flex-grow: 1; } div:nth-child(2){ background-color: royalblue; flex-grow: 2; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
效果圖：
小窗口：ide
大窗口：佈局
三、align-self 屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。
值：
一、flex-start：頂邊對齊，高度不拉伸
二、flex-end ：底邊對齊，高度不拉伸
三、center ：居中，高度不拉伸
四、stretch ：默認值，高度自動拉伸
使用flex-start:頂部對齊，高度不拉伸
效果圖：
使用flex-end:底邊對齊，高度不拉伸
效果圖：
使用cente:居中，高度不拉伸
效果圖：
四、align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
效果和 align-self 同樣，只是這個是寫在父元素上的：flex
例：flexbox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; align-items:center; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; } div:nth-child(2){ background-color: royalblue; height: 200px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
效果圖：spa
五、flex-direction 屬性規定靈活項目的方向
值：
一、row(默認) :從左到右;
二、row-reverse :是從右到左
三、column :從上到下
四、column-reverse:從下到上
row :從左到右
效果圖：3d
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; flex-direction:row-reverse; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; } </style> </head> <body> <div>A</div> <div>B</div> <div>C</div> </body> </html>
效果圖：代理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; flex-direction:column; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; } </style> </head> <body> <div>A</div> <div>B</div> <div>C</div> </body> </html>
效果圖：code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; flex-direction:column-reverse; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; text-align: center; line-height: 100px; font-size: 50px; } </style> </head> <body> <div>A</div> <div>B</div> <div>C</div> </body> </html>
效果圖：
六、flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
值：
一、nowrap（默認）：全部flex item將在一條線上
二、wrap ：flex item將會從上到下分爲多行
三、wrap-reverse ：flex item將會從下到上分爲多行
nowrap：全部flex item將在一條線上
效果圖：
大窗口 ：
小窗口：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; flex-wrap:wrap; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
大窗口：
中窗口：
小窗口：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; flex-wrap:wrap-reverse; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
大窗口：
中窗口：
小窗口：
爲了頁面更美觀，咱們能夠把flex-grow和flex-wrap一塊兒使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexbox佈局</title> <style type="text/css"> body{ display: flex; background-color: rosybrown; flex-wrap:wrap; } div{ width: 100px; height: 100px; background-color: red; margin: 10px; flex-grow: 1; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
效果圖：
窗口大小依次減小