Article directory
- 1. Set the arrangement method of multi-line sub-elements on the side axis: align-content style description
- 2. Code example
-
- 1. Code example - side axis multi-line elements are arranged from top to bottom
- 2. Code example - vertical centering of multi-line elements on the side axis
- 3. Code example - multi-line elements on the side axis equally divide the remaining space
- 4. Code example - multi-line elements on the side axis / the upper and lower lines are close to the top and bottom / the rest of the elements divide the remaining space equally
- 5. Code example - multi-line elements on the side axis automatically stretch to equalize the height of the parent element
1. Set the arrangement method of multi-line sub-elements on the side axis: align-content style description
1. Import of align-content style
The style introduced in the previous blog [Mobile Web Page Layout] flex elastic layout ⑤ (Setting the arrangement of side-axis single-line child elements | align-items style description | code example)align-items can only set the arrangement of side-axis single-line child elements, if the side If the axis is arranged in multiple rows, you need to use align-contentthe style to set it;
If there are two lines of elements in the vertical direction, the first line is close to the top, and the second line is close to the bottom, this setting can be set using align-contentthe style ;
There is only one line of elements in the side axis, and the setting align-contentstyle is invalid;
Prerequisites for using this setting: ① The flex elastic layout is set, ② The automatic line wrapping property is set;
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
2. align-content style attribute value
align-content style attribute value: the following cases are all cases where the default direction of the side axis is from top to bottom;
flex-start, the default value, the elements in the side axis are arranged from top to bottom; (the default direction of the side axis is from top to bottom)flex-end, the elements in the cross-axis are arranged from bottom to top;center, the multi-line element is center-aligned on the cross axis, displayed in the middle;space-around, the multi-line element is in the cross axis, dividing the remaining space equally;space-between, for multi-line elements, the upper and lower lines are first attached to the top and bottom, and the rest of the elements divide the remaining space equally;stretch, the height of multi-line elements is automatically stretched, and the height of the parent element is equally divided;- Note: the height cannot be set, after setting the height, the setting is invalid;
2. Code example
1. Code example - side axis multi-line elements are arranged from top to bottom
Set the default arrangement of cross-axis multi-line elements, as a reference;
Core code example:
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: flex-start;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局</title>
<style>
div {
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: flex-start;
/* 布局宽度 500 像素 */
width: 500px;
/* 布局高度 500 像素 */
height: 500px;
/* 设置背景颜色 */
background-color: pink;
}
div span {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
</body>
</html>
Display of results :
2. Code example - vertical centering of multi-line elements on the side axis
Core code example:
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: center;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局</title>
<style>
div {
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: center;
/* 布局宽度 500 像素 */
width: 500px;
/* 布局高度 500 像素 */
height: 500px;
/* 设置背景颜色 */
background-color: pink;
}
div span {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
</body>
</html>
Display of results :
3. Code example - multi-line elements on the side axis equally divide the remaining space
space-around, the multi-line element is in the cross axis, dividing the remaining space equally;
Core code example:
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: space-around;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局</title>
<style>
div {
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: space-around;
/* 布局宽度 500 像素 */
width: 500px;
/* 布局高度 500 像素 */
height: 500px;
/* 设置背景颜色 */
background-color: pink;
}
div span {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
</body>
</html>
Display of results :
4. Code example - multi-line elements on the side axis / the upper and lower lines are close to the top and bottom / the rest of the elements divide the remaining space equally
space-between, for multi-line elements, the upper and lower lines are first attached to the top and bottom, and the rest of the elements divide the remaining space equally;
Core code example:
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: space-between;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局</title>
<style>
div {
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: space-between;
/* 布局宽度 500 像素 */
width: 500px;
/* 布局高度 500 像素 */
height: 500px;
/* 设置背景颜色 */
background-color: pink;
}
div span {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
</body>
</html>
Display of results :
5. Code example - multi-line elements on the side axis automatically stretch to equalize the height of the parent element
stretch, the height of multi-line elements is automatically stretched, and the height of the parent element is equally divided;
Note: the height cannot be set, after setting the height, the setting is invalid;
Core code example:
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: stretch;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局</title>
<style>
div {
/* 将展示样式设置为 flex 即可启用弹性布局 */
display: flex;
/* 设置自动换行 */
flex-wrap: wrap;
/* 主轴水平居中 */
justify-content: center;
/* 设置侧轴多行元素对齐 */
align-content: stretch;
/* 布局宽度 500 像素 */
width: 500px;
/* 布局高度 500 像素 */
height: 500px;
/* 设置背景颜色 */
background-color: pink;
}
div span {
width: 100px;
/* height: 100px; */
background-color: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
</body>
</html>
Display of results :
