flex布局父元素属性之 align-items 子元素在侧轴上的排列方式（单项子元素）

最新推荐文章于 2023-07-05 16:09:32 发布

小小小竹子

最新推荐文章于 2023-07-05 16:09:32 发布

阅读量1.3k

点赞数

分类专栏：移动端布局 flex布局初学者的成长日记文章标签： css html css3 flex 前端

本文链接：https://blog.csdn.net/qq_42524153/article/details/104363983

版权

初学者的成长日记同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

移动端布局

10 篇文章 0 订阅

订阅专栏

flex布局

10 篇文章 0 订阅

订阅专栏

align-items

align-items ：设置子元素在侧轴上（默认侧轴为y轴）的排列方式

align-items的属性值：

属性值	含义
flex-start	子元素贴着侧轴的头部排列（默认值）
flex-end	子元素贴着侧轴的尾部排列
center	子元素在侧轴上居中对齐
stretch	拉伸，使得子元素在侧轴方向上与父元素等大

具体实例（以侧轴为y轴为列）：

flex-start

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				align-items: flex-start;	/*默认值*/
			}
			div span{
				width: 200px;
				height: 100px;
				background: skyblue;
			}
	</style>

执行结果：子元素贴着侧轴的头部排列（顶端对齐）
在这里插入图片描述

flex-end

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				align-items: flex-end;	
			}
			div span{
				width: 200px;
				height: 100px;
				background: skyblue;
			}
	</style>

执行结果：子元素贴着侧轴的尾部排列（底端对齐）
在这里插入图片描述

center

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				align-items: center;	
			}
			div span{
				width: 200px;
				height: 100px;
				background: skyblue;
			}
	</style>

执行结果：子元素在侧轴上居中对齐
在这里插入图片描述

stretch

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				align-items: stretch;	
			}
			div span{
				width: 200px;
				/*height: 100px;*/	
				background: skyblue;
			}
	</style>

执行结果：子元素沿着侧轴（y轴）方向拉伸，使得子元素与父元素等高
在这里插入图片描述
值得一提的是：在使用stretch属性值时，不要给子元素高度/宽度（侧轴为y轴时不给高度，侧轴为x轴时不给宽度），否则在侧轴方向上将没有拉伸效果

如：

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				align-items: stretch;	
			}
			div span{
				width: 200px;
				height: 100px;
				background: skyblue;
			}
	</style>

执行结果：因为给子元素span设置了高度为100px，故在侧轴上实现不了拉伸效果
在这里插入图片描述

下面来看侧轴为x轴的情况：

flex-start

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-direction: column;
				align-items: flex-start;	/*默认值 可不写*/
			}
			div span{
				width: 200px;
				height: 100px;
				background: skyblue;
			}
	</style>

执行结果：子元素贴着侧轴的头部排列（左端对齐）
在这里插入图片描述

flex-end

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-direction: column;
				align-items: flex-end;	
			}
			div span{
				width: 200px;
				height: 100px;
				background: skyblue;
			}
	</style>

执行结果：子元素贴着侧轴的尾部排列（右端对齐）
在这里插入图片描述

center

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-direction: column;
				align-items: center;	
			}
			div span{
				width: 200px;
				height: 100px;
				background: skyblue;
			}
	</style>

执行结果：子元素在侧轴上居中对齐
在这里插入图片描述

stretch

	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
	<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-direction: column;
				align-items: stretch;	
			}
			div span{
				/*width: 200px; 	不给子元素宽度*/
				height: 100px;	
				background: skyblue;
			}
	</style>

执行结果：子元素沿着侧轴方向拉伸，使得子元素与父元素等宽
在这里插入图片描述
注意：align-items属性只应用于侧轴上的子元素是单项（单行或单列）的情况，如果出现子元素有多项（换行或换列）的情况，即flex-wrap：wrap；，则不能使用align-items，而要使用align-content属性，该属性的解释放在下一篇博客。