flex布局 ——子元素保持自身高度

作者：System 时间：2024年08月11日分类：所有,css3 字数：551

这篇文章距离上次修改已过247天，其中的内容可能已经有所变动。

在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的大小变化其自身的高度。

flex布局 ——子元素保持自身高度

评论已关闭

推荐阅读