CSS Flexbox 是一种强大的布局方式，可以帮助我们轻松地实现元素的自适应布局，特别是在响应式设计中非常有用。本文将介绍如何使用 CSS Flexbox 实现元素填满父容器。
什么是 CSS Flexbox？
CSS Flexbox 是 CSS3 中的一种布局方式，它可以帮助我们轻松地实现元素的自适应布局。Flexbox 布局是基于弹性盒子模型的，通过定义容器和项目的属性来实现布局。
如何使用 CSS Flexbox 实现元素填满父容器？
使用 CSS Flexbox 实现元素填满父容器非常简单，只需要设置容器的 display 属性为 flex，并设置子元素的 flex 属性即可。
容器设置
首先，我们需要将容器的 display 属性设置为 flex，这样容器就可以使用 Flexbox 布局了。例如：
.container {
display: flex;
}子元素设置
然后，我们需要设置子元素的 flex 属性，这个属性决定了子元素在容器中的宽度或高度比例。如果我们想让子元素填满父容器，可以将它的 flex 属性设置为 1。例如：
.container {
display: flex;
}
.container > div {
flex: 1;
}上面的代码中，我们设置了一个容器和三个子元素，其中子元素的 flex 属性都设置为 1，这样它们就能够平分容器的宽度或高度了。
示例代码
下面是一个完整的示例代码，展示了如何使用 CSS Flexbox 实现元素填满父容器：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---------- - ----- - ----- -- ----------------- ----- ------- ------ ------- ----- -
上面的代码中，我们设置了一个容器和三个子元素，其中子元素的背景颜色为灰色，高度为 100px，外边距为 10px。由于子元素的 flex 属性都设置为 1，它们就能够平分容器的宽度了。
总结
CSS Flexbox 是一种非常有用的布局方式，可以帮助我们轻松地实现元素的自适应布局。使用 Flexbox 布局实现元素填满父容器非常简单，只需要设置容器的 display 属性为 flex，并设置子元素的 flex 属性即可。希望本文能够对你理解和使用 CSS Flexbox 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fa3a4ad10417a22260ded4