在前端开发中，很多时候我们使用 Flexbox 来布局页面。然而，在垂直方向内包含展开收起组件的情况下，Flexbox 可能会出现一些问题。比如，在子元素展开后，父元素高度无法自适应。本文将介绍如何解决这些问题。
问题描述
当我们使用 Flexbox 布局时，通常会设置子元素为 flex。在垂直方向上，子元素的高度会自动根据内容撑开，但是当子元素有折叠和展开的功能时，就可能发现问题了。
比如，我们有下面这样一个页面：
-- -------------------- ---- -------
---- ------------------
---- ---------------
-----------
-------------------
------
---- ----------------
---------
---------
---------
---------
------
------我们希望点击“展开”按钮后，.content 元素可以展开，高度自适应。我们可以用以下 CSS 来实现：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ------- ----- - ------- - -------- ----- ---------------- -------------- ------------ ------- ------- ----- - -------- - -------- ----- --------------- ------- ------- -- --------- ------- ----------- ------ ---- ----- - ------------- - ------- ----- -
这种情况下，当 .content 显示时，它的高度确实会根据内容自适应。但是，当我们把 .content 放到一个 section 标签中时，就出现了问题：
-- -------------------- ---- -------
---------
---- ------------------
---- ---------------
-----------
-------------------
------
---- ----------------
---------
---------
---------
---------
------
------
----------在此情况下，当 .content 显示时，它的高度不再根据内容自适应，而是出现了滚动条。
问题原因
这是由于 Flexbox 的高度计算规则导致的。在 Flexbox 中，高度计算规则是基于父元素的高度。当父元素的高度设置为百分比时，子元素的高度计算也会随之改变。对于 height: auto 的子元素，它们的高度被计算为其内容所需的高度，因此当它们的高度占据了父元素的百分比高度时，它们会自动撑开父元素。
但是，当父元素的高度无法计算时，Flexbox 就会出现问题。在上面的例子中，section 标签的高度未被设置，因此它的高度就无法被计算。这导致 Flexbox 计算 .container 元素的高度时，无法使用正确的父元素高度。
解决方案
有几种方法可以解决这个问题。
1. 父元素高度设为固定值
最简单的方法是设置父元素的高度为固定值。这种情况下，子元素的高度可以正确地计算，因此 Flexbox 可以正常工作。比如，我们可以把 section 的高度设置为 500px，然后用以下 CSS 使其成为 Flexbox 容器：
section {
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}这种方法存在一些缺点。首先，需要事先知道父元素的高度，否则无法设置。其次，父元素的高度无法根据内容自适应，这可能会导致它们的尺寸不一致。
2. 把展开的内容移到父元素外
另一个解决方案是把展开的内容移到父元素外。这种方法需要修改 HTML 结构，将 .content 元素移到父元素外：
-- -------------------- ---- -------
-------- ------------------
---- ---------------
-----------
-------------------
------
----------
-------- ----------------
---------
---------
---------
---------
----------接着，在 CSS 中添加以下样式：
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- - ---------- - --------------- ------- - -------- - -------- ----- --------------- ------- ------- -- --------- ------- ----------- ------ ---- ----- - ------------- - ------- ----- -
这种方法可以解决高度计算的问题，但需要更改 HTML 结构，可能会影响到其他 CSS 样式，需要小心使用。
3. 使用 JS 动态计算父元素高度
最后一个解决方案是使用 JavaScript 动态计算父元素的高度。在点击“展开”按钮后，我们可以通过 JavaScript 计算父元素的高度，并将其应用于 .container 元素。以 jQuery 为例，代码如下：
$('.header button').on('click', function () {
var $container = $(this).parents('.container');
var contentHeight = $container.next('.content').outerHeight();
$container.height(contentHeight + $container.find('.header').outerHeight());
$container.find('.content').toggleClass('open');
});这样就可以解决 Flexbox 对父元素高度计算的依赖。并且这种方法不需要更改 HTML 结构，也不会影响其他样式。
结论
在使用 Flexbox 布局时，当垂直方向内包含展开收起组件时，可能会出现无法自适应高度的问题。这是由于 Flexbox 的高度计算规则导致的。我们可以采用如下方法解决这个问题：
- 父元素高度设为固定值；
- 把展开的内容移到父元素外；
- 使用 JS 动态计算父元素高度。
我们需要根据具体情况选择合适的解决方案，并小心修改 HTML 结构。同时，了解 Flexbox 的高度计算规则，可以更好地使用 Flexbox 布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f36b68e1e8e99bfaf6da92