Sifat place-self CSS
- Rujukan: Halaman sebelumnya
- Halaman berikutnya pointer-events
Definisi dan Penggunaan
place-self
Properti ini digunakan untuk menarik objek grid tunggal, adalah singkatan dari berikut ini properti:
Jika properti place-self memiliki dua nilai:
place-self: start center;
- Nilai properti align-self adalah 'start'
- Nilai properti justify-self adalah 'center'
Jika properti place-self hanya memiliki satu nilai:
place-self: end;
- Nilai properti align-self dan justify-self adalah 'end'
Contoh
Contoh 1
Letakkan objek grid tunggal untuk diatur di kedua arah blok dan baris untuk diatur ke posisi akhir:
#myDiv { place-self: end; }
Contoh 2: Mod Tulisan
Ketika elemen <div> writing-mode Apabila nilai properti diatur kepada 'vertical-rl', posisi akhir sel grid di arah blok bergerak dari bawah ke kiri, dan posisi akhir di arah baris bergerak dari kanan ke bawah:
#contianer { display: grid; writing-mode: vertical-rl; } #myDiv { place-self: end; }
例子 3:弹性盒布局
place-self
属性也可以用于弹性盒布局项目,但 justify-self
的第二个值将被忽略,因为它在弹性盒布局中不适用:
#contianer { display: flex; } #myDiv { place-self: end stretch; }
CSS 语法
place-self: auto|value|initial|inherit;
属性值
值 | 描述 |
---|---|
auto | 默认。元素的默认 place-self 值。 |
normal |
取决于布局上下文,但对于未设置大小的网格项目,其行为类似于网格布局中的 'stretch'。 如果设置了大小,属性值的行为类似于 'start'。 |
stretch | 如果未设置大小,则拉伸以填满网格单元格。 |
start | 在行内方向和块方向上将项目对齐到开始位置。 |
left | 在行内方向上将项目对齐到左侧,作为 justify-self 属性的值。 |
center | 将项目对齐到中心。 |
end | 在行内方向和块方向上将项目对齐到结束位置。 |
right | 在行内方向上将项目对齐到右侧,作为 justify-self 属性的值。 |
overflow-alignment |
'safe':如果内容溢出,则将项目对齐设置为 'start' 'unsafe':无论项目内容是否溢出,都保持对齐值 |
基线对齐 | 元素与父元素的基线对齐。 |
initial | 将此属性设置为其默认值。参阅 initial。 |
inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
默认值: | auto |
---|---|
继承性: | 否 |
动画制作: | 不支持。请参阅:动画相关属性。 |
版本: | CSS3 |
JavaScript 语法: | object.style.placeSelf="end stretch" |
浏览器支持
表格中的数字表示首个完全支持该属性的浏览器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
页面相关
Tata letak grid CSSCSS 网格布局
Tata letak grid CSSPanduan:
Tata letak kerangka CSSAtribut align-self CSS
Tata letak kerangka CSSCSS justify-self 属性
Tata letak kerangka CSSSifat writing-mode CSS
- Rujukan: Halaman sebelumnya
- Halaman berikutnya pointer-events