css实现不等高块状元素盒子按照高度自适应（最高的盒子）

本文链接：https://blog.csdn.net/qq_37759901/article/details/132694829

文章介绍了如何使用CSSFlex布局控制boxItem元素的高度，实现当不指定高度时，同行块状元素根据最高盒子自适应保持一致高度。通过`display:flex`和计算宽度和间距，确保元素在100%宽度下对齐整齐。

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

1.boxItem g给盒子高度33%，整行自动缩放高度在这里插入图片描述
2.不给boxItem 高度，同行不等高块状元素按照最高的盒子自适应内容动态来保持高度一致

<template>
	<div class='allBox'>

		<div class="boxItem">
			<div class="smallBox">
				第一个块
				<div class="p">下边</div>
			</div>
			<div class="smallBox">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块
				第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个
				第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个
				第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个
			</div>
			<div class="smallBox">第三个块</div>
		</div>
		<div class="boxItem">
			<div class="smallBox">
				第一个块
				<div class="p">下边</div>
			</div>
			<div class="smallBox">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块</div>
			<div class="smallBox">第三个块</div>
		</div>
		<div class="boxItem">
			<div class="smallBox">
				第一个块
				<div class="p">下边</div>
			</div>
			<div class="smallBox">第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块第二个块</div>
			<!-- <div class="smallBox">第三个块</div> -->
		</div>
	</div>
</template>
<style>
	.boxItem {
		/* display: -webkit-box;和display: flex;两种方法效果一样，使用一个即可/* justify-content: flex-start; 这个方法可用可不用，看项目需求是居中对其，两端对其还是其他对其*/
		/* display: -webkit-box; */
		display: flex;
		width: 100%;
		border: 1px solid;
		/* 去掉高度就是自动实现同行不等高块状元素按照最高的盒子自适应内容动态来保持高度一致 */
		height: 33%;
	}
	.smallBox {
		border: #55ff00 1px solid;
		width: 31%;
		margin: 1% 1%;
		/* 注意:这个宽度和这个间距是需要计算的,刚好等于100%才能完全对整齐 比如31*3=93  1*2*3=6% 93+6=99接近100，页面看着调即可*/
	}
</style>
<!-- https://blog.flqin.com/415.html可参考 -->