CSS弹性项目[编辑 | 编辑源代码]

CSS弹性项目（Flex Items）是CSS弹性盒布局（Flexbox）中的核心组成部分，指直接包含在弹性容器（Flex Container）内的子元素。弹性项目通过弹性盒模型提供的属性进行灵活排列、对齐和尺寸调整，适用于构建响应式布局。

基本概念[编辑 | 编辑源代码]

弹性项目的行为由其父容器（通过display: flex或display: inline-flex定义）和项目自身的属性共同控制。以下是关键特性：

默认沿主轴（Main Axis）排列，方向由flex-direction决定（行或列）。
可通过flex-grow、flex-shrink和flex-basis调整尺寸。
支持通过align-self覆盖容器的对齐方式。

弹性项目属性[编辑 | 编辑源代码]

以下是控制弹性项目的主要属性：

`order`[编辑 | 编辑源代码]

定义项目的排列顺序，数值越小越靠前。默认值为0。

.item {
  order: 2; /* 默认0，此项目将后移 */
}

`flex-grow`[编辑 | 编辑源代码]

定义项目在剩余空间中的放大比例。默认值为0（不放大）。

.item {
  flex-grow: 1; /* 占据剩余空间 */
}

`flex-shrink`[编辑 | 编辑源代码]

定义项目在空间不足时的缩小比例。默认值为1（允许缩小）。

.item {
  flex-shrink: 0; /* 禁止缩小 */
}

`flex-basis`[编辑 | 编辑源代码]

定义项目的初始大小。默认值为auto（参考内容尺寸）。

.item {
  flex-basis: 200px; /* 初始宽度200px */
}

`flex`（简写）[编辑 | 编辑源代码]

合并flex-grow、flex-shrink和flex-basis。常用值：

flex: 1 → 1 1 0
flex: auto → 1 1 auto

`align-self`[编辑 | 编辑源代码]

覆盖容器的align-items设置，控制单个项目的交叉轴对齐方式。

.item {
  align-self: center; /* 垂直居中 */
}

代码示例[编辑 | 编辑源代码]

以下示例展示弹性项目的实际应用：

<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>

<style>
.container {
  display: flex;
  gap: 10px;
}
.item1 { flex: 1; background: #ff9; }
.item2 { flex: 2; align-self: flex-end; background: #9f9; }
.item3 { flex: 1; order: -1; background: #99f; }
</style>

输出效果： 1. Item 3因order: -1排在最左侧。 2. Item 2宽度是其他项目的两倍（flex: 2）且底部对齐。 3. 剩余空间按flex-grow比例分配。

实际应用场景[编辑 | 编辑源代码]

导航栏[编辑 | 编辑源代码]

弹性项目可轻松实现自适应导航菜单：

.nav {
  display: flex;
}
.nav-item {
  flex: 1; /* 均分宽度 */
  text-align: center;
}

卡片布局[编辑 | 编辑源代码]

控制卡片在不同屏幕尺寸下的行为：

.card {
  flex: 1 0 250px; /* 最小宽度250px，允许增长 */
}

视觉化模型[编辑 | 编辑源代码]

数学基础[编辑 | 编辑源代码]

弹性项目的最终尺寸计算涉及以下公式（主轴方向为行时）： $最终宽度 = flex-basis + (\frac{flex-grow}{\sum flex-grow} \times 剩余空间)$

浏览器兼容性[编辑 | 编辑源代码]

所有现代浏览器均支持弹性项目属性。对于旧版浏览器（如IE10），需添加-ms-前缀。

最佳实践[编辑 | 编辑源代码]

优先使用flex简写属性。
避免滥用order，可能影响可访问性。
结合min-width/max-width限制弹性项目尺寸。

参见[编辑 | 编辑源代码]

CSS弹性盒布局（父概念）
CSS网格布局（替代方案）