如何让flex中的两个元素的高度保持一致

发布日期: 2024-06-20

FontSize: 【小中大】

一个元素下面有两个元素左右排列，如果让这两个元素的高度保持一致，当然，最简单的方法就是设置这两个元素的高度，让高度一致，这个不需要讨论，这里要讨论的，是弹性布局，不确定元素的高度时，让两个元素的高度保持一致。

align-items: stretch样式

align-items: stretch; 是一个 CSS 属性值，用于设置flex容器中的子元素在交叉轴（cross axis）上的对齐方式。当您将align-items属性设置为stretch时，子元素将在交叉轴上拉伸以填充容器的高度（对于垂直布局）或宽度（对于水平布局）。

属性值	说明
flex-start	子元素沿交叉轴的起始边缘对齐。
flex-end	子元素沿交叉轴的结束边缘对齐。
center	子元素沿交叉轴的中心对齐。
baseline	子元素根据其基线对齐。
stretch	子元素在交叉轴上拉伸以填充容器的高度（对于垂直布局）或宽度（对于水平布局）。

让两个元素的高度保持一致

在线示例：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
	display: flex;
	align-items: stretch;
	height: 200px;
	border: 1px solid black;
	padding: 0.5em;
}
.flex-item {
	flex: 1;
}
.flex-item:first-child {
	background: #35AA53;
}
.flex-item:nth-child(2) {
	background: #FD7E14;
}
</style>
</head>
<body>
<div class="flex-container">
	<div class="flex-item">Item 1</div>
	<div class="flex-item">Item 2</div>
</div>
</body>
</html>

父元素需要设置，display属性值为flex，align-items属性值为stretch，子元素在交叉轴上拉伸以填充容器的高度。