编辑“︁CSS弹性基准”︁

{{DISPLAYTITLE:CSS弹性基准}}

== 简介 ==
'''CSS弹性基准（flex-basis）'''是[[CSS弹性盒布局]]中的关键属性，用于定义弹性项目（flex item）在主轴方向上的初始大小，然后再根据剩余空间进行扩展或收缩。该属性决定了项目在分配多余空间之前的"基准尺寸"，类似于传统布局中的`width`或`height`，但其行为会根据`flex-direction`的变化而动态调整。

弹性基准与`flex-grow`和`flex-shrink`共同构成`flex`简写属性，三者协同控制弹性项目的最终尺寸。

== 语法 ==
弹性基准的基本语法如下：
<syntaxhighlight lang="css">
flex-basis: auto | <width> | content | max-content | min-content | fit-content;
</syntaxhighlight>

* '''auto'''（默认值）：使用项目的`width`或`height`值作为基准，若未设置则根据内容计算
* '''<width>'''：指定固定值（如`200px`、`50%`等）
* '''content'''：根据项目内容自动计算基准（需注意浏览器兼容性）

== 核心行为 ==
=== 与主轴方向的关系 ===
弹性基准的实际表现取决于主轴方向：
* 当`flex-direction: row`时，基准对应水平尺寸（类似`width`）
* 当`flex-direction: column`时，基准对应垂直尺寸（类似`height`）

=== 与其他flex属性的交互 ===
弹性基准与另外两个flex属性共同作用：
<math>
最终尺寸 = flex\text-basis + (剩余空间 \times flex\text-grow比例) - (不足空间 \times flex\text-shrink比例)
</math>

== 代码示例 ==
=== 基础用法 ===
<syntaxhighlight lang="html">
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.container {
  display: flex;
  width: 600px;
  border: 1px solid #333;
}
.item {
  padding: 20px;
  background: #eee;
}
.item1 { flex-basis: 100px; }
.item2 { flex-basis: 200px; }
.item3 { flex-basis: auto; } /* 将根据内容宽度计算 */
</syntaxhighlight>

'''输出效果'''：
* Item1固定为100px宽
* Item2固定为200px宽
* Item3宽度自动适应内容

=== 与flex-grow结合 ===
<syntaxhighlight lang="css">
.container {
  display: flex;
  width: 800px;
}
.item {
  flex-basis: 100px;
}
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
</syntaxhighlight>

'''计算过程'''：
1. 总基准：100px × 3 = 300px
2. 剩余空间：800px - 300px = 500px
3. Item1最终宽度：100px + (500px × 1/3) ≈ 266.67px
4. Item2最终宽度：100px + (500px × 2/3) ≈ 433.33px

== 可视化说明 ==
<mermaid>
flowchart LR
    A[容器宽度 800px] --> B[初始分配]
    B --> C[Item1: 100px]
    B --> D[Item2: 100px]
    B --> E[Item3: 100px]
    A --> F[剩余空间 500px]
    F --> G[按grow比例分配]
    G --> H[Item1 +166.67px]
    G --> I[Item2 +333.33px]
</mermaid>

== 实际应用场景 ==
=== 响应式导航栏 ===
<syntaxhighlight lang="css">
.nav-item {
  flex-basis: 120px;  /* 最小宽度 */
  flex-grow: 1;       /* 平均分配剩余空间 */
  max-width: 200px;   /* 最大宽度限制 */
}
</syntaxhighlight>

=== 卡片等宽布局 ===
<syntaxhighlight lang="css">
.card {
  flex-basis: calc(33.33% - 20px); /* 三列布局考虑间隙 */
  flex-shrink: 1;                  /* 允许收缩 */
}
</syntaxhighlight>

== 特殊值解析 ==
{| class="wikitable"
|-
! 值 !! 描述 !! 注意事项
|-
| '''auto''' || 默认值，优先使用width/height || 若未设置尺寸则根据内容计算
|-
| '''content''' || 完全根据内容决定尺寸 || 可能影响性能（需重排计算）
|-
| '''0''' || 基准为零，所有空间按grow分配 || 常用在等比例分配场景
|}

== 浏览器兼容性 ==
大多数现代浏览器完全支持`flex-basis`，但需注意：
* IE10/11对`content`值的支持不完善
* 旧版Android（4.3及以下）需要`-webkit-`前缀

== 最佳实践 ==
1. 优先使用`flex`简写（如`flex: 1 1 200px`）
2. 在需要固定比例分配时设置`flex-basis: 0`
3. 结合`min-width/max-width`防止内容溢出
4. 在列布局中明确设置`height: 0`以避免意外拉伸

== 常见误区 ==
* '''误区1'''：认为`flex-basis`总是优先于`width`
  * 实际：在flex容器中，`flex-basis`会覆盖`width`，除非设置`flex-basis: auto`
* '''误区2'''：忽略`flex-shrink`的影响
  * 实际：当空间不足时，即使设置了`flex-basis`，项目仍可能收缩

== 进阶技巧 ==
=== 动画应用 ===
`flex-basis`可添加过渡效果：
<syntaxhighlight lang="css">
.item {
  transition: flex-basis 0.3s ease;
}
.item:hover {
  flex-basis: 300px;
}
</syntaxhighlight>

=== 与min/max-width协作 ===
<syntaxhighlight lang="css">
.item {
  flex-basis: 50%;
  min-width: 200px; /* 防止过小 */
  max-width: 400px; /* 防止过大 */
}
</syntaxhighlight>

[[Category:CSS]]
[[Category:弹性盒布局]]

[[Category:编程语言]]
[[Category:CSS弹性盒布局]]