目录

CSS place-self 属性

❮上一节完整的CSS参考下一节❯

示例

在块和内联方向的末尾对齐单个网格项：

#myDiv {
place-self: end;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个place-selfproperty 用于对齐各个网格项，并且是以下属性的简写属性：

align-self
justify-self

如果 place-self 属性有两个值：

place-self：起始中心；
- align-self 属性值为 'start'
- justify-self 属性值为 'center'

如果 place-self 属性只有一个值：

地点自我：结束；
- align-self 和 justify-self 属性值都是“end”

展示演示❯

默认值：	汽车
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.placeSelf="end stretch"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
place-self	59.0	79.0	45.0	11.0	46.0

CSS 语法

place-self: auto| value|initial|inherit;

属性值

Value	Description	Demo
auto	Default. The element's default place-self value.	Demo ❯
normal	Dependant on layout context, but similar to 'stretch' for grid layout for grid items when size is not set. If size is set, the property value behaves lik 'start'.	Demo ❯
stretch	Stretches to fill the grid cell if size is not set.	Demo ❯
start	Align items at the start in the inline and block directions	Demo ❯
left	Align items to the left in the inline direction, as the justify-self property value.	Demo ❯
center	Align items to the center	Demo ❯
end	Align items at the end in the inline and block directions	Demo ❯
right	Align items to the right in the inline direction, as the justify-self property value.	Demo ❯
overflow-alignment	'safe' sets alignment of the item to 'start' if the content overflows 'unsafe' keeps the alignment value regardless of wether or not the item content overflows
baseline alignment	The element is aligned with the baseline of the parent.	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

书写模式

随着writing-mode<div>元素的属性值设置为'vertical-rl'，块方向网格单元的末端从下向左移动，内联方向网格单元的末端从右向左移动底部：

#contianer {
display: grid;
writing-mode: vertical-rl;
}

#myDiv {
place-self: end;
}

亲自试一试 »

弹性盒

这个place-self属性也可用于 Flexbox 项目，但第二个值用于justify-self将被忽略，因为它不适用于 Flexbox：

#contianer {
display: flex;
}

#myDiv {
place-self: end stretch;
}

亲自试一试 »

相关页面

CSS教程：CSS 网格

CSS教程：CSS 弹性盒

CSS 自我对齐属性：CSS 自我对齐属性

CSS justitfy-self 属性：CSS justify-self 属性

CSS 写入模式属性：CSS 书写模式属性

❮上一节完整的CSS参考下一节❯