弹性盒布局-----指定水平方向与垂直方向上的对齐方式

最新推荐文章于 2025-07-07 14:25:26 发布

原创最新推荐文章于 2025-07-07 14:25:26 发布 · 1.8w 阅读

3 ·

CC 4.0 BY-SA版权

Html/Css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了弹性盒布局中的关键术语，并详细解释了justify-content和align-items属性的作用方式，帮助读者掌握CSS弹性盒布局的核心技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先介绍弹性盒布局中的一些术语的意思

main-axis：进行布局时作为布局基准的轴，在横向布局时为水平轴，在纵向布局时为垂直轴

main-start/main-end：进行布局时的起点和终点。在横向布局时为容器的左端和右端，在纵向布局时为容器的顶端和底端。

cross-axis：与main-axis垂直相交的轴，在横向布局时为垂直轴，在纵向布局时为水平轴。

cross-start/cross-end：cross-axis的起点和终点。在横向布局时为容器的顶端和底端，在纵向布局时为容器的左端和右端。

将flex-wrap属性值指定为wrap且进行横向多行布局时，按从cross-start到cross-end方向，即从上往下布局。

将flex-wrap属性值指定为wrap-reverse且进行横向多行布局时，按从cross-end到cross-start方向，即从下往上布局。

justify-content属性(针对main-axis轴）

1、指定如何布局容器中除了子元素之外的main-axis轴（横向布局时，main-axis轴方向为水平方向，纵向布局时main-axis轴方向为垂直方向）方向上的剩余空白部分。

2、当flex-grow属性值不为0时，各子元素在main-axis轴方向自动填满容器，所以justify-content属性值无效

justify-content属性值如下：

flex-start：从main-start开始布局所有子元素（默认值）

flex-start：从main-end开始布局所有子元素

center：居中布局所有子元素

space-between：将第一个元素布局在main-start处，将最后一个元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间

space-around：将空白部分平均分配在以下几处，如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间

justify-content的不同属性值所产生的不同效果如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="urf-8">
	<title>mao bo li</title>
	<style>
		#container{
			display:flex;
			flex-direction:row;
			justify-content:flex-start;
			
			border:solid 5px blue;
			width:600px;
			height:50px;
		}
		#text-a{
			background-color:orange;
			width:100px;
		}
		#text-b{
			background-color:yellow;
			width:150px;
		}
		#text-c{
			background-color:limegreen;
			width:200px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="text-a">示例文字A</div>
		<div id="text-b">示例文字B</div>
		<div id="text-c">示例文字C</div>
	</div>
</body>
</html>

1、属性值为flex-start

2、属性值为flex-end

3、属性值为center

4、属性值为space-between

5、属性值为space-around

align-items属性(针对cross-axis轴）

指定如何布局容器中除了子元素之外的cross-axis轴（横向布局时，cross-axis轴方向为水平方向，纵向布局时cross-axis轴方向为垂直方向）方向上的剩余空白部分。

align-items属性值如下：

flex-start：从cross-start开始布局所有子元素（默认值）

flex-start：从cross-end开始布局所有子元素

center：居中布局所有子元素

space-between：