css align-items align-self

### CSS 中 `align-items` 和 `align-self` 的使用方法与区别 #### 一、`align-items` 属性 `align-items` 是用于设置弹性容器（Flex Container）中所有子项（Flex Items）在交叉轴上的对齐方式。它的默认值为 `stretch`，表示如果子项未指定高度，则会拉伸以填满整个容器的高度。 以下是常见的取值及其含义： - **`stretch`**: 子项会被拉伸以适应容器的高度[^1]。 - **`center`**: 子项会在交叉轴上居中对齐。 - **`flex-start`**: 子项会对齐到交叉轴的起点位置。 - **`flex-end`**: 子项会对齐到交叉轴的终点位置。 - **`baseline`**: 子项会基于它们的内容基线进行对齐。 下面是一个简单的例子展示如何使用 `align-items`： ```css div { display: flex; align-items: center; /* 设置子项在交叉轴上居中 */ } ``` --- #### 二、`align-self` 属性 `align-self` 则是针对单个弹性子项（Flex Item），允许其单独调整自己的对齐方式，从而覆盖父级容器中的 `align-items` 值。这使得某些特定的子项可以在不改变其他兄弟节点的情况下实现不同的对齐效果。 当 `align-self` 取值为 `auto` 时，它实际上继承的是父元素的 `align-items` 值；如果没有显式的父级样式声明，则默认行为类似于 `stretch`[^4]。 常见取值说明如下： - **`auto`**: 继承自父级的 `align-items` 配置。 - **`center`, `flex-start`, `flex-end`, `baseline`**, etc.: 这些选项的作用同 `align-items` 类似，只是作用范围缩小到了单一项目级别之上[^2]。 示例代码片段展示了如何应用此特性来微调个别组件的位置关系： ```css div span:nth-child(2) { align-self: flex-end; /* 让第二个span靠右下角显示 */ } ``` --- #### 三、两者的主要差异对比分析 | 特性 | `align-items` | `align-self` | |---------------------|--------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------| | 应用对象 | 整体影响所有的直接子元素 | 单独应用于某个具体的子元素 | | 是否可被覆写 | 不可以直接修改某一项 | 能够独立设定并优先于全局规则 | | 默认状态下的表现形式 | 如果没有特别指明，默认采用`stretch`模式 | 当设成`auto`的时候等于沿用了来自上级定义好的那个参数 | 通过上述表格可以看出，在实际开发过程中合理运用这两个属性可以帮助我们更加灵活精确地控制页面布局结构内的各个组成部分之间的相对定位情况。 --- ### 总结 综上所述，虽然二者都涉及到 Flexbox 模型里的垂直方向排列机制方面的问题解决办法，但是由于适用场景不同所以各自有着不可替代的功能价值所在。理解清楚他们的工作原理以及相互之间可能存在的交互联系对于提高前端工程师编写高效简洁且易于维护管理的HTML/CSS文件具有重要意义。