Flexbox 是一个强大的 CSS 布局工具，可以帮助我们轻松地定义弹性布局。其中一项功能使得我们可以轻松地在容器内分配剩余的空间。本文将深入探讨 Flexbox 如何分配剩余空间并且给出一些实用的指导。
Flexbox 布局中容器和项目
在了解如何分配剩余空间之前，我们需要先理解 Flexbox 布局中的两个概念：容器和项目。Flexbox 容器是一个包含了 Flexbox 项目的父元素。Flexbox 项目是容器内的一些子元素，它们应该被排列在 Flexbox 容器的主轴或交叉轴上。
Flexbox 布局通过容器的声明来设定，而不是项目的属性。这意味着，我们可以针对同一组项目对容器进行多次不同的声明，从而对这些项目产生不同的效果。
Fexbox 布局中的空间分配
Flexbox 布局中，剩余空间的分配是非常重要的。默认情况下，每一个 Flexbox 项目都有一个宽度或高度，它们是根据它们的内容、最小和最大尺寸、以及选择器的样式来计算得到的。当项目超出容器的宽度或高度时，我们需要使用 Flexbox 的空间分配来解决这个问题。
均匀分配空间
Flexbox 提供了一个语法来均匀分配空间，这个语法是 flex-grow 属性。这个属性告诉浏览器，Flexbox 项目应该按照其值的比例来扩展，以填充容器中的所有空间。
例如，我们有两个 Flexbox 项目，它们的 flex-grow 属性分别为 1 和 2。这意味着第一个项目将会占据 1/3 的空间，而第二个项目将会占据 2/3 的空间。
下面是一个简单的例子：
---- ------------------
---- --------------------
---- --------------------
------
-------
---------- -
-------- -----
-
------ -
---------- --
-
------ -
---------- --
-
--------空间少的项目增长更快
Flexbox 还提供了一个语法来让空间少的项目增长更快，而空间多的项目增长更慢，这个语法是 flex-shrink 属性。这个属性告诉浏览器，Flexbox 项目应该按照其值的比例来缩小，以适应容器中的所有空间。
例如，我们有两个 Flexbox 项目，它们的 flex-shrink 属性分别为 1 和 2。这意味着第一个项目将会缩小两次，而第二个项目将会缩小一次。
下面是一个简单的例子：
---- ------------------
---- --------------------
---- --------------------
------
-------
---------- -
-------- -----
-
------ -
------------ --
-
------ -
------------ --
-
--------固定尺寸的项目
在 Flexbox 容器中，如果有一个 Flexbox 项目有固定的尺寸，那么剩余空间的分配就会变得更加复杂。在这种情况下，我们可以使用 flex-basis 属性来指定这个项目的初始尺寸。
例如，我们有三个 Flexbox 项目，它们的 flex-basis 属性分别为 100px、auto 和 100px。这意味着第一个和第三个项目会有一个初始的宽度为 100px，而第二个项目的宽度将会根据需要来计算。
下面是一个简单的例子：
---- ------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
---------- -
-------- -----
-
------ -
----------- ------
-
------ -
----------- -----
-
------ -
----------- ------
-
--------结论
Flexbox 布局的空间分配是非常灵活的，我们可以根据自己的需要来选择不同的方法。无论是均匀分配空间、空间少的项目增长更快还是固定尺寸的项目，都可以通过 Flexbox 的语法来实现。通过灵活的使用这些属性，我们可以轻松地创建适合各种需求的布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6738118b964472ee4e3fbbcc