CSS place-content پراپرتی

ਸ਼ਰਤ ਅਤੇ ਵਰਤੋਂ

place-content ਗਤੀਸ਼ੀਲ ਬੋਕਸ (flexbox) ਅਤੇ ਗ੍ਰਿੱਡ (grid) ਸੈਟਅੱਪ ਲਈ ਪ੍ਰਤੀਯੋਗੀ ਹੈ ਅਤੇ ਹੇਠ ਲਿਖੇ ਪ੍ਰਤੀਯੋਗੀਆਂ ਦਾ ਸ਼ਰਤ ਹੈ:

ਜੇਕਰ place-content ਪ੍ਰਤੀਯੋਗੀ ਦੋ ਮੁੱਲ ਹਨ:

place-content: start center;
  • align-content ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਮੁੱਲ 'start' ਹੈ
  • justify-content ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਮੁੱਲ 'center' ਹੈ

ਜੇਕਰ place-content ਪ੍ਰਤੀਯੋਗੀ ਉਨ੍ਹਾਂ ਵਿੱਚ ਇੱਕ ਮੁੱਲ ਹੈ:

place-content: end;
  • ਤਾਂ align-content ਅਤੇ justify-content ਪ੍ਰਤੀਯੋਗੀਆਂ ਦਾ ਮੁੱਲ 'end' ਹੋਵੇ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਸਪੱਸ਼ਟ ਕਰੋ ਕਿ ਗਤੀਸ਼ੀਲ ਕੰਟੇਨਰ ਦੇ ਨਾਲੋਂ ਗਤੀਸ਼ੀਲ ਹੋਵੇ ਅਤੇ ਇੱਕਸੁਰਤਾ ਵਿੱਚ ਹੋਵੇ ਅਤੇ ਹੋਰ ਗਤੀਸ਼ੀਲ ਪ੍ਰੋਜੈਕਟਸ ਦਰਮਿਆਨ ਬਰਾਬਰ ਦੀ ਦੂਰੀ ਹੋਵੇ:

#container {
  display: flex;
  place-content: end space-between;
}

亲自试一试

例子 2：网格布局

块方向上的额外空间均匀分布在每个网格项目周围，且网格项目在行内方向上居中对齐：

#container {
  display: grid;
  place-content: space-around center;
}

亲自试一试

CSS 语法

place-content: normal|value|initial|inherit;

属性值

值 描述
normal

默认值。取决于布局上下文。

等同于不为 align-content 和 justify-content 设置属性值。
stretch

网格：如果未设置大小，则网格项目会拉伸以填满网格容器。

弹性盒：如果弹性项目在交叉轴上未指定大小，则会在交叉轴上拉伸以填满弹性容器。
start 将项目对齐到容器的开始位置。
end 将项目对齐到容器的结束位置。
center 将项目对齐到容器的中心位置。
space-between 在容器的两个轴上均匀分布可用空间，使项目之间的间距相等。
space-around 在容器的两个轴上均匀分布可用空间，使每个项目周围的间距相等。
space-evenly 在容器的两个轴上均匀分布项目。
overflow-alignment

'safe'：如果内容溢出，则将项目对齐设置为 'start'。

'unsafe'：无论项目内容是否溢出，都保持对齐值不变。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： normal
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.placeContent="end space-around"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
59.0 79.0 53.0 11.0 46.0

相关页面

教程：CSS 网格布局

教程：CSS 弹性盒布局

参考：سی ایس ایس ایلائن کنٹین اپریشن

参考：CSS justify-content ਪ੍ਰਾਪਰਟੀ

参考：HTML DOM alignContent ਪ੍ਰਾਪਰਟੀ