[css] flex 子元素自动撑开父元素宽度

作者：System 时间：2024年08月12日分类：所有,css 字数：401

在CSS中，如果你想要让一个flex子元素自动撑开其父元素的宽度，你可以确保父元素是一个flex容器，并且子元素没有设置宽度或者是自动的（默认值）。

以下是实现这一效果的基本CSS代码：




.parent {
  display: flex; /* 将父元素设置为flex容器 */
}
 
.child {
  /* 子元素不需要特别设置，默认会自动撑开 */
}

HTML结构如下：




<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

在这个例子中，.parent 是一个flex容器，.child 是其子元素。由于.child没有设置特定的宽度，它会自动撑开至与父元素相同的宽度。