html中place作用,CSS place-self属性用法及代码示例

CSS place-self属性是align-self和justify-self属性的简写。 CSS中的简写属性意味着您可以在单个属性中设置多个属性值。在此，place-self属性可以保存align-self和justify-self属性的值。

用法:

place-self:align-self-property-value justify-self-property-value

属性值：该属性接受align-items和justify-items属性值可以产生的所有可能的组合值。

auto:如果项目没有父项，则使用此属性。然后，此属性用于定义项目的绝对位置。

normal:此属性取决于当前的布局模式。

start:此属性用于从容器的开头对齐弹性项目。

end:此属性用于从容器的末端对齐弹性项目。

flex-start:此属性用于在flex容器的开始处显示行。

flex-end:此属性用于在flex容器的末尾显示柔性线。

center:此属性用于将弹性项目与容器的中心对齐。

self-start:此属性用于将与项目齐平的项目包装到对齐容器中。

self-end:此属性用于将与项目齐平的项目包装到对齐容器中。

space-evenly:此属性定义位置，它们之间具有相等的间距，但距角的间距不同。

stretch:此属性定义拉伸的线以占用flex容器的剩余空间。它是默认值。

以下示例说明了CSS place-self属性：

范例1：

HTML

CSS place-self Property

h1 {

color:green;

}

article {

background-color:black;

display:grid;

grid-auto-rows:40px;

grid-gap:5px;

width:200px;

}

/* Using different values

with the place-self property */

span:nth-child(2) {

place-self:start center;

}

span:nth-child(3) {

place-self:center start;

}

article span {

background-color:orange;

color:white;

margin:1px;

text-align:center;

}

article,

span {

padding:6px;

border-radius:5px;

}

GeeksforGeeks

CSS place-self Property

HTML

CSS

Bootstrap

JavaScript

输出：

范例2：

HTML

CSS place-self Property

h1 {

color:green;

}

article {

background-color:black;

display:grid;

grid-auto-rows:40px;

grid-gap:5px;

width:200px;

}

/* Using different values

with the place-self property */

span:nth-child(2) {

place-self:self-start;

}

span:nth-child(3) {

place-self:self-end;

}

article span {

background-color:orange;

color:white;

margin:1px;

text-align:center;

}

article,

span {

padding:6px;

border-radius:5px;

}

GeeksforGeeks

CSS place-self Property

HTML

CSS

Bootstrap

JavaScript

输出：