Flexbox布局是现代Web开发中非常常见的布局方式，通过一些属性的设置，可以让元素在水平或垂直方向上自适应、分布和对齐。在Flexbox布局中，flex-grow、flex-shrink和flex-basis三个属性是非常重要的，可以用来控制元素在可用空间不足或超出时的展示方式。本文将详细介绍这三个属性的用途及其示例。
flex-grow
flex-grow属性用来控制可用空间不足时元素的展示方式。它的值是一个数字，默认为0，表示元素不会自动拉伸以适应容器的可用空间。
当某个元素的flex-grow值为1时，它会尽可能地消耗多余的可用空间，直到与兄弟元素平分容器的可用空间。如果有多个元素的flex-grow值都为1，它们将平分多余的可用空间。如果某个元素的flex-grow值为2，而其它元素的flex-grow值仍为1，则这个元素将获得两倍的多余可用空间。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---------------
-------
---------- -
-------- -----
------- ------
---------------- --------------
------------ -------
----------------- -----
-
----- -
------ -----
------- -----
----------------- -----
-
------------------ -
---------- --
-
------------------ -
---------- --
-
------------------ -
---------- --
-
--------
-------
------
---- ------------------
---- -------------------
---- -------------------
---- -------------------
------
-------
-------在上面这个例子中，我们定义了一个三个子元素的容器，justify-content的取值为space-between，表示三个元素之间有等距离的空隙。第一个元素的flex-grow值为0，不会拉伸；第二个元素的flex-grow值为1，会尽可能地占用多余的可用空间；第三个元素的flex-grow值为2，会占用两倍的多余可用空间。
flex-shrink
flex-shrink属性用来控制元素在可用空间不足时的展示方式。它的值也是一个数字，默认为1，表示元素会在必要时自动缩小，以适应容器的宽度或高度。
当某个元素的flex-shrink值为0时，它不会缩小，即使容器的可用空间不足以容纳所有元素。如果容器的宽度或高度不够，所有的元素都会等比例缩小，直到放得下为止。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---------------
-------
---------- -
-------- -----
------- ------
----------------- -----
---------------- --------------
------------ -------
-
----- -
----------------- -----
-
------------------ -
------------ --
------ ------
-
------------------ -
------------ --
------ ------
-
------------------ -
------------ --
------ ------
-
--------
-------
------
---- ------------------
---- -------------------
---- -------------------
---- -------------------
------
-------
-------在这个例子中，我们设置了三个元素，并指定每个元素的flex-shrink值，以及宽度为150像素。当页面宽度变得过小时，所有元素会等比例缩小，直到显示在容器中。
flex-basis
flex-basis属性用来设置元素在没有分配多余空间时的初始大小。它的值可以是长度、百分比或 auto，默认值是 auto。当可用空间不够时，它的值将作为元素的最小宽度或最小高度。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---------------
-------
---------- -
-------- -----
------- ------
----------------- -----
---------------- -------
------------ -------
-
----- -
----------------- -----
------ -----
-
-- --------- ---------- --
------------------ -
----------- ------
-
--------
-------
------
---- ------------------
---- -------------------
---- -------------------
---- -------------------
------
-------
-------在这个例子中，我们设置了三个元素的容器。第一个和第三个元素都有默认的flex-basis值（auto），而第二个元素的初始宽度是200像素。
总结
flex-grow、flex-shrink和flex-basis是Flexbox布局中最常用的属性。它们分别用于控制元素在可用空间不足或超出时的展示方式。这些属性可以非常灵活地控制页面布局，使得页面能够适应不同的屏幕大小和设备类型。掌握这三个属性，将使你的前端技能更加全面，为你的Web开发带来更多的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6533b67b7d4982a6eb7477d9