theme: channing-cyan
理解flex属性
在flexbox布局中，flex属性是用来控制项目的伸缩性的。它是一个复合属性，包含了flex-grow、flex-shrink和flex-basis这三个子属性。
-
在 Flexbox 中，每个子元素都拥有一个 “flex” 属性，用于控制其在容器中的伸缩行为。
-
“flex” 属性是一个简写属性，包含了 “flex-grow”、“flex-shrink” 和 “flex-basis” 这三个属性的值。
-
语法格式为：
flex: <flex-grow> <flex-shrink> <flex-basis>; -
flex-grow：指定项目在剩余空间中所占据的比例，默认值为0，表示项目不会伸展。当设置为正数时，表示该项可以扩展的比例，相对于其他Flex项的比例。
-
flex-shrink：指定项目在空间不足时的收缩比例，默认值为1，表示项目会按比例收缩。当设置为0时，该项不会收缩。
-
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为
auto，即项目的本来大小。
通常情况下，我们会使用flex的简写形式，即通过一个值来同时设置flex-grow、flex-shrink和flex-basis。而其中的flex: 1就是最见的简写形式之一。
理解flex: 1的作用
当我们将一个项目的flex属性设置为1时，相当于将其分配了一个相对于其他项目相同的可伸缩空间。换句话说，flex: 1会使得该项目尽可能地占据父容器中的剩余空间，但不会影响到其他项目。
flex: 1; /* 等同于 flex: 1 1 0%; */
flex-grow设置为 1，表示该项可以在父容器内扩展，占据所有可用的额外空间。flex-shrink设置为 1，表示该项可以在空间不足时收缩，以避免溢出。flex-basis设置为 0%，表示项目在分配额外空间之前不占用空间，会自动填充所有可用空间。
实际运用示例
这种设置对于实现灵活的、响应式的布局非常有用。例如，我们可以将一个导航栏中的项目设置为flex: 1，这样它们就会自动平分导航栏的宽度，无论导航栏的宽度是多少，都能够保持平均分配。
假设我们有一个导航栏，其中包含了若干个链接。我们希望这些链接能够水平排列，并且在导航栏宽度发生变化时能够自动调整大小，保持平均分配。
HTML结构可能如下所示：
<nav class="navbar"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a>
</nav>
对应的CSS样式如下：
css">.navbar {display: flex;
}.navbar a {flex: 1;text-align: center;padding: 10px;border: 1px solid #ccc;
}
在这个示例中，我们通过将链接的flex属性设置为1，实现了它们的平均分配。无论导航栏的宽度是多少，链接都会自动调整大小，以适应父容器的空间。
拓展
flex: 1" 与其他值的比较：
- “flex: 1” 是最常用的设置，因为它能够让子元素自动填充剩余空间，使得布局更加灵活。
- 与之相对的，“flex: 0” 则意味着子元素不会自动填充剩余空间，而是根据其内容或固定尺寸进行布局。
- “flex: none” 则表示子元素不可伸缩，其大小仅受到 “flex-basis” 的限制，不会根据剩余空间自动调整大小。
