前端课程——弹性盒子模型
- 2020 年 4 月 9 日
- 笔记
弹性盒子模型
什么是弹性盒子模型
CSS3 新增了弹性盒子模型（Flexible Box 或 FlexBox），是一种新的用于在 HTML 页面实现布局的方式。使得当 HTML 页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。
弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。
弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。
- 伸缩容器（flex container）：包裹伸缩项目的父元素。
- 伸缩项目（flex item）：伸缩容器的每个子元素。
- 轴（axis）：每个弹性盒子模型拥有两个轴。
- 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。
- 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。
- 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。
- 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。
- 对应主轴的称为主轴尺寸。
- 对应侧轴的称为侧轴尺寸。
弹性盒子模型的属性
定义弹性盒子模型
display : flex; display : inline-flex;
-
flex：设置指定元素为块级元素的弹性盒子模型。 -
inline-flex：设置指定元素为行内块级元素的弹性盒子模型。
同样的，此属性存在浏览器兼容问题：
display : -webkit-flex; display: -ms-flex; display: -moz-flex; display: -o-flex;
flex-direction属性
flex-direction 属性适用于伸缩容器元素，用于创建主轴的方向。
flex-direction: row | row-reverse | column | column-reverse
-
row：设置主轴是水平方向。 -
row-reverse：与 row 的排列方向相反。 -
column：设置主轴是垂直方向。 -
column-reverse：与 column 的排列方向相反。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>弹性盒子模型</title> <style> .container { width: 600px; border: 1px solid lightgray; /* 将当前元素设置为弹性盒子模型的伸缩容器 */ display: flex; /* flex-direction设置主轴的方向 */ /* row:默认值 表示水平方向 column：表示垂直方向 */ flex-direction: row; } .container div { width: 120px; height: 300px; } </style> </head> <body> <div class="container"> <div style="background-color:lightgray ;"></div> <div style="background-color: lightgreen ;"></div> <div style="background-color: lightpink ;"></div> <div style="background-color:lightsalmon ;"></div> <div style="background-color:lightskyblue ;"></div> </div> </body> </html>
在线演示地址：https://gethtml.cn/project/2020/03/29/1.html
justify-content属性
CSS justify-content 属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。
justify-content: center | flex-start | flex-end | space-between | space-around
-
center：伸缩项目向第一行的中间位置对齐。 -
flex-start：伸缩项目向第一行的开始位置对齐。 -
flex-end：伸缩项目向第一行的结束位置对齐。 -
space-between：伸缩项目会平均分布在一行中。 -
space-around：伸缩项目会平均分布在一行中，两端保留一半的空间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性盒子模型</title> <style> .container{ width: 600px; border: 1px solid lightgray; /* 将当前元素设置为弹性盒子模型的伸缩容器 */ display: flex; /* justify-content属性表示项目得对其方式 */ justify-content: center; } .container div{ width: 100px; height: 300px; } </style> </head> <body> <div class="container"> <div style="background-color:lightgray ;"></div> <div style="background-color: lightgreen ;"></div> <div style="background-color: lightpink ;"></div> <div style="background-color:lightsalmon ;"></div> <div style="background-color:lightskyblue ;"></div> </div> </body> </html>
在线演示地址：https://gethtml.cn/project/2020/03/29/justify-content.html
align-items属性
CSS align-items 属性适用于伸缩容器元素，用于设置伸缩项目所在行沿着侧轴线的对齐方式。
align-items: center | flex-start | flex-end | baseline | stretch
- center：伸缩项目向侧轴的中间位置对齐。
- flex-start：伸缩项目向侧轴的起点位置对齐。
- flex-end：伸缩项目向侧轴的终点位置对齐。
- baseline：伸缩项目根据伸缩项目的基线对齐。
- stretch：默认值，伸缩项目拉伸填充整个伸缩容器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>弹性盒子模型</title> <style> .container { width: 600px; height: 300px; border: 1px solid lightgray; /* 将当前元素设置为弹性盒子模型的伸缩容器 */ display: flex; /* justify-content属性表示项目在主轴的对其方式 */ justify-content: space-between; /* 设置侧轴的对其方式 */ align-items: center; } .container div { width: 100px; height: 150px; } </style> </head> <body> <div class="container"> <div style="background-color:lightgray ;"></div> <div style="background-color: lightgreen ;"></div> <div style="background-color: lightpink ;"></div> <div style="background-color:lightsalmon ;"></div> <div style="background-color:lightskyblue ;"></div> </div> </body> </html>
在线演示地址：https://gethtml.cn/project/2020/03/29/align-items.html
flex-wrap属性
CSS flex-wrap 属性适用于伸缩容器元素，用于设置伸缩容器的子元素是单行显示还是多行显示。
flex-wrap: nowrap | wrap | wrap-reverse
-
nowrap：设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器。 -
wrap：设置伸缩项目多行显示。 -
wrap-reverse：与 wrap 相反。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>弹性盒子模型</title> <style> .container { width: 600px; height: 300px; border: 1px solid lightgray; /* 将当前元素设置为弹性盒子模型的伸缩容器 */ display: flex; /* justify-content属性表示项目在主轴的对其方式 */ justify-content: space-between; /* 设置侧轴的对其方式 */ align-items: center; /* 设置伸缩项目是单行显示还是多行显示 */ flex-wrap: wrap; } .container div { width: 100px; height: 150px; margin-right: 20px; } </style> </head> <body> <div class="container"> <div style="background-color:lightgray ;"></div> <div style="background-color: lightgreen ;"></div> <div style="background-color: lightpink ;"></div> <div style="background-color:lightsalmon ;"></div> <div style="background-color:lightskyblue ;"></div> <div style="background-color:deeppink ;"></div> <div style="background-color:lightyellow ;"></div> </div> </body> </html>
在线演示地址：https://gethtml.cn/project/2020/03/29/flex-warp.html
align-content属性
CSS align-content 属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改 flex-wrap 属性的效果。
align-content: center | flex-start | flex-end | space-between | space-around | stretch
- center：各行向伸缩容器的中间位置对齐。
- flex-start：各行向伸缩容器的起点位置对齐。
- flex-end：各行向伸缩容器的终点位置对齐。
- space-between：各行会平均分布在一行中。
- space-around：各行会平均分布在一行中，两端保留一半的空间。
- stretch：默认值，各行将会伸展以占用额外的空间。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>弹性盒子模型</title> <style> .container { width: 600px; height: 500px; border: 1px solid lightgray; /* 将当前元素设置为弹性盒子模型的伸缩容器 */ display: flex; /* justify-content属性表示项目在主轴的对其方式 */ justify-content: space-between; /* 设置侧轴的对其方式 */ align-items: center; /* 设置伸缩项目是单行显示还是多行显示 */ flex-wrap: wrap; /* align-content属性设置伸缩项目所在行的对齐方式 */ align-content: center; } .container div { width: 120px; height: 150px; } </style> </head> <body> <div class="container"> <div style="background-color:lightgray ;"></div> <div style="background-color: lightgreen ;"></div> <div style="background-color: lightpink ;"></div> <div style="background-color:lightsalmon ;"></div> <div style="background-color:lightskyblue ;"></div> <div style="background-color:deeppink ;"></div> <div style="background-color:lightyellow ;"></div> </div> </body> </html>
在线演示地址：https://gethtml.cn/project/2020/03/29/alight-content.html
flex-flow属性
CSS flex-flow 属性适用于伸缩容器元素，该属性是 flex-direction 和 flex-wrap 的简写。
flex-flow: <'flex-direction'> || <'flex-wrap'>
flex属性
CSS flex 属性是一个简写属性，用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。
flex: auto | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
- auto：伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为“flex: 1 1 auto”。
- none：伸缩项目会根据自身的宽度和高度确定尺寸，相当于将该属性设置为“flex: 0 0 auto” 。
align-self属性
CSS align-self 属性适用于伸缩容器元素，用于设置伸缩项目自身元素在侧轴的对齐方式。
align-self: center | flex-start | flex-end | baseline | stretch
-
center：伸缩项目向侧轴的中间位置对齐。 -
flex-start：伸缩项目向侧轴的起点位置对齐。 -
flex-end：伸缩项目向侧轴的终点位置对齐。 -
baseline：伸缩项目根据伸缩项目的基线对齐。 -
stretch：默认值，伸缩项目拉伸填充整个伸缩容器。
order属性
CSS order 属性适用于伸缩项目，用于设置伸缩项目在布局时的顺序。
order: <integer>
- integer：表示当前伸缩项目所在的次序。
