order和align-self可分别控制子元素的主轴顺序与交叉轴对齐方式。通过order调整显示次序，数值越小越靠前，默认为0；align-self则用于单个子项的垂直对齐，覆盖align-items的统一设置。两者结合可在响应式布局中实现灵活的内容重组与精准对齐，如移动端产品信息中调整图片、标题、价格的顺序与对齐方式，提升可读性与界面适应性。
在使用CSS Flex弹性盒子布局时，控制子元素的显示顺序和对齐方式是实现灵活页面结构的关键。通过 order 和 align-self 属性，我们可以精细调整每个子项的行为，而不影响整体布局结构。下面结合实际场景说明这两个属性的综合应用。
理解 order 控制子元素排列顺序
默认情况下，Flex容器中的子元素按照DOM顺序从左到右（或从上到下）排列。但通过设置 order 属性，可以改变它们在主轴上的显示次序。
order 的值为整数，数值越小越靠前，默认值为 0。负数也是合法的，会排在前面。
示例：假设有一个导航区域，希望“登录”按钮在小屏幕中显示在菜单之前：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.menu {
order: 1;
}
.login {
order: -1;
}
此时即使 .login 在HTML中位于后面，在界面上也会出现在左侧。
使用 align-self 调整单个子项的交叉轴对齐
Flex容器可以通过 align-items 统一设置所有子项在交叉轴上的对齐方式，但如果某个子项需要特殊处理，就可以使用 align-self 覆盖默认行为。
常见取值包括：flex-start、center、flex-end、stretch、basis 等。
应用场景：在一个等高卡片布局中，多数内容居中对齐，但某一张卡片内的按钮需要底部对齐：
.card-container {
display: flex;
align-items: center; /* 全体居中 */
}
.special-card {
align-self: flex-end; /* 单独调整到底部 */
}
order 与 align-self 的协同使用
当需要同时调整顺序和垂直对齐时，两个属性可配合使用，适用于响应式设计中的内容重组。
比如移动端展示产品信息时，图片希望后置，且文字描述顶部对齐，而价格部分底部对齐：
.product {
display: flex;
flex-direction: column;
align-items: stretch;
}
.title {
order: 1;
align-self: flex-start;
}
.price {
order: 2;
align-self: flex-end;
}
.image {
order: 3;
}
这样在小屏幕上内容按逻辑重新排序，并各自对齐到所需位置，提升可读性。
基本上就这些。合理运用 order 和 align-self，能让Flex布局更加动态和适应多端需求，不复杂但容易忽略细节。掌握它们的组合用法，有助于构建更智能的用户界面。
