css align-self CSS align-self 属性

css align-self

align-self 是 CSS Flexible Box Layout Module Level 1 中的一个属性，它允许开发者在 flex 容器中的单个项目上设置对齐方式。它可以覆盖 flex 容器中的 align-items 属性，从而使某些项目具有不同的对齐方式。

.container {
    display: flex;
    align-items: center; 
}
.item1 { 
    align-self: flex-start;  
} 

align-self 的属性值可以是 auto、flex-start、flex-end、center、baseline 或 stretch。auto 将使用父容器的 align-items 属性；flex-start 和 flex-end 表示将子元素沿着起始位置或末尾位置对齐；center 表示将子元素沿水平或垂直方向的中心对齐；baseline 表示将子元素沿文本的基准行对齐；stretch 表示将子元素拉伸到与容器一样大小。

CSS align-self 属性

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;