CSS place-items అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

place-items అట్రిబ్యూట్ గ్రిడ్ లేఆఉట్ కొరకు ఉపయోగించబడుతుంది, దానికి క్రింది అట్రిబ్యూట్ల సరళీకరణ:

ప్లేస్-ఐటెమ్స్ అట్రిబ్యూట్ రెండు విలువల కొరకు ఉన్నప్పుడు:

ప్లేస్-ఐటెమ్స్: స్టార్ట్ సెంటర్;
  • అలైన్-ఐటెమ్స్ అట్రిబ్యూట్ విలువ 'స్టార్ట్'
  • జస్టిఫై-ఐటెమ్స్ అట్రిబ్యూట్ విలువ 'సెంటర్'

ప్లేస్-ఐటెమ్స్ అట్రిబ్యూట్ ఒక విలువ కొరకు ఉన్నప్పుడు:

place-items: end;
  • 则 align-items 和 justify-items 属性的值均为 'end'

实例

例子 1

将每个

元素在其网格单元格的行内方向和块方向上都放置在开始位置：

#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;

属性值

值 描述
normal legacy

默认。元素的默认 place-items 值。

align-items 的默认值是 'normal'，justify-items 的默认值是 'legacy'。
baseline 项目定位在容器的基线上。
center 将项目对齐到网格单元格的中心。
end 将项目对齐到网格单元格的结束位置。
start 将项目对齐到网格单元格的开始位置。
stretch గ్రిడ్ ప్రాజెక్ట్ పరిమాణాన్ని నిర్ణయించకపోతే, గ్రిడ్ ప్రాజెక్ట్ పరికరాన్ని గ్రిడ్ కంటైనర్ను పూర్తి చేసేందుకు స్ట్రెచ్ చేస్తారు。
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు అందిస్తాయి. దయచేసి ఈ లింక్ ను సందర్శించండి: initial.
inherit ఈ లక్షణాన్ని తన పేర్వత కు నుండి అందుకుంటుంది. దయచేసి ఈ లింక్ ను సందర్శించండి: inherit.

సాంకేతిక వివరాలు

అప్రమేయ విలువ: normal legacy
పారంపర్యం కలిగిన లక్షణం: లేదు
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ లింక్ ను సందర్శించండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: CSS3
జావాస్క్రిప్ట్ సంకేతాలు: object.style.placeItems="stretch center"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న బ్రౌజర్ వెర్షన్ను సూచిస్తాయి。

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
59.0 79.0 45.0 11.0 46.0

సంబంధిత పేజీలు

教程：CSS 网格布局

教程：CSS 弹性盒布局

参考：సిఎస్ఎస్ అలైన్-ఐటమ్స్ అట్రిబ్యూట్

参考：CSS justify-items అట్రిబ్యూట్

参考：CSS వ్రాయింగ్-మోడ్ అట్రిబ్యూట్