css flex实现同行div根据内容高度自适应且保持一致
要实现CSS Flex布局中同行div根据内容高度自适应且保持一致的高度，可以使用以下方法：
- 设置父容器为flex布局。
- 使用
align-items: stretch;属性来拉伸所有子元素，使它们的高度相同。 - 子元素设置
min-height属性确保至少有一个固定高度，避免内容为空时高度塌陷的问题。
以下是实现这种布局的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Equal Heights</title>
<style>
.flex-container {
display: flex;
align-items: stretch; /* 保持子元素在垂直方向上的对齐 */
}
.flex-item {
flex: 1; /* 每个子元素都会平均分配父容器的空间 */
padding: 10px;
border: 1px solid #ccc;
min-height: 100px; /* 设置最小高度以确保至少有一些高度 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">
<p>内容1</p>
</div>
<div class="flex-item">
<p>内容2</p>
<p>更多内容</p>
</div>
<div class="flex-item">
<p>内容3</p>
<p>更多内容</p>
<p>更多更多内容</p>
</div>
</div>
</body>
</html>在这个例子中，.flex-container是一个flex容器，其中的.flex-item是子元素。通过align-items: stretch;属性，子元素会自动拉伸以匹配父容器的高度，即使它们的内容高度不同。通过为每个子元素设置min-height属性，确保至少有一些基本高度，即使内容为空，也不会塌陷。
评论已关闭