place-self
Baseline 广泛可用 *
place-self CSS 简写属性允许您同时在块级和行内方向上对单个项目进行对齐（即 align-self 和 justify-self 属性）。此属性适用于块级盒、绝对定位盒和网格项目。如果第二个值不存在，则第一个值也用于第二个值。
试一试
place-self: stretch center;
place-self: center start;
place-self: start end;
place-self: end center;
<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: 220px;
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;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
/* Positional alignment */
place-self: auto center;
place-self: normal start;
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: anchor-center;
/* Baseline alignment */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;
/* Global values */
place-self: inherit;
place-self: initial;
place-self: revert;
place-self: revert-layer;
place-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大小的，则其尺寸会等量增加（而不是按比例），同时仍遵守max-height/max-width（或等效功能）施加的约束，以便所有auto大小项目的总尺寸沿交叉轴精确填充对齐容器。 anchor-center-
对于锚点定位元素，将项目在块级和行内方向上与关联锚点元素的中心对齐。请参阅使用
anchor-center在锚点上居中。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 块级盒、绝对定位盒和网格项目 |
| 继承性 | 否 |
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 离散 |
正式语法
place-self =
<'align-self'> <'justify-self'>?
<align-self> =
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? <self-position> |
anchor-center |
dialog
<justify-self> =
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
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
示例
基本演示
在下面的示例中，我们有一个 2x2 的网格布局。最初，网格容器的 justify-items 和 align-items 值为 stretch（默认值），这导致网格项目拉伸以占据其单元格的整个宽度。
然后，第二个、第三个和第四个网格项被赋予不同的 place-self 值，以展示它们如何覆盖默认放置。这些值使网格项只与其内容宽度/高度一样宽/高，并在其单元格的块级和行内方向上对齐在不同的位置。
HTML
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
<span>Fourth</span>
</article>
CSS
html {
font-family: "Helvetica", "Arial", sans-serif;
letter-spacing: 1px;
}
article {
background-color: red;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 80px;
grid-gap: 10px;
margin: 20px;
width: 300px;
}
span:nth-child(2) {
place-self: start center;
}
span:nth-child(3) {
place-self: center start;
}
span:nth-child(4) {
place-self: end;
}
article span {
background-color: black;
color: white;
margin: 1px;
text-align: center;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
结果
规范
| 规范 |
|---|
| CSS Box Alignment Module Level 3 # place-self-属性 |
浏览器兼容性
加载中…