弹性盒子模型

什么是弹性盒子模型

CSS3 新增了弹性盒子模型(Flexible BoxFlexBox),是一种新的用于在 HTML 页面实现布局的方式。使得当 HTML 页面适应不同尺寸的屏幕和不同的设备时,元素是可预测地运行。

弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向,内联布局侧重水平方向。

弹性盒子模型主要适用于HTML页面的组件以及小规模的布局,而并不适用于大规模的布局,否则会影响 HTML 页面性能。

  • 伸缩容器(flex container):包裹伸缩项目的父元素。

  • 伸缩项目(flex item):伸缩容器的每个子元素。

  • 轴(axis):每个弹性盒子模型拥有两个轴。

    • 主轴(main axis):伸缩项目沿其一次排列的轴被称为主轴。
    • 侧轴(cross axis):垂直于主轴的轴被称为侧轴。
  • 方向(direction):伸缩容器的主轴由主轴起点和主轴终点,侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。

  • 尺寸(dimension):根据伸缩容器的主轴和侧轴,伸缩项目的宽度和高度。

    • 对应主轴的称为主轴尺寸。
    • 对应侧轴的称为侧轴尺寸。

弹性盒子模型的属性

定义弹性盒子模型

1
2
display : flex;
display : inline-flex;
  • flex:设置指定元素为块级元素的弹性盒子模型。

  • inline-flex:设置指定元素为行内块级元素的弹性盒子模型。

同样的,此属性存在浏览器兼容问题:

1
2
3
4
display : -webkit-flex;
display: -ms-flex;
display: -moz-flex;
display: -o-flex;

flex-direction属性

flex-direction 属性适用于伸缩容器元素,用于创建主轴的方向。

1
flex-direction: row | row-reverse | column | column-reverse
  • row:设置主轴是水平方向。

  • row-reverse:与 row 的排列方向相反。

  • column:设置主轴是垂直方向。

  • column-reverse:与 column 的排列方向相反。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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 属性适用于伸缩容器元素,用于设置伸缩项目沿着主轴线的对齐方式。

1
justify-content: center | flex-start | flex-end | space-between | space-around
  • center:伸缩项目向第一行的中间位置对齐。

  • flex-start:伸缩项目向第一行的开始位置对齐。

  • flex-end:伸缩项目向第一行的结束位置对齐。

  • space-between:伸缩项目会平均分布在一行中。

  • space-around:伸缩项目会平均分布在一行中,两端保留一半的空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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 属性适用于伸缩容器元素,用于设置伸缩项目所在行沿着侧轴线的对齐方式。

1
align-items: center | flex-start | flex-end | baseline | stretch
  • center:伸缩项目向侧轴的中间位置对齐。
  • flex-start:伸缩项目向侧轴的起点位置对齐。
  • flex-end:伸缩项目向侧轴的终点位置对齐。
  • baseline:伸缩项目根据伸缩项目的基线对齐。
  • stretch:默认值,伸缩项目拉伸填充整个伸缩容器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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 属性适用于伸缩容器元素,用于设置伸缩容器的子元素是单行显示还是多行显示。

1
flex-wrap: nowrap | wrap | wrap-reverse
  • nowrap:设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器。

  • wrap:设置伸缩项目多行显示。

  • wrap-reverse:与 wrap 相反。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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 属性的效果。

1
align-content: center | flex-start | flex-end | space-between | space-around | stretch
  • center:各行向伸缩容器的中间位置对齐。

  • flex-start:各行向伸缩容器的起点位置对齐。

  • flex-end:各行向伸缩容器的终点位置对齐。

  • space-between:各行会平均分布在一行中。

  • space-around:各行会平均分布在一行中,两端保留一半的空间。

  • stretch:默认值,各行将会伸展以占用额外的空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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-directionflex-wrap 的简写。

1
flex-flow: <'flex-direction'> || <'flex-wrap'>

flex属性

CSS flex 属性是一个简写属性,用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。

1
flex: auto | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  • auto:伸缩项目会根据自身的宽度和高度确定尺寸,相当于将该属性设置为“flex: 1 1 auto”。

  • none:伸缩项目会根据自身的宽度和高度确定尺寸,相当于将该属性设置为“flex: 0 0 auto” 。

align-self属性

CSS align-self 属性适用于伸缩容器元素,用于设置伸缩项目自身元素在侧轴的对齐方式。

1
align-self: center | flex-start | flex-end | baseline | stretch
  • center:伸缩项目向侧轴的中间位置对齐。

  • flex-start:伸缩项目向侧轴的起点位置对齐。

  • flex-end:伸缩项目向侧轴的终点位置对齐。

  • baseline:伸缩项目根据伸缩项目的基线对齐。

  • stretch:默认值,伸缩项目拉伸填充整个伸缩容器。

order属性

CSS order 属性适用于伸缩项目,用于设置伸缩项目在布局时的顺序。

1
order: <integer>
  • integer:表示当前伸缩项目所在的次序。