编辑“︁CSS弹性项目”︁（章节）

== 弹性项目属性 ==

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

=== <code>order</code> ===
定义项目的排列顺序，数值越小越靠前。默认值为0。

<syntaxhighlight lang="css">
.item {
  order: 2; /* 默认0，此项目将后移 */
}
</syntaxhighlight>

=== <code>flex-grow</code> ===
定义项目在剩余空间中的放大比例。默认值为0（不放大）。

<syntaxhighlight lang="css">
.item {
  flex-grow: 1; /* 占据剩余空间 */
}
</syntaxhighlight>

=== <code>flex-shrink</code> ===
定义项目在空间不足时的缩小比例。默认值为1（允许缩小）。

<syntaxhighlight lang="css">
.item {
  flex-shrink: 0; /* 禁止缩小 */
}
</syntaxhighlight>

=== <code>flex-basis</code> ===
定义项目的初始大小。默认值为<code>auto</code>（参考内容尺寸）。

<syntaxhighlight lang="css">
.item {
  flex-basis: 200px; /* 初始宽度200px */
}
</syntaxhighlight>

=== <code>flex</code>（简写） ===
合并<code>flex-grow</code>、<code>flex-shrink</code>和<code>flex-basis</code>。常用值：
* <code>flex: 1</code> → <code>1 1 0</code>
* <code>flex: auto</code> → <code>1 1 auto</code>

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

<syntaxhighlight lang="css">
.item {
  align-self: center; /* 垂直居中 */
}
</syntaxhighlight>