什么是 Flexbox
Flexbox 是一种布局模式，用于在容器中对子元素进行排列和分布。它可以帮助我们轻松地实现响应式布局，使得元素能够在不同设备和屏幕尺寸下自适应。
Flexbox 的主要特点是：
- 父容器定义了 flex 容器，子元素成为 flex 项目。
- 父容器可以控制子元素的排列方式、分布、对齐方式等。
- 子元素可以设置 flex-grow、flex-shrink、flex-basis 等属性，以实现自适应布局。
flex-grow 属性
flex-grow 属性指定了一个 flex 项目在剩余空间中所占的比例，以实现自适应布局。它的取值为一个非负数，表示分配剩余空间的比例。
例如，如果一个 flex 容器中有三个子元素，其中一个子元素的 flex-grow 属性为 1，其他两个子元素的 flex-grow 属性为 2，那么这三个子元素在剩余空间中所占的比例分别为 1:2:2。
实现自适应高度
我们可以利用 flex-grow 属性来实现自适应高度。具体来说，我们可以将一个 flex 容器的高度设置为 100%，然后将其中一个子元素的 flex-grow 属性设置为 1，其他子元素的 flex-grow 属性设置为 0，这样这个子元素就会自适应容器的高度。
下面是一个示例代码：
<div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </div>
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.item {
flex-grow: 0;
width: 100%;
}
.item1 {
height: 100px;
}
.item2 {
flex-grow: 1;
}
.item3 {
height: 50px;
}在这个示例中，我们将容器设置为 flex 容器，并将 flex-direction 属性设置为 column，以使子元素垂直排列。然后，我们将容器的高度设置为 100%，以使容器的高度自适应父容器的高度。
接着，我们将三个子元素的宽度设置为 100%，并将其中一个子元素（item2）的 flex-grow 属性设置为 1，其他子元素的 flex-grow 属性设置为 0。这样，item2 就会自适应容器的高度，而其他子元素则会保持其原有的高度。
指导意义
Flexbox 是一种非常强大的布局模式，可以帮助我们轻松地实现响应式布局。通过灵活地使用 flex-grow 属性，我们可以实现自适应高度、自适应宽度等各种自适应布局效果。
在实际开发中，我们应该充分利用 Flexbox 的优势，灵活地运用各种属性和方法，以实现高效、灵活、可维护的布局效果。同时，我们也应该注意兼容性问题，尽量使用标准的 CSS 语法和属性，避免使用过时或不兼容的语法和属性。
总结
本文介绍了 Flexbox 的基本概念和 flex-grow 属性的使用方法，以及如何利用 flex-grow 属性实现自适应高度。通过灵活地使用 Flexbox，我们可以实现各种自适应布局效果，提高页面的可读性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c40830add4f0e0ffe74e49