css align-self控制单元格垂直偏移

align-self用于控制单个弹性子元素在交叉轴上的对齐方式，可覆盖父容器的align-items设置。其常用取值包括auto（继承父级）、flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、baseline（基线对齐）和stretch（拉伸填充）。例如当容器设置align-items: center时，为某个子元素设置align-self: flex-end可使其单独向下对齐。使用前提是父容器为Flex布局（display: flex或inline-flex），且交叉轴方向受flex-direction影响；若子元素有固定高度，stretch可能无法完全生效。合理使用align-self能精确调整个别元素的垂直位置而不影响整体布局。

在 CSS Flexbox 布局中，align-self 属性用于控制单个弹性子元素（即“单元格”）在其交叉轴上的对齐方式，也就是实现垂直方向的偏移或对齐。它会覆盖父容器中 align-items 的设置，只作用于当前子元素。

align-self 可用值及效果

以下是 align-self 支持的主要取值及其表现：

• auto：默认值，继承父容器的 align-items 设置。
• flex-start：元素顶部对齐（在垂直方向上靠上）。
• flex-end：元素底部对齐（在垂直方向上靠下）。
• center：元素在交叉轴居中对齐。
• baseline：元素基线对齐。
• stretch：拉伸元素以填满容器（除非有固定尺寸）。

实际使用示例

假设有一个 Flex 容器，内部包含三个子元素，我们想让中间那个元素向下对齐：

<div style="display: flex; align-items: center; height: 200px; border: 1px solid #ccc;">
  <div style="background: #ffcccc; padding: 10px;">顶部对齐</div>
  <div style="background: #ccffcc; padding: 10px; align-self: flex-end;">我往下偏移了</div>
  <div style="background: #ccccff; padding: 10px;">仍居中</div>
</div>

在这个例子中：

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

立即学习“前端免费学习笔记（深入）”；

• 容器设置了 align-items: center，所以所有子项默认垂直居中。
• 第二个子项添加了 align-self: flex-end，因此它会单独向下对齐。

注意事项

要使 align-self 生效，必须满足以下条件：

• 父容器是 Flex 布局（display: flex 或 display: inline-flex）。
• 交叉轴方向取决于 flex-direction。例如，当主轴为 row 时，垂直方向就是交叉轴，align-self 控制的就是垂直对齐。
• 如果子元素设置了固定高度或 min-height，stretch 效果可能不会完全拉伸。

以上就是css align-self控制单元格垂直偏移的详细内容，更多请关注php中文网其它相关文章！