flex:1是？
flex: 1 是 flexbox 布局中的一种简写，表示一个弹性项目（flex item）在容器中如何分配剩余空间。它是 flex-grow, flex-shrink 和 flex-basis 三个属性的简写形式。具体含义如下：
flex: 1; /* 等同于：flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0% */
1. flex: 1 的具体含义
flex-grow: 1：表示该项 可以占用容器的剩余空间，并且其占用的空间是按比例分配的。如果容器内有多个项设置了flex-grow，那么它们会按照比例分配剩余空间。flex-shrink: 1：表示该项 可以收缩，当容器空间不足时，它会按照比例进行收缩。flex-basis: 0%：表示该项的初始大小为0，即不占用任何空间。实际的大小会根据flex-grow来扩展。
2. 作用
flex: 1 设置了 弹性项 的伸缩特性。具体来说：
- 当容器有剩余空间时，
flex-grow: 1会使得该项 扩展占用剩余空间，与其他flex: 1的项一起按比例分配。 - 当容器空间不足时，
flex-shrink: 1会让该项 收缩，并且根据容器中的其他项的flex-shrink值，按比例收缩。 flex-basis: 0%表示该项没有固定的初始宽度，所有的空间都会根据flex-grow和flex-shrink来决定。
3. 示例
HTML 结构：
<div class="container">
<div class="item">项 1</div>
<div class="item">项 2</div>
<div class="item">项 3</div>
</div>
示例 1：flex: 1 示例
.container {
display: flex;
width: 600px;
}
.item {
flex: 1;
background-color: lightblue;
padding: 10px;
margin: 5px;
}
- 在这个例子中，三个
.item元素会均匀地分配容器内的剩余空间，因为flex: 1给每个项目设置了相同的flex-grow（1）值，因此它们会平分容器的可用空间。 - 即使容器宽度发生变化，它们也会根据容器的大小动态调整自己的宽度。
示例 2：多个项使用 flex: 1
.container {
display: flex;
width: 600px;
}
.item1 {
flex: 1;
background-color: lightblue;
}
.item2 {
flex: 2; /* 等价于 flex: 2 1 0% */
background-color: lightgreen;
}
- 在这个例子中，
item1和item2都会按比例分配剩余空间，但item2的flex-grow值是2，因此它会占据比item1更大的空间。
flex-basis 和 width 的优先级？
在 CSS 中，flex-basis 和 width 都用于定义 flex item（弹性盒子项的宽度），但它们的作用略有不同，且优先级也有所不同，尤其在 flex布局 中，二者可能会产生冲突。
1. flex-basis 和 width 的定义
-
flex-basis：定义了 flex item 在主轴方向上的初始大小。默认情况下，flex-basis的值是auto，意味着它会取决于元素的内容和其他因素。flex-basis会影响项目的尺寸，但在有flex布局时会优先于width。 -
width：定义了元素的宽度，通常是块级元素的宽度（适用于主轴方向为水平方向时）。它在flex布局中的作用是 基础宽度，但在flex布局中，width不一定会直接控制元素的最终尺寸。
2. flex-basis 和 width 的优先级
在 flex布局 中，flex-basis 和 width 会相互影响，但 flex-basis 优先级更高。当元素是 flex 项时，flex-basis 会决定其初始尺寸，而 width 只会在 flex-basis 为 auto 时生效。
- 如果
flex-basis已经设置了值，那么width会被忽略，除非flex-basis设置为auto。 - 如果
flex-basis为auto，则width会作为初始宽度来使用。
3. 示例
示例 1：当 flex-basis 明确指定时，width 会被忽略
.container {
display: flex;
}
.item {
flex-basis: 200px; /* flex-basis 优先 */
width: 100px; /* 不起作用 */
}
在这个例子中，flex-basis 设置了 200px，这意味着 .item 的初始宽度会是 200px，即使 width 设置为 100px，width 的值也会被忽略。
示例 2：当 flex-basis 为 auto 时，width 会生效
.container {
display: flex;
}
.item {
flex-basis: auto; /* 默认值 */
width: 100px; /* 起作用 */
}
在这个例子中，flex-basis 为 auto，因此 .item 的宽度会由 width 决定，最终宽度为 100px。
示例 3：当 flex-basis 和 width 都为 auto 时，width 会影响元素的大小
.container {
display: flex;
}
.item {
flex-basis: auto; /* 默认值 auto */
width: 150px; /* 起作用，width 决定元素的宽度 */
}
在这个例子中，flex-basis 为 auto，width 设置为 150px，因此 .item 的宽度会是 150px。
4. 总结
flex-basis优先级较高，尤其在使用flex布局时。- 如果设置了
flex-basis，width会被忽略，除非flex-basis设置为auto。 - 当
flex-basis为auto时，width将生效并控制元素的宽度。
flex-shrink的取值范围
flex-shrink 的作用
flex-shrink控制 当容器空间不足时，如何让弹性项收缩。该值指定了项收缩的比例。- 如果没有足够的空间容纳所有项，
flex-shrink会确定每个项应该收缩多少。
flex-shrink 的取值范围
flex-shrink的取值范围是[0, +∞)0：表示该项 不收缩。无论容器空间如何变化，这个项的大小都不会变小。- 正数：表示该项根据其 收缩比例 来缩小。例如，
flex-shrink: 1表示该项可以按默认的比例进行收缩。如果多个项的flex-shrink值相同，所有项会按相同的比例收缩。 - 较大的数字：表示该项 收缩的优先级更高。例如，
flex-shrink: 2表示该项会收缩为flex-shrink: 1项的两倍。 flex-shrink的默认值是1，意味着如果空间不足，所有的项都会按比例收缩。
示例 1：flex-shrink: 0
.container {
display: flex;
width: 300px;
}
.item {
flex: 1 0 150px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 150px */
}
- 在这个例子中，
flex-shrink: 0表示.item不会收缩，即使容器的空间不够，也不会变小，保持150px宽度。
示例 2：flex-shrink: 1 和 flex-shrink: 2
.container {
display: flex;
width: 300px;
}
.item1 {
flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}
.item2 {
flex: 1 2 200px; /* flex-grow: 1, flex-shrink: 2, flex-basis: 200px */
}
.item1和.item2都有flex-basis: 200px，但flex-shrink: 2的项会比flex-shrink: 1的项收缩得更多。- 假设容器宽度为
300px，而两个项的基础宽度总和为400px，则每个项都会按比例收缩，.item2收缩的比.item1多。
示例 3：不同 flex-shrink 值的多项收缩
.container {
display: flex;
width: 500px;
}
.item1 {
flex: 1 2 300px; /* flex-grow: 1, flex-shrink: 2, flex-basis: 300px */
}
.item2 {
flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}
.item3 {
flex: 1 0 100px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 100px */
}
- 在此例中，
item1和item2会按照flex-shrink的值按比例收缩，而item3不会收缩，保持其100px宽度。
总结
flex-shrink: 0：该项 不收缩，即使空间不足也不会改变宽度。flex-shrink: 1：默认值，表示该项会按照比例收缩，和其他项一起分享收缩空间。flex-shrink > 1：该项的收缩比例会更大，收缩得比其他项多。flex-shrink可以是任何非负的数值，通常是一个整数。
