CSS place-self లక్షణం

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

place-self అట్రిబ్యూట్ ఒక గ్రిడ్ ప్రాజెక్ట్ ను అనుకూలీకరించడానికి ఉపయోగిస్తారు, ఇది క్రింది అట్రిబ్యూట్ల సరళీకృత రూపం గా ఉంటుంది:

ఇక్కడ place-self అట్రిబ్యూట్ కేవలం రెండు విలువలు ఉన్నప్పుడు:

place-self: start center;
  • align-self అట్రిబ్యూట్ విలువ 'start'గా ఉంటుంది
  • justify-self అట్రిబ్యూట్ విలువ 'center'గా ఉంటుంది

ఇక్కడ place-self అట్రిబ్యూట్ కేవలం ఒక విలువ ఉన్నప్పుడు:

place-self: end;
  • అలాగే align-self మరియు justify-self అట్రిబ్యూట్ విలువలు 'end'గా ఉంటాయి

ఉదాహరణ

ఉదాహరణ 1

ఒకే గ్రిడ్ ప్రాజెక్ట్ బ్లాక్ దిశలో మరియు రోజ్ లో ముగింపు స్థానానికి సమాంతరంగా ఉంచండి:

#myDiv {
  place-self: end;
}

亲自试一试

ఉదాహరణ 2: వ్రాస్తు స్థితి

మూడు <div> ఎలమెంట్ యొక్క writing-mode అంతర్జాతి విలువ ను 'vertical-rl' గా సెట్ చేసినప్పుడు, గ్రిడ్ సెల్లు బ్లాక్ దిశలో ముగింపు స్థానం మూలల నుండి ఎడమ దిశకు కదిలి, రోజ్ లో ముగింపు స్థానం ముఖల నుండి క్రిందకు కదిలుతుంది:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

亲自试一试

例子 3：弹性盒布局

place-self 属性也可以用于弹性盒布局项目，但 justify-self 的第二个值将被忽略，因为它在弹性盒布局中不适用：

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

亲自试一试

CSS సంకేతాలు

place-self: auto|value|initial|inherit;

లక్షణ విలువ

విలువ వివరణ
auto మూల విలువ. ప్రాతిపదికన ప్లేస్ సెల్ఫ్ విలువ.
normal

అనుసరించే సాంకేతిక పరిస్థితికి అనుగుణంగా, కానీ సైజ్ లేకపోయిన గ్రిడ్ ప్రాజెక్ట్లకు గ్రిడ్ లేఆట్లో 'stretch' ప్రవర్తిస్తుంది.

సైజ్ సెట్ చేయబడినప్పుడు, లక్షణం విలువ బదులుగా 'start' ప్రవర్తిస్తుంది.
stretch సైజ్ లేకపోయినా, గ్రిడ్ సెల్లులో నింపేందుకు స్ట్రెచ్ చేయండి.
start నాటిక్ దిశలో మరియు బ్లాక్ దిశలో ప్రాజెక్ట్ను ప్రారంభ స్థానానికి అనుగుణంగా పొదుపు చేయండి.
left నాటిక్ దిశలో ప్రాజెక్ట్ను ఎడమకి అనుగుణంగా పొదుపు చేయండి, ఇది justify-self లక్షణం విలువగా ఉంటుంది.
center ప్రాజెక్ట్ను మధ్యలో అనుగుణంగా పొదుపు చేయండి.
end నాటిక్ దిశలో మరియు బ్లాక్ దిశలో ప్రాజెక్ట్ను అంతిమ స్థానానికి అనుగుణంగా పొదుపు చేయండి.
right నాటిక్ దిశలో ప్రాజెక్ట్ను కుడికి అనుగుణంగా పొదుపు చేయండి, ఇది justify-self లక్షణం విలువగా ఉంటుంది.
overflow-alignment

'safe' : అంతర్భాగం అధికంగా ఉండినప్పుడు, ప్రాజెక్ట్ అనుగుణ విలువను 'start'గా సెట్ చేయు

'unsafe' : ప్రాజెక్ట్ అంతర్భాగం అధికంగా ఉండకపోయినా, అనుగుణ విలువను కొనసాగించు
క్రమపద్ధతి అనుగుణంగా అనుభవం క్రమపద్ధతికి అనుగుణంగా అనుభవం తన ప్రాతిపదికన అనుసరించు.
initial ఈ లక్షణాన్ని తన మూల విలువకు సెట్ చేయండి. దయచేసి ఈ ప్రకారం చూడండి: initial.
inherit ఈ లక్షణాన్ని తన ప్రాతిపదికన అనుసరించు. దయచేసి ఈ ప్రకారం చూడండి: inherit.

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

మూల విలువ: auto
పారంతర్యం కార్యకలాపం: సంఖ్యలేదు
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ ప్రకారం చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: సిఎస్ఎస్ 3
జావాస్క్రిప్ట్ సంకేతాలు: object.style.placeSelf="end stretch"

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

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

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

ప్రసంగాలు

教程：CSS 网格布局

教程：CSS ఎలాస్టిక్ బాక్స్ లేఆఉట్

సూచనలు:CSS align-self అంశం

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

సూచనలు:CSS వ్రాయింగ్-మోడ్ అట్రిబ్యూట్