注：一些理論知識來源於CSS3-菜鳥聯盟
彈性盒布局(Flex Box)
一、概念
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
二、兼容性
表格中的數字表示支持該屬性的第一個瀏覽器的版本號。
緊跟在數字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。
三、彈性盒子內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
3.1、flex-direction
flex-direction 屬性指定了彈性子元素在父容器中的排列方式。
flex-direction的值有:
- row：橫向從左到右排列（左對齊），默認的排列方式。
- row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。
- column：縱向排列。
- column-reverse：反轉縱向排列，從后往前排，最后一項排在最上面。
3.1.1、row
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row;/*設置排列方式*/ } #big div{ margin-left:5PX ; margin-right: 5PX; width: 100PX; height: 100PX; margin-top: 5PX; margin-bottom: 5PX; background: red; text-align: center; line-height: 100PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.1.2、row-reverse
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row-reverse; /*設置排列方式*/ } #big div{ margin-left:5PX ; margin-right: 5PX; width: 100PX; height: 100PX; margin-top: 5PX; margin-bottom: 5PX; background: red; text-align: center; line-height: 100PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.1.3、column
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:column; /*設置排列方式*/ } #big div{ margin-left:5PX ; margin-right: 5PX; width: 100PX; height: 30PX; margin-top: 5PX; margin-bottom: 5PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.1.4、column-reverse
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:column-reverse; /*設置排列方式*/ } #big div{ margin-left:5PX ; margin-right: 5PX; width: 100PX; height: 30PX; margin-top: 5PX; margin-bottom: 5PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.2、justify-content
內容對齊的方式。
- flex-start：默認值 向左對齊、不會自動填充邊距，可以自己設定邊距，當設置寬度超出容器時，填充容器。
- flex-end：向右對齊、不會自動填充邊距，可以自己設定邊距，當設置寬度超出容器時，填充容器。
- center：彈性盒子內的元素居中緊挨着填充(元素之間沒有邊距)，當設置寬度超出容器時，填充容器。
- space-between：彈性盒子內的元素平均分布在該行上，元素與盒子沒有邊距，元素與元素的邊距自動適應，當設置寬度超出容器時，填充容器。
- space-around：彈性盒子內的元素平均分布在該行上，元素與盒子邊距自動適應，元素與元素的邊距也自動適應，當設置寬度超出容器時，填充容器。
3.2.1、flex-start( 向左對齊、不會自動填充邊距，可以自己設定邊距，當設置寬度超出容器時，填充容器)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:flex-start ; /*設置對齊方式*/ } #big div{ width:40PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.2.2、flex-end(向右對齊、不會自動填充邊距，可以自己設定邊距，當設置寬度超出容器時，填充容器)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:flex-end ; /*設置對齊方式*/ } #big div{ width:40PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.2.3、center(彈性盒子內的元素居中緊挨着填充(元素之間沒有邊距)，當設置寬度超出容器時，填充容器)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:center ; /*設置對齊方式*/ } #big div{ width:40PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.2.4、space-between(彈性盒子內的元素平均分布在該行上，元素與盒子沒有邊距，元素與元素的邊距自動適應，當設置寬度超出容器時，填充容器)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:space-between ; /*設置對齊方式*/ } #big div{ width:40PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.2.5、space-around(彈性盒子內的元素平均分布在該行上，元素與盒子邊距自動適應，元素與元素的邊距也自動適應，當設置寬度超出容器時，填充容器)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:space-around ; /*設置對齊方式*/ } #big div{ width:40PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果:
3.3、align-items
align-items 設置改行在垂直方向的對齊方式
- flex-start：改行在彈性盒子的最頂部。
- flex-end：改行在彈性盒子的最低部。
- center：改行在彈性盒子的最中間。
- baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
- stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
3.3.1、flex-start(改行在彈性盒子的最頂部)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:space-between ; /*設置水平對齊方式*/ align-items:flex-start; /*設置改行垂直對齊方式*/ } #big div{ width:40PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.3.2、flex-end(改行在彈性盒子的最低部)
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:space-between ; /*設置水平對齊方式*/ align-items:flex-end; /*設置改行垂直對齊方式*/ } #big div{ width:40PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.3.3、center(改行在彈性盒子的最中間)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:space-between ; /*設置水平對齊方式*/ align-items:center; /*設置改行垂直對齊方式*/ } #big div{ width:40PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.5、flex-wrap
flex-wrap 屬性用於彈性盒子內的元素溢出時換行排列
- nowrap - 默認， 彈性容器為單行。
- wrap - 彈性盒子內的元素溢出時換行，從盒子頂部開始排列
- wrap-reverse - 彈性盒子內的元素溢出時換行，從盒子低部開始排列。
3.5.1、wrap (彈性盒子內的元素溢出時換行，從盒子頂部開始排列)
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:space-between ; /*設置水平對齊方式*/ align-items:flex-start; /*設置改行垂直對齊方式*/ flex-wrap:wrap; /*設置溢出是否換行*/ } #big div{ width:200PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.5.2、wrap-reverse ( 彈性盒子內的元素溢出時換行，從盒子低部開始排列)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:space-between ; /*設置水平對齊方式*/ align-items:flex-start; /*設置改行垂直對齊方式*/ flex-wrap:wrap-reverse; /*設置溢出是否換行*/ } #big div{ width:200PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1" title="最后">7</div> </div> </body> </html>
運行結果：
3.6、align-content
align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
stretch- 默認。各行將會伸展以占用剩余的空間。flex-start- 各行向彈性盒容器的起始位置堆疊。flex-end- 各行向彈性盒容器的結束位置堆疊。center-各行向彈性盒容器的中間位置堆疊。space-between-各行在彈性盒容器中平均分布。space-around- 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
3.6.1、flex-start (各行向彈性盒容器的起始位置堆疊)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big{ width: 500PX; height: 300PX; background: lightblue; margin: auto; display: flex; /*定義為彈性盒子*/ flex-direction:row; /*設置排列方式*/ justify-content:space-between ; /*設置水平對齊方式*/ /*align-items:flex-start; /*設置改行垂直對齊方式*/ flex-wrap:wrap; /*設置溢出是否換行*/ align-content:flex-start ; } #big div{ width:200PX; height: 30PX; background: red; text-align: center; line-height: 30PX; color: white; } </style> </head> <body> <div id="big"> <div class="div1">1</div> <div class="div1">2</div> <div class="div1">3</div> <div class="div1">4</div> <div class="div1">5</div> <div class="div1">6</div> <div class="div1">7</div> <div class="div1" title="最后">8</div> </div> </body> </html>
運行結果：
3.6.2、flex-end (各行向彈性盒容器的結束位置堆疊)
示例:
示例與3.6.1一樣 只是align-content 屬性變化了
運行結果：
3.6.3、center(各行向彈性盒容器的中間位置堆疊)
示例:
示例與3.6.1一樣 只是align-content 屬性變化了
運行結果：
3.6.4、space-between(各行在彈性盒容器中平均分布)
示例:
示例與3.6.1一樣 只是align-content 屬性變化了
運行結果：
3.6.5、space-around(各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半)
示例:
示例與3.6.1一樣 只是align-content 屬性變化了
運行結果：
四、彈性盒子常用屬性歸納
