align-self允许子元素覆盖父容器的align-items设置，实现独立对齐。常用值包括auto（继承父级）、flex-start（顶部/起始边对齐）、flex-end（底部/末尾对齐）、center（居中）、baseline（文本基线对齐）和stretch（拉伸填充）。它适用于局部对齐调整、响应式设计及避免CSS冗余，是构建灵活布局的关键属性。
align-self属性是CSS中一个非常实用的工具，它允许你单独控制弹性盒子（Flexbox）或网格（Grid）布局中某个子元素在交叉轴上的对齐方式，而无需修改其父容器的
align-items或
align-content设置。简单来说，它赋予了子元素“特立独行”的能力，让它们可以不随大流，拥有自己的对齐规则。
解决方案
使用
align-self属性非常直观。你只需要在需要单独调整对齐方式的子元素上直接设置该属性即可。它的值与父容器的
align-items属性值基本相同，包括
auto、
flex-start、
flex-end、
center、
baseline和
stretch。
举个例子，假设你有一个Flex容器，并且希望所有的子元素都居中对齐，除了其中一个子元素需要顶部对齐。
<div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item special-item">Item 2</div> <div class="flex-item">Item 3</div> </div>
.flex-container {
display: flex;
height: 200px; /* 确保有足够的空间展示对齐效果 */
border: 1px solid #ccc;
align-items: center; /* 默认所有子元素垂直居中 */
}
.flex-item {
width: 80px;
background-color: lightblue;
margin: 5px;
padding: 10px;
text-align: center;
}
.special-item {
align-self: flex-start; /* 只有这个子元素顶部对齐 */
background-color: lightcoral;
}在这个例子中，
flex-container设置了
align-items: center;，这意味着所有
flex-item默认都会在交叉轴（这里是垂直方向）上居中。但通过在
.special-item上设置
align-self: flex-start;，我们成功地覆盖了父级的设置，让它单独顶部对齐了。这种灵活性在构建复杂布局时显得尤为重要，避免了为了一两个元素的特殊对齐而修改整个父容器的规则，从而保持了CSS的模块化和可维护性。
立即学习“前端免费学习笔记（深入）”；
align-self
与align-items
有什么区别？何时选择使用align-self
？
align-self和
align-items都是CSS Flexbox和Grid布局中用于控制子元素在交叉轴上对齐方式的关键属性，但它们作用的层级和目的有所不同。
align-items是作用在父容器上的属性。当你将
display: flex或
display: grid应用于一个元素时，
align-items就可以在该父容器上设置，它会影响所有直接子元素在交叉轴上的默认对齐方式。比如，
align-items: center;会让所有子元素垂直居中（如果主轴是水平的）。它设定的是一个全局规则。
而
align-self则作用在子元素自身上。它的核心作用是覆盖父容器
align-items所设定的默认对齐规则，为单个子元素提供独立的对齐控制。如果父容器没有设置
align-items，或者
align-items的值是
stretch，那么
align-self: auto;（默认值）的行为就等同于
stretch。但一旦你明确指定了
align-self的值，这个子元素就会按照自己的设置来对齐，不再受父容器
align-items的约束。
何时选择使用align-self
？
我个人在使用这两个属性时，通常会遵循一个原则：“先整体，后局部”。
-
全局默认对齐： 如果你的大多数子元素都需要相同的对齐方式，那么毫无疑问，在父容器上设置
align-items
是最简洁高效的做法。它建立了布局的基准。 -
个别元素例外： 当你发现某个或某几个子元素需要与众不同的对齐方式时，
align-self
就成了救星。例如，一个侧边栏中的某个按钮需要固定在底部，而其他内容则顶部对齐；或者在一个卡片列表中，所有卡片内容都顶部对齐，但其中一张卡片的图片需要垂直居中。在这种情况下，为这些“例外”的子元素单独设置align-self
，比修改父容器的align-items
并为其他元素再单独设置回来要优雅得多，也更易于维护。 -
避免CSS冗余： 如果你为了让一个子元素特殊对齐，而不得不修改父容器的
align-items
，然后又通过其他方式（比如margin-top/bottom）去调整其他子元素，那代码就会变得非常混乱和脆弱。align-self
直接解决了这个问题，它提供了一个精准的、针对性强的解决方案。 -
响应式设计： 在响应式布局中，你可能需要在不同的屏幕尺寸下，改变某些元素的对齐方式。通过媒体查询，你可以轻松地为特定的子元素在不同断点下应用不同的
align-self
值，而不会影响到其他元素的对齐逻辑。
总而言之，
align-items是制定规则的“家长”，而
align-self则是允许子元素“自主选择”的“特权”。合理地搭配使用，能够让你的Flexbox和Grid布局既清晰又灵活。
align-self
的常用值有哪些？它们分别代表什么对齐效果？
align-self的常用值与
align-items非常相似，它们决定了子元素在交叉轴上的具体对齐行为。理解这些值的含义，是灵活运用
align-self的关键。
auto
(默认值): 这是align-self
的初始值。它意味着子元素会继承其父容器的align-items
属性值。如果父容器没有设置align-items
，或者align-items
的值是stretch
，那么auto
的行为就等同于stretch
。所以，当你想让子元素跟随父容器的对齐规则时，可以显式设置为auto
，或者干脆不设置，因为这是默认行为。-
flex-start
: 使子元素的顶部边缘（在垂直交叉轴时）或左侧边缘（在水平交叉轴时）与交叉轴的起始线对齐。简单来说，就是把元素“顶”到交叉轴的起始端。.item-start { align-self: flex-start; } -
flex-end
: 使子元素的底部边缘（在垂直交叉轴时）或右侧边缘（在水平交叉轴时）与交叉轴的结束线对齐。这会将元素“推”到交叉轴的末尾。.item-end { align-self: flex-end; } -
center
: 将子元素在交叉轴上居中对齐。它的中心点会与父容器交叉轴的中心点对齐。这是实现垂直居中（当主轴水平时）或水平居中（当主轴垂直时）的常用方式。.item-center { align-self: center; } -
baseline
: 这个值稍微有些特别。它会使子元素的文本基线与父容器中所有子元素的基线对齐。这对于包含不同字体大小或行高文本的元素非常有用，可以确保文本在视觉上保持一致的水平线。如果元素没有基线（比如它不包含文本），它通常会回退到flex-start
。.item-baseline { align-self: baseline; } -
stretch
: 这是align-items
的默认值，也是align-self: auto
在父容器没有明确设置align-items
时的行为。它会使子元素拉伸，以填充父容器在交叉轴上的可用空间。前提是子元素没有设置固定的高度（当交叉轴是垂直时）或宽度（当交叉轴是水平时）。如果子元素有固定的尺寸，stretch
就不会生效。.item-stretch { align-self: stretch; /* 会拉伸填充，除非有固定高度/宽度 */ }
理解这些值，并结合Flexbox的主轴和交叉轴方向，你就能精确控制每一个子元素在布局中的位置。我经常会用
center来做垂直居中，
flex-start或
flex-end来固定某个元素到边缘，而
stretch则用于那些需要自适应高度的卡片布局。
在实际项目中，align-self
有哪些高级应用场景和潜在的兼容性问题？
align-self虽然看似简单，但在实际项目中有不少高级
