CSS place-self eigenschap

Definitie en gebruik

place-self het attribuut wordt gebruikt om een enkele rasteritem uit te lijnen en is een afkorting van de volgende attributen:

Als het attribuut place-self twee waarden heeft:

place-self: start center;
  • de waarde van het attribuut align-self is 'start'
  • de waarde van het attribuut justify-self is 'center'

Als het attribuut place-self maar één waarde heeft:

place-self: end;
  • dan zijn de waarden van de attributen align-self en justify-self 'end'

Voorbeeld

Voorbeeld 1

Stel een enkele rasteritem zowel in de richting van het blok als in de richting van de regel uitlijnend aan de eindpositie:

#myDiv {
  place-self: end;
}

亲自试一试

Voorbeeld 2: Schrijfmodus

wanneer de <div>-element writing-mode Wanneer de waarde van het attribuut 'vertical-rl' ingesteld is, verplaatst de cel van het raster in de richting van het blok van de onderkant naar de linkerkant, en in de richting van de regel van de rechterkant naar de onderkant:

#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'：无论项目内容是否溢出，都保持对齐值
baseline alignment 元素与父元素的基线对齐。
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

相关页面

Handleiding:CSS grid layout

Handleiding:CSS flexbox layout

Referentie:CSS align-self Eigenschap

Referentie:CSS justify-self eigenschap

Referentie:CSS writing-mode eigenschap