Flexbox 是一种用于布局的 CSS 弹性盒子模型，可以帮助我们创建动态的、响应式布局。在 Flexbox 布局中，元素的尺寸和位置是由其父级容器来计算的，并且可以通过设置弹性增长和缩小来实现更灵活的布局效果。
弹性增长
Flexbox 布局中的弹性增长指的是元素在可用空间增加的情况下，如何根据一定的比例进行尺寸的增加。在默认情况下，Flexbox 中的元素是不会自动增长的，因此我们需要通过设置一些属性来实现弹性增长。
flex-grow 属性
在 Flexbox 布局中，可以通过设置 flex-grow 属性来控制元素的弹性增长。它接受一个数字作为值，表示元素在可用空间增加时分配的空间量。默认值为 0，表示元素不会自动增长。
--------------- - -------- ----- - ---------- - ---------- -- -- -------- -- -
在上面的例子中，我们创建了一个 Flexbox 容器，并设置 flex-grow 属性为 1，表示元素可以根据可用空间的增加自动增长。这样，当容器中的元素占满了所有可用宽度时，它们就会按照 1:1 的比例进行分配，每个元素都会根据可用空间的增加自动增长。
flex 属性
除了使用 flex-grow 属性之外，还可以使用 flex 属性来控制元素的弹性增长。flex 属性是一个组合属性，包含三个值：
- flex-grow：表示元素在可用空间增加时分配的空间量；
- flex-shrink：表示元素在可用空间减少时缩小的空间量；
- flex-basis：表示元素的初始大小。
---------- - ----- - - ------ -- ----------------- ----- -- -
在上面的例子中，我们将 flex 属性的值设置为 1 1 200px，表示元素可以根据可用空间进行弹性增长和缩小，初始大小为 200px。
弹性缩小
Flexbox 布局中的弹性缩小指的是元素在可用空间减少的情况下，如何根据一定的比例进行尺寸的缩小。在默认情况下，Flexbox 中的元素是会自动缩小的，因此我们需要通过设置一些属性来控制缩小的行为。
flex-shrink 属性
在 Flexbox 布局中，可以通过设置 flex-shrink 属性来控制元素的弹性缩小。它接受一个数字作为值，表示元素在可用空间减少时缩小的空间量。默认值为 1，表示元素会根据可用空间进行等比例缩小。
--------------- - -------- ----- - ---------- - ------------ -- -- ------ -- -
在上面的例子中，我们创建了一个 Flexbox 容器，并设置 flex-shrink 属性为 0，表示元素不会自动缩小。这样，当容器中的元素占据所有可用宽度时，它们不会缩小，而会保持自己的初始大小。
flex 属性
除了使用 flex-shrink 属性之外，还可以使用 flex 属性来控制元素的弹性缩小。flex 属性是一个组合属性，包含三个值：
- flex-grow：表示元素在可用空间增加时分配的空间量；
- flex-shrink：表示元素在可用空间减少时缩小的空间量；
- flex-basis：表示元素的初始大小。
---------- - ----- - - ------ -- -------------------- ----- -- -
在上面的例子中，我们将 flex 属性的值设置为 1 0 200px，表示元素可以根据可用空间进行弹性增长，但不会自动缩小，初始大小为 200px。
总结
在 Flexbox 布局中，通过设置 flex-grow 和 flex-shrink 属性，可以实现元素的弹性增长和缩小。flex 属性更是可以同时控制元素的弹性增长和缩小。在实际开发中，我们可以根据需要来使用这些属性，创建出更加灵活的布局效果。
示例代码：
---- -----------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
-------
--------------- -
-------- -----
-
---------- -
----- - - ------
----------------- -----
----------- -------
-------- -----
-
--------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64abc8e348841e989479de9b