请尽可能详细地说明，flex属性的语法，怎么使用？
flex 属性是 CSS3 中用于定义 Flexbox 布局中的子项（项目）如何在容器内扩展和收缩的属性。它是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式。下面我将详细说明 flex 属性的语法及其使用方法。
语法：
flex: [flex-grow] [flex-shrink] [flex-basis];
参数说明：
-
flex-grow: 定义项目的扩展比例。默认值为
0，表示项目不扩展。如果设置为1，则项目将占据所有可用空间。设置为更大的值，表示项目将相对于其他项目占据更多的空间。 -
flex-shrink: 定义项目的收缩比例。默认值为
1，表示空间不足时，项目将等比例收缩。如果设置为0，则项目不会收缩，可能会超出容器范围。 -
flex-basis: 定义项目的基准尺寸。它可以设置为长度单位（如
px、em）、百分比或auto（默认值）。auto表示项目的基准尺寸是其内容的实际尺寸。
使用示例：
-
默认值：
flex: 0 1 auto;这表示项目不扩展（
flex-grow: 0）、会收缩（flex-shrink: 1），并且其基准尺寸是内容的实际尺寸（flex-basis: auto）。 -
扩展一个项目：
flex: 1;这表示项目会扩展以填满所有可用空间，相当于
flex: 1 0 auto;。 -
自定义基准尺寸：
flex: 2 1 200px;这表示项目将扩展两倍于其他项目的空间（
flex-grow: 2），会正常收缩（flex-shrink: 1），并且其基准尺寸是200px（flex-basis: 200px）。 -
不收缩项目：
flex: 0 0 300px;这表示项目不会扩展（
flex-grow: 0），也不会收缩（flex-shrink: 0），并且其基准尺寸是300px。 -
使用快捷值：
auto: 相当于flex: 1 1 auto;。none: 相当于flex: 0 0 auto;，即项目既不扩展也不收缩。
注意事项：
- 当不设置
flex-shrink或flex-basis时，它们将采用默认值。 - 如果设置了
flex属性，子元素的float、clear和vertical-align属性将失效。 - 在使用 Flexbox 布局时，推荐优先使用
flex属性而不是单独设置flex-grow、flex-shrink和flex-basis。
通过合理使用 flex 属性，可以非常灵活地实现各种响应式和自适应布局。
