CSS ప్లేస్‌కంటెంట్ అట్రిబ్యూట్

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

place-content సామర్థ్య పెట్టీ (flexbox) మరియు గ్రిడ్ సజ్జుకువులకు ఉపయోగించే అంశం, క్రింది అంశాల సరళీకరణ ఉంది:

ఇక్కడ place-content అంశంకి రెండు విలువలు ఉన్నాయి ఉంటే:

place-content: start center;
  • align-content అంశం మొదటి విలువ ఉంది:
  • justify-content అంశం మధ్యమ విలువ ఉంది:

ఇక్కడ place-content అంశంకి ఒక విలువ ఉంది ఉంటే:

place-content: end;
  • align-content మరియు justify-content అంశాలు ముగ్గురు అనుగుణంగా ఉన్నాయి:

ఉదాహరణ

ఉదాహరణ 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
జావాస్క్రిప్ట్ సంకేతం: object.style.placeContent="end space-around"

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

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

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

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

పాఠ్యం:CSS గ్రాడ్ బక్స్ స్థానాలు

పాఠ్యం:CSS ఎలాస్త బక్స్ స్థానాలు

సూచనలు：సిఎస్ఎస్ అలైన్-కంటెంట్ అట్రిబ్యూట్

సూచనలు：CSS justify-content అట్రిబ్యూట్

సూచనలు：HTML DOM alignContent అట్రిబ్యూట్