css flex布局中子元素的属性flex
1. flex 是 flex-grow、flex-shrink 和 flex-basis 的简写
语法格式：
flex: [flex-grow] [flex-shrink] [flex-basis];
各属性解析：
flex-grow: 子元素如何按比例分配父元素的 剩余空间。
- 默认值：
0（即不分配剩余空间）。 - 如果设置为
1或更大值，则子元素会根据此值按比例分配剩余空间。
flex-shrink: 子元素在父容器空间不足时如何按比例 收缩。
- 默认值：
1（即允许收缩）。 - 设置为
0时，子元素不会收缩。
flex-basis: 子元素在弹性布局中 初始宽度或高度的基准。
- 默认值：
auto（即根据内容、width或height等值决定）。 - 如果设置为具体数值（如
0px、100px或百分比0%、100%），则会覆盖width的设置。
2. 常见用法解析
单值写法
flex: 1;
等价于：
flex: 1 1 0%;
表示 flex-grow: 1，flex-shrink: 1，flex-basis: 0%（基准宽度为 0）。
三个值写法
flex: 2 0 100px;
表示
flex-grow: 2：子元素会分配两倍的剩余空间（与其他子元素按比例）。flex-shrink: 0：子元素不会收缩。flex-basis: 100px：子元素的基准宽度为100px。
常用缩写模式
flex: auto
- 等价于
flex: 1 1 auto。 - 子元素会按内容大小决定基础宽度（
auto），允许增长和收缩。
flex: none
- 等价于
flex: 0 0 auto。 - 子元素大小完全由内容决定，不允许增长或收缩。
3. 应用场景
示例 1: 等比例分配剩余空间
<div class="container" style="display: flex;">
<div class="box1" style="flex: 1;"></div> <!-- 占一份 -->
<div class="box2" style="flex: 2;"></div> <!-- 占两份 -->
</div>
box1 和 box2 的行为
- 父元素有剩余空间，
box1占 1 份，box2占 2 份，按照1:2分配。
示例 2: 固定宽度 + 自适应宽度
<div class="container" style="display: flex;">
<div class="box1" style="flex: 0 0 100px;"></div> <!-- 固定宽度 100px -->
<div class="box2" style="flex: 1;"></div> <!-- 剩余空间填充 -->
</div>
box1 和 box2 的行为
box1宽度固定为 100px，不会增长或收缩。box2自动填充剩余空间。
4. 注意点
1.flex-basis 优先级高于 width 或 height
如果同时设置了 width 和 flex-basis，flex-basis 会覆盖 width 的值。
2.默认值
如果未设置 flex，默认值为flex:0 1 auto
不增长（
flex-grow: 0）。允许收缩（
flex-shrink: 1）。基准宽度由内容决定（
flex-basis: auto）。
3.父元素的 display: flex 必须设置：
flex属性对子元素生效的前提是父元素开启了flex布局。