CSS place-items ਪ੍ਰਤੀਯੋਗਿਤਾ

تعلیم اور استعمال

place-items نمائش کا وارض گرید لائج آوت کا استعمال ہوتا ہے، یہ ایک وارض کا سیمبل ہے:

• align-items
• justify-items

اگر place-items نمائش دو وارض کا:

place-items: start center;

• align-items نمائش کا وارض 'start':
• justify-items نمائش کا وارض 'center':

اگر place-items نمائش یونیورس کا ولو ایک وارض:

place-items: end;

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

实例

例子 1

将每个 <div> 元素在其网格单元格的行内方向和块方向上都放置在开始位置：

#container {
  place-items: start;
}

亲自试一试

例子 2：书写模式

当网格容器的 writing-mode 属性值设置为 'vertical-rl' 时，块方向的结束位置从底部移动到左侧，行内方向的结束位置从右侧移动到底部：

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3：弹性盒布局

justify-items 属性对弹性盒布局不适用。因此，如果在弹性盒布局中使用 place-items 属性，justify-items 的值（即第二个值）会被忽略。

#wrapper {
  place-items: stretch end;
}

亲自试一试

CSS 语法

place-items: normal legacy|value|initial|inherit;

属性值

技术细节

浏览器支持

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

相关页面

ਟੂਟਰੀਅਲ:CSS ਗ੍ਰਿੱਡ ਲੇਆਊਟ

ਟੂਟਰੀਅਲ:CSS ਫਲੈਕਸੀਬਲ ਬੈਕਸ ਲੇਆਊਟ

ਸਲਾਹਦਾਰੀਃسی ایس ایس ایلائن آئٹمز اپریئٹ

ਸਲਾਹਦਾਰੀਃCSS justify-items کی属性

ਸਲਾਹਦਾਰੀਃCSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ