前言
在前端开发中，我们经常会遇到需要让一个元素高度自适应的情况。然而，由于 CSS 的盒模型和浮动等布局方式的限制，实现这一目标并不总是那么容易。在这篇文章中，我们将介绍一种基于 Flexbox 布局的方法，可以让单个元素实现自适应高度。
Flexbox 简介
Flexbox 布局是 CSS3 新增的一种布局方式，它可以让我们更方便地实现复杂的布局效果。Flexbox 布局的核心是 flex container 和 flex item 两个概念。
- flex container：指包含 flex item 的容器。我们可以通过设置容器的 display 属性为 flex 或 inline-flex 来启用 Flexbox 布局。
- flex item：指容器中的子元素。每个 flex item 都有自己的 flex-basis、flex-grow 和 flex-shrink 属性，用来控制它在容器中的尺寸。
实现方法
要实现一个元素的自适应高度，我们需要先将它放入一个 flex container 中。然后，我们需要设置这个元素的 flex-basis 属性为 auto，同时将它的 flex-grow 属性设置为 1。这样，这个元素就会根据容器的剩余空间来自适应高度了。
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ------- - ---------- - ----------- ----- ---------- -- -
在上面的代码中，我们设置了一个 flex container，并将它的 flex-direction 属性设置为 column，这样容器中的元素就会垂直排列。然后，我们将 flex item 的 flex-basis 属性设置为 auto，这样它的初始尺寸就会根据内容来确定。最后，我们将 flex item 的 flex-grow 属性设置为 1，这样它就会占据容器中剩余的空间。
示例代码
下面是一个完整的示例代码，你可以将它复制到你的项目中进行测试。
-- -------------------- ---- -------
---- -----------------------
---- ------------------
---------------
-----------------------
------
------
-------
--------------- -
-------- -----
--------------- -------
------- ------
------- --- ----- -----
-
---------- -
----------- -----
---------- --
-------- -----
-
--------在上面的代码中，我们创建了一个高度为 200px 的 flex container，并将它的边框设置为 1px 的实线。然后，我们将一个 flex item 放入容器中，并将它的内容设置为一个标题和一段文本。最后，我们将 flex item 的 padding 属性设置为 10px，这样它的内容就不会紧贴边框了。
总结
通过使用 Flexbox 布局，我们可以很方便地实现单个元素的自适应高度。这种方法不仅简单易懂，而且兼容性也比较好，可以在大多数现代浏览器中使用。如果你还没有使用 Flexbox 布局，那么现在就是时候学习它了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65127fae95b1f8cacdaf94df