012-flex数值与Flex子属性

flex: 1 详解与 Flex 子项属性解析

一、flex: 1 的完整含义

flex: 1 是 flex-grow、flex-shrink 和 flex-basis 的简写形式，其完整等价于：

flex: 1 1 0;
/* 等价于 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

二、三大核心属性详解

1. flex-grow（扩展比例）

定义：当容器有剩余空间时，子项的分配比例
特点：

• 默认值：0（不扩展）
• 必须是非负数字
• 按比例分配剩余空间

示例：

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }

→ 剩余空间按 1:2 分配

2. flex-shrink（收缩比例）

定义：当空间不足时，子项的收缩比例
特点：

• 默认值：1（允许收缩）
• 必须是非负数字
• 0 表示不收缩（类似 flex-shrink: none）

计算方式：

实际收缩量 = (子项原始尺寸 × flex-shrink值) / ∑(所有子项原始尺寸 × flex-shrink值) × 溢出空间

3. flex-basis（基准尺寸）

定义：子项在分配多余空间之前的初始尺寸
特点：

• 默认值：auto（取元素自身尺寸）
• 可设为具体值（200px、20%等）或 0
• 当设置为 0 时，会忽略元素自身尺寸

三、flex 简写形式对照表

简写形式	等价完整形式	说明
flex: initial	0 1 auto	默认值，不扩展但可收缩
flex: auto	1 1 auto	完全弹性，基准为内容尺寸
flex: none	0 0 auto	完全刚性，不伸缩
flex: 1	1 1 0	完全弹性，基准为0
flex: 2 1	2 1 0	扩展系数2，基准为0
flex: 1 100px	1 1 100px	基准100px，可伸缩

四、深度解析 flex: 1 的特性

1. 空间分配机制

<div class="container">
  <div class="item" style="flex: 1">A</div>
  <div class="item" style="flex: 2">B</div>
  <div class="item" style="flex: 1">C</div>
</div>

• 总比例：1 + 2 + 1 = 4
• 剩余空间分配：
  • A 获得 1/4
  • B 获得 2/4
  • C 获得 1/4

2. 与 flex-basis: 0 的关系

flex: 1 的 flex-basis: 0 会导致：

• 忽略元素内容宽度
• 完全按比例分配空间
• 实现真正均匀分布（不同于 flex: auto）

3. 与 flex-grow: 1 的区别

/* 情况1 */
.item { flex-grow: 1; } /* flex-shrink: 1, flex-basis: auto */

/* 情况2 */
.item { flex: 1; } /* flex-shrink: 1, flex-basis: 0 */

区别：

• 情况1 会受元素内容影响
• 情况2 完全按比例分配

五、常见应用场景

1. 等分布局

.container {
  display: flex;
}
.item {
  flex: 1; /* 完全等分 */
}

2. 主内容自适应

.sidebar {
  flex: 0 0 200px; /* 固定宽度 */
}
.main {
  flex: 1; /* 占据剩余空间 */
}

3. 响应式网格

.grid-item {
  flex: 1 0 250px; /* 最小250px，可扩展 */
}

六、常见误区与注意事项

1. flex-basis 与 width 的优先级：

   • 在Flex布局中，flex-basis 会覆盖 width
   • 除非 flex-basis: auto

2. 最小内容尺寸限制：

   • 即使 flex-basis: 0，也不会小于内容最小宽度
   • 可加 min-width: 0 强制收缩

3. 性能考虑：

   • 避免过度嵌套Flex容器
   • flex: 1 比 flex-grow: 1 性能稍优（浏览器优化）

4. IE11 兼容性：

   • IE11 对 flex-basis: 0 支持有问题
   • 需写成 flex: 1 1 0px

通过深入理解这些属性，可以精准控制Flex布局中的空间分配，实现各种复杂的自适应布局效果。