什么是 Flexbox 布局？
Flexbox 是一种 CSS 布局模式，它可以让容器中的子元素按照一定的规则排列。Flexbox 布局是响应式的，适用于不同尺寸和设备的屏幕。
Flexbox 布局是基于容器和子元素的概念，容器是父元素，子元素是容器的直接子元素。Flexbox 布局中，容器可以设置一些属性，控制子元素的排列方式。子元素也可以设置一些属性，调整自己的排列方式。
如何实现子元素自适应最大高度？
在 Flexbox 布局中，如果子元素的高度不同，容器的高度就会被子元素的高度撑开。如果我们想让子元素自适应容器的最大高度，可以使用以下方法：
- 将容器的高度设为
100%。
.container {
height: 100%;
display: flex;
}- 将子元素的高度设为
100%。
.container {
display: flex;
}
.item {
height: 100%;
}- 将子元素的
flex属性设为1。
.container {
display: flex;
}
.item {
flex: 1;
}- 将子元素的
align-self属性设为stretch。
.container {
display: flex;
}
.item {
align-self: stretch;
}以上四种方法中，第一种方法可能会导致容器高度超出父元素的高度，因此不太适用。第二种方法需要保证父元素的高度已经定义，否则子元素的高度也无法自适应。第三种方法可以让子元素平均分配容器的剩余空间，但是不适用于只有一个子元素的情况。第四种方法可以让子元素的高度自适应容器的高度，且适用于只有一个子元素的情况。
示例代码
以下是一个使用 Flexbox 布局实现子元素自适应最大高度的示例代码：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ - ----- - ----- -- ------- --- ----- ------ -------- ----- -
在上面的示例代码中，我们将容器的高度设为 300px，子元素的高度自适应容器的高度。每个子元素都有一个边框和内边距，可以更好地看到它们的高度。
总结
Flexbox 布局是一种灵活的布局方式，可以轻松实现子元素自适应最大高度。我们可以使用 height: 100%、flex: 1 或 align-self: stretch 等属性来实现。在使用 Flexbox 布局时，我们需要注意容器和子元素的属性设置，以达到预期的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d3b0f95b1f8cacd6f1486