Flexbox 是一种用于定义容器中项目布局的一种 CSS3 属性，能够灵活优雅地解决常见的布局问题，适用于响应式和动态布局。它是目前前端开发中最流行的布局工具之一。但是，使用过程中我们可能会遇到一些问题，比如对于一些容器中的子元素，我们需要根据其高度或宽度的最大值或最小值进行布局调整。本文将为您介绍如何使用 Flexbox 来解决这些问题。
1. 最值优化
在一个容器中，当我们需要某个元素的宽度或高度能够保持在一定范围之内时，可以使用最值的技巧。
1.1. 最大值优化
如果我们需要控制子元素的高度不超过某个最大值，则可以通过设置 max-height 属性来实现。例如，我们要让一个容器中的三个子元素都不超过 150px 的高度，可以这样写：
.container{
display: flex;
flex-direction: column;
}
.container .item{
max-height: 150px;
}这样，当子元素超过 150px 时，会自动将多余的高度进行截断，保持在 150px 的高度范围内。
1.2. 最小值优化
与最大值相反，如果我们需要保证子元素的高度不低于某个最小值时，可以通过设置 min-height 来实现。例如，我们要让一个容器中的三个子元素都不低于 50px 的高度，可以这样写：
.container{
display: flex;
flex-direction: column;
}
.container .item{
min-height: 50px;
}这样，当子元素高度低于 50px 时，min-height 将会起到约束作用，最终子元素的高度将保持在 50px 的高度范围内。
2. 示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
------ ----------------
-----------
-------- -----
--------------- -------
-
---------- ------
------- --- ----- -----
------- -----
-------- -----
----------------- --------
----------- -------
---------- -----
-
---------- -------------------
----------- ------
-
---------- -------------------
----------- -----
-
--------
-------
------
---- ------------------
---- -------------------- ----- ----------
---- -------------------- ---- ----------
---- -------------------------------
------
-------
-------通过这个示例，我们可以清晰地看到最值优化的效果：第一个子元素的高度最大不超过 150px，第二个子元素的高度最小不低于 80px，同时默认高度的子元素不会被约束。这样，我们就可以灵活地处理一些布局问题了。
3. 总结
本文通过最值优化的示例代码，介绍了在使用 Flexbox 时如何调整容器中子元素的高度范围，以达到布局优化的目的。通过灵活运用最值技巧，我们可以轻松解决一些常见的布局问题，实现更加优雅的页面布局效果。希望这篇文章能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653388a17d4982a6eb7159e8