align-self
Baseline 广泛可用 *
align-self 这个 CSS 属性会覆盖网格或伸缩盒子项的 align-items 值。在网格布局中，它用来在网格区域内对齐项目。在伸缩盒子布局中，它用来在交叉轴上对齐项目。
试一试
align-self: stretch;
align-self: center;
align-self: start;
align-self: end;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">One</div>
<div>Two</div>
<div>Three</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
display: grid;
width: 200px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 80px;
grid-gap: 10px;
}
.example-container > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
此属性不适用于块级盒子和表格单元格。如果一个伸缩盒子项的交叉轴外边距为 auto，则 align-self 会被忽略。
语法
/* Keyword values */
align-self: auto;
align-self: normal;
/* Positional alignment */
/* align-self does not take left and right values */
align-self: center; /* Put the item around the center */
align-self: start; /* Put the item at the start */
align-self: end; /* Put the item at the end */
align-self: self-start; /* Align the item flush at the start */
align-self: self-end; /* Align the item flush at the end */
align-self: flex-start; /* Put the flex item at the start */
align-self: flex-end; /* Put the flex item at the end */
align-self: anchor-center;
/* Baseline alignment */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */
/* Overflow alignment */
align-self: safe center;
align-self: unsafe center;
/* Global values */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: revert-layer;
align-self: unset;
值
auto-
计算值为父元素的
align-items值。 normal-
此关键字的效果取决于我们所处的布局模式
- 在绝对定位布局中，该关键字在可替换的绝对定位盒子上表现得像
start，而在所有其他绝对定位盒子上表现得像stretch。 - 在绝对定位布局的静态位置上，该关键字的表现行为类似于
stretch。 - 对于弹性盒子元素，该关键字的表现行为类似于
stretch。 - 对于网格项目，这个关键字产生的行为类似于
stretch，但对于具有宽高比或固有尺寸的盒子，它的行为类似于start。 - 该属性不适用于块级盒子和表格单元格。
- 在绝对定位布局中，该关键字在可替换的绝对定位盒子上表现得像
self-start-
使项目与对齐容器的边缘对齐，该边缘对应于项目在交叉轴上的起始侧。
self-end-
使项目与对齐容器的边缘对齐，该边缘对应于项目在交叉轴上的结束侧。
flex-start-
伸缩项目的交叉轴起始外边距边缘与该行的交叉轴起始边缘对齐。
flex-end-
伸缩项目的交叉轴结束外边距边缘与该行的交叉轴结束边缘对齐。
center-
伸缩项目的外边距盒子在其所在行的交叉轴上居中。如果项目的交叉轴尺寸大于伸缩容器，它将在两个方向上平均溢出。
baseline、first baseline、last baseline-
指定参与第一条或最后一条基线对齐：将盒的第一条或最后一条基线集的对齐基线，与基线共享组中所有盒的共享第一条或最后一条基线集中的相应基线对齐。
first baseline的回退对齐方式是start，last baseline的是end。 stretch-
如果项目的交叉轴尺寸是
auto，则其使用的尺寸被设置为尽可能接近填满容器所需的长度，同时尊重项目的宽度和高度限制。如果项目不是自动调整尺寸的，此值将回退到flex-start，如果容器的align-content是first baseline（或baseline）或last baseline，则回退到self-start或self-end。 anchor-center-
对于锚点定位的元素，此值将项目在块方向上与关联的锚点元素中心对齐。参见使用
anchor-center在锚点上居中。 safe-
如果项目的尺寸溢出对齐容器，则该项目将改为按对齐模式为
start的方式对齐。 unsafe-
无论项目和对齐容器的相对尺寸如何，给定的对齐值都会被遵守。
正式定义
| 初始值 | auto |
|---|---|
| 应用于 | 伸缩项目、网格项目和绝对定位的盒子 |
| 继承性 | 否 |
| 计算值 | 对于绝对定位的元素，auto 计算为自身；对于所有其他盒子，计算为父元素上 align-items 的计算值（减去任何旧版关键字）；如果盒子没有父元素，则为 start。其行为取决于布局模型，如 justify-self 所述。否则为指定值。 |
| 动画类型 | 离散 |
正式语法
align-self =
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? <self-position> |
anchor-center |
dialog
<baseline-position> =
[ first | last ]? &&
baseline
<overflow-position> =
unsafe |
safe
<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end
示例
HTML
<section>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
</section>
CSS
section {
display: flex;
align-items: center;
height: 120px;
background: beige;
}
div {
height: 60px;
background: cyan;
margin: 5px;
}
div:nth-child(3) {
align-self: flex-end;
background: pink;
}
结果
规范
| 规范 |
|---|
| CSS Box Alignment Module Level 3 # align-self 属性 |
| CSS 弹性盒子布局模块第 1 级 # align-items 属性 |
浏览器兼容性
加载中…