移动端 Flex 布局中元素底部对齐为何不生效
检查子元素的交叉轴 margin 是否为 auto，因为当 margin 为 auto 时 align-self 属性会被忽略。
检查子元素交叉轴 margin 属性
在 Flex 布局中，子元素的对齐行为受 align-self 属性控制，但存在一个特殊情况：当子元素的交叉轴 margin 为 auto 时，该属性会被忽略。这意味着即使设置了 align-self: flex-end 或 align-self: end，元素也不会对齐到容器的底部。这是 CSS Box Alignment 规范中定义的行为，用于处理自动 margin 的布局逻辑。在移动端开发中，如果希望元素底部对齐，必须确保其交叉轴 margin 不是 auto 值。
排查时，首先检查子元素的 margin 属性。如果设置了 margin-bottom: auto 或 margin-top: auto（取决于交叉轴方向），align-self 将无法生效。可以通过移除这些自动 margin 值，或者显式设置其他 margin 值来解决问题。例如，将 margin-bottom 设置为固定像素值或百分比，确保其不为 auto，从而允许 align-self 属性正常工作。
确认 align-self 属性的生效条件
align-self 属性仅在子元素交叉轴 margin 不为 auto 时生效。如果 margin 为 auto，浏览器会优先处理 margin 的自动伸缩行为，导致对齐属性被覆盖。这一规则适用于 Flexbox 和 Grid 布局，但在不同布局模式下行为可能略有差异。在移动端开发中，如果发现元素未按预期对齐，应首先检查 margin 属性是否符合生效条件。
验证时，可以在浏览器开发者工具中查看子元素的 computed style，确认 margin 值是否为 auto。如果发现 margin 为 auto，可以尝试调整布局策略，例如使用 padding 替代 margin，或者重新计算布局逻辑。此外，如果子元素使用了绝对定位，其 margin 计算方式可能与普通流布局不同，这也可能导致对齐失效。
排查布局模式与浏览器兼容性
align-self 属性在 Flexbox 和 Grid 布局中均可使用，但其行为受布局模式影响。在 Flexbox 中，它控制交叉轴对齐；在 Grid 中，它控制网格区域内的对齐。在移动端开发中，如果使用 Grid 布局，需确保 align-self 的应用场景正确。此外，该属性自 2015 年起在主流浏览器中广泛可用，但在某些旧版移动浏览器中可能存在支持差异。
检查浏览器兼容性时，可以使用 CSS 前缀或回退方案，确保在所有移动设备上都能正常显示。例如，为 align-self 添加 -webkit- 前缀，或者设置 fallback 值。如果目标设备不支持该属性，可以改用其他对齐方式，如使用 padding 或 transform 属性实现类似效果。
验证对齐效果与布局调整
完成上述排查后，可以通过实际测试验证对齐效果。在浏览器中调整子元素的 margin 和 align-self 属性，观察元素是否按预期对齐。如果问题仍未解决，可以尝试调整容器的对齐方式，如使用 align-items 属性控制整体对齐。此外，使用浏览器开发者工具的布局视图，可以直观查看元素的实际尺寸和位置，帮助定位问题。
如果元素仍然未对齐，可能需要重新审视布局逻辑。例如，检查容器的高度是否明确，子元素是否具有固有尺寸，或者是否存在其他干扰因素如 min-height 或 max-height 属性。通过逐步排查这些因素，可以确保元素正确对齐。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。