flex布局 ——子元素保持自身高度
在Flex布局中，如果想要子元素保持其自身的高度，可以使用以下CSS属性：
flex-grow: 设置为0，表示不会增长来填充任何额外空间。flex-shrink: 设置为0，表示不会缩小来防止溢出容器。flex-basis: 设置为一个确定的值（如auto或具体的高度），表示子元素的基准大小。
以下是一个简单的例子：
.container {
display: flex; /* 启用Flex布局 */
}
.child {
flex-grow: 0; /* 不增长 */
flex-shrink: 0; /* 不缩小 */
flex-basis: auto; /* 基准大小为自动 */
/* 可以设置具体高度，如 height: 100px; */
}
<div class="container">
<div class="child">我是子元素，我保持我自己的高度</div>
</div>在这个例子中，子元素.child将保持其内容所需的高度，而不会根据父容器.container的大小变化其自身的高度。
评论已关闭