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>
效果图：
窗口大小依次减小