CSS: Flexbox 项目属性
flex 容器属性控制"整体"行为，而项目属性则控制每个子元素"个体"的行为。通过项目属性，你可以控制每个项目的排列顺序、尺寸伸缩和对齐方式。
1. 项目属性一览
| 属性 | 作用 | 默认值 |
|---|---|---|
order |
控制排列顺序 | 0 |
flex-grow |
伸展比例（有剩余空间时） | 0 |
💡 flex: 1 的含义：
flex: 1 其实是 flex-grow: 1 的简写。它表示"尽量占满剩余空间"，等分布局里最常用。如果有两个项目都设了 flex: 1，它们各占 50%。
| flex-shrink | 收缩比例（空间不足时） | 1 |
| flex-basis | 初始尺寸 | auto |
| flex | 以上三个的简写 | 0 1 auto |
| align-self | 单独对齐方式 | auto |
2. order：排序
改变项目的视觉顺序，不影响 HTML 结构：
▶ 示例
HTML
<style>
.item:nth-child(1) {
order: 3; /* 排到第三 */
}
.item:nth-child(2) {
order: 1; /* 排到第一 */
}
.item:nth-child(3) {
order: 2; /* 排到第二 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
<div class="item">项目元素，表示列表或布局中的一个项</div>
<div class="item">项目元素，表示列表或布局中的一个项</div>
规则：
- 数值越小越靠前
- 默认所有项目的
order为 0 - 可以为负数（比 0 小就会排在所有默认项目前面）
3. flex-grow：伸展比例
当容器有剩余空间时，项目按比例瓜分剩余空间：
▶ 示例
HTML
<style>
.item {
flex-grow: 1; /* 所有项目等分剩余空间 */
}
.item:nth-child(2) {
flex-grow: 2; /* 第二个项目分两倍空间 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
<div class="item">项目元素，表示列表或布局中的一个项</div>
规则：
- 默认值为 0（不伸展）
- 所有项目的 flex-grow 值加起来是分母，每个项目的值是分子
- 适合制作等宽布局或按比例分配空间的场景
4. flex-shrink：收缩比例
当容器空间不足时，项目按比例缩小：
▶ 示例
HTML
<style>
.item {
flex-shrink: 1; /* 默认，可以收缩 */
}
.item:first-child {
flex-shrink: 2; /* 收缩速度是其他项目的两倍 */
}
.item:last-child {
flex-shrink: 0; /* 不收缩，保持原宽度 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
<div class="item">项目元素，表示列表或布局中的一个项</div>
<div class="item">项目元素，表示列表或布局中的一个项</div>
规则：
- 默认值为 1（空间不足时收缩）
- 值为 0 时不收缩
- 值越大，收缩越快
5. flex-basis：初始尺寸
设置在分配剩余空间之前，项目在主轴上的基础尺寸：
▶ 示例
HTML
<style>
.item {
flex-basis: 200px; /* 基础宽度200px */
flex-basis: 50%; /* 父容器宽度的50% */
flex-basis: auto; /* 默认，由内容或width决定 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
注意：在 flex 布局中，flex-basis 的优先级高于 width。如果同时设置了 width 和 flex-basis，浏览器优先使用 flex-basis。
6. flex：弹性简写
flex 是 flex-grow、flex-shrink、flex-basis 的简写：
▶ 示例
HTML
<style>
.item {
flex: 1; /* 等价于 flex: 1 1 0% */
flex: 1 1 auto; /* 默认值 */
flex: 0 0 200px; /* 固定 200px，不伸展不收缩 */
flex: 1 0 200px; /* 基础200px，可伸展不收缩 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
(1) 常用取值
▶ 示例
HTML
<style>
.item {
flex: 1; /* 均分剩余空间，最常用 */
flex: none; /* 不伸缩，相当于 0 0 auto */
flex: auto; /* 相当于 1 1 auto */
flex: 0 0 50%; /* 固定占据50%宽度 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
建议：优先使用 flex 简写属性，而不是分开写 grow/shrink/basis，因为浏览器会相应的推算相关值。
7. align-self：单独对齐
覆盖容器的 align-items，让某个项目与众不同：
▶ 示例
HTML
<style>
.container {
align-items: flex-start; /* 整体顶部对齐 */
}
.item:nth-child(2) {
align-self: center; /* 第二个项目垂直居中 */
}
.item:nth-child(3) {
align-self: flex-end; /* 第三个项目底部对齐 */
}
.item:nth-child(4) {
align-self: stretch; /* 第四个项目拉伸 */
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
<div class="item">项目元素，表示列表或布局中的一个项</div>
<div class="item">项目元素，表示列表或布局中的一个项</div>
<div class="item">项目元素，表示列表或布局中的一个项</div>
常用值：auto、flex-start、flex-end、center、stretch、baseline
8. 综合示例
▶ 示例
HTML
<style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
gap: 10px;
}
/* 等分宽度 */
.item {
flex: 1;
height: 100px;
background: #3498db;
}
/* 第二个项目占两倍宽度，并单独底部对齐 */
.item:nth-child(2) {
flex: 2;
align-self: flex-end;
height: 80px;
}
/* 最后一个项目不伸缩，固定宽度 */
.item:last-child {
flex: 0 0 150px;
order: -1; /* 排到最前面 */
}
.flex-container-item {
background: #e8f4f8;
border: 1px solid #3498db;
padding: 16px;
margin: 4px;
border-radius: 4px;
text-align: center;
}
</style>
<div class="flex-container">
<div class="flex-container-item">Flex container item</div>
<div class="flex-container-item">Flex container item</div>
<div class="flex-container-item">Flex container item</div>
</div>
❓ 常见问题
Q flex: 1 是什么意思？
A flex: 1 是
flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 的简写，表示"尽可能占满剩余空间"。多个项目都设 flex: 1 时，它们会等分容器宽度。Q order 属性会影响 DOM 顺序吗？
A 不会。order 只改变视觉排列顺序，DOM 顺序不变。屏幕阅读器仍然按 DOM 顺序朗读，所以不要用 order 做只有视觉意义的排序——会影响无障碍体验。
Q align-self 和 align-items 谁优先级高？
A align-self 优先级更高。align-self 作用于单个项目，覆盖父容器 align-items 的设置。比如父容器设
align-items: center 居中对齐，但某个子元素可以设 align-self: flex-start 单独靠上。📖 小节
- Flexbox 的项目属性让你能精细控制每个子元素的排列顺序和尺寸
flex: 1是最常用的等分写法，order可以在不改 HTML 的情况下调整视觉顺序，align-self则让个别元素可以"特立独行"- 记住：容器属性管整体，项目属性管个体
📝 作业
- 创建一个 flex 容器，内含 5 个项目。使用
order属性让第 3 个项目显示在最前面，第 1 个项目显示在最后面。 - 使用
flex-grow实现"三栏等宽"布局，再让中间栏是两侧的两倍宽。 - 创建一个"固定侧栏 + 自适应内容"的布局：侧栏使用
flex: 0 0 250px，内容区使用flex: 1。 - 在一个容器中，让前两个项目顶部对齐，第三个项目底部对齐，使用
align-self实现。
