📌  相关文章
📜  HTML | DOM 样式 alignSelf 属性(1)

📅  最后修改于: 2023-12-03 15:01:12.633000             🧑  作者: Mango

HTML | DOM 样式 alignSelf 属性

在 HTML 中，使用样式（style）属性可以为元素设置 CSS 样式。而 DOM 中的样式（style）属性则用于以编程方式控制元素的样式。

其中，alignSelf 属性用于指定 flex 元素在交叉轴上的对齐方式，其可用取值包括：

  • auto：默认值，表示继承父元素的 align-items 属性
  • flex-start：表示交叉轴的起点对齐
  • flex-end：表示交叉轴的终点对齐
  • center：表示交叉轴的中点对齐
  • baseline：表示基线对齐（仅适用于文本）
  • stretch：表示拉伸以占据整个交叉轴空间

注意，仅对设置了 display:flex 或 display:inline-flex 的元素有效。

语法格式
align-self: auto|flex-start|flex-end|center|baseline|stretch
示例代码

下面是一个使用 alignSelf 属性的简单示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
}

.item {
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: yellow;
}

.item:nth-child(2) {
  align-self: flex-end;
}

.item:nth-child(3) {
  align-self: center;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>

上面的代码中，我们将一个包含三个元素的容器设置为了 flex 布局。然后，我们使用 nth-child 选择器为其中的第二个元素设置了 align-self 属性为 flex-end，为第三个元素设置了 align-self 属性为 center。该示例的效果如下图所示：

自定义对齐方式示例

以上就是关于 HTML | DOM 样式 alignSelf 属性的介绍。