在使用 CSS Flexbox 进行页面布局时，“align-self” 属性是非常有用的一个属性，它可以用于设置某个单独的 flex 子项在交叉轴上的对齐方式。本文将对 “align-self” 属性进行详细介绍，包括它的用法、示例代码以及常见的应用场景。
用法
通过设置 “align-self” 属性，我们可以对一个 flex 子项在交叉轴上进行单独的对齐。这个属性可以用于单独的 flex 子项元素上，并设置其值为 “auto”、“flex-start”、“flex-end”、“center”、“baseline” 或 “stretch”。这些值都与 “align-items” 属性中的值相同，区别是 “align-items” 是作用于所有 flex 子项，而 “align-self” 只作用于单个 flex 子项。
在没有设置 “align-self” 属性的情况下，默认值为 “auto”，即使用和父元素 “align-items” 相同的值。而在使用 “align-self” 属性后，会覆盖 “align-items” 属性对该元素的交叉轴对齐方式设置。
示例代码
以下是一个使用 “align-self” 属性的示例代码：
<div class="container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ------- ------- ------ - ------ ------ ------- ------ ----------------- ----- ------- --- ----- ----- - ------ - ----------- ----------- - ------ - ----------- --------- - ------ - ----------- ------- -
上面的代码中，我们使用 “align-self” 属性对三个 flex 子项进行了单独的对齐方式设置。其中，第一个子项（item1）使用了 “flex-start” 对齐方式，第二个子项（item2）使用了 “flex-end” 对齐方式，第三个子项（item3）使用了 “center” 对齐方式。
常见应用场景
垂直居中一个 flex 子项
在 “align-items” 属性无法居中一个元素时，我们可以使用 “align-self” 属性来单独居中一个 flex 子项。例如，当使用 “align-items: flex-start” 时，我们可以将某个元素的 “align-self” 设置为 “center” 来实现垂直居中。
以下是一个示例代码：
<div class="container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ----------- ------- ------ - ------ - ----------- ------- -
上面的代码中，我们将父元素 “align-items” 设置为 “flex-start” 时，使用 “align-self” 属性将第二个子项垂直居中。
控制 flex 子项的对齐方式
在使用 “align-items” 属性无法满足需求时，我们可以使用 “align-self” 属性单独控制某个 flex 子项的对齐方式。
以下是一个示例代码：
<div class="container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ------ - ----------- ----------- - ------ - ----------- --------- - ------ - ----------- ------- -
上面的代码中，我们使用 “align-self” 属性控制了三个 flex 子项的对齐方式。
总结
通过本文的介绍，我们了解了 “align-self” 属性在 CSS Flexbox 布局中的用法、示例代码以及常见应用场景。它可以用于单独的 flex 子项，用来控制该子项在交叉轴上的对齐方式，对于一些无法使用 “align-items” 属性满足需求的场景， “align-self” 属性可以提供一种便捷的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6f3d7f6b2d6eab3249817