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

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

justify-items అట్రిబ్యూట్ గ్రిడ్ కంటైనర్ పై సెట్ చేయబడుతుంది, అనుసరించే పిల్ల ఎల్మెంట్స్ (గ్రిడ్ అంశాలు) ను రాక్షపాతం దిశలో జాస్టిఫై చేస్తుంది.

ఇంగ్లీష్ పేజీలకు, రాక్షపాతం దిశ నుండి రాక్షపాతం దిశకు ఉంటుంది, బ్లాక్ దిశ నుండి బ్లాక్ దిశకు ఉంటుంది.

ఈ అట్రిబ్యూట్ యొక్క జాస్టిఫై ప్రభావాన్ని సాధించడానికి, గ్రిడ్ అంశం నిలకడిన వర్టికల్ ఆర్లైన్ దిశలో చివరి మీద ఉండే అంతరాన్ని పెంచాలి.

సూచన:బ్లాక్ దిశలో గాని రాక్షపాతం దిశలో గాని గ్రిడ్ అంశాలను జాస్టిఫై చేయడానికి, ఉపయోగించండి: align-items అట్రిబ్యూట్ అట్రిబ్యూట్లు.

మరింత చూడండి:

CSS పాఠ్యక్రమం:CSS Grid

CSS పాఠ్యక్రమం:CSS లోకేషనింగ్

CSS పరిశీలన పుస్తకం:align-items అట్రిబ్యూట్

CSS పరిశీలన పుస్తకం:direction అట్రిబ్యూట్

CSS పరిశీలన పుస్తకం:grid అట్రిబ్యూట్

CSS పరిశీలన పుస్తకం:grid-template-columns అట్రిబ్యూట్

CSS పరిశీలన పుస్తకం:justify-self అట్రిబ్యూట్

CSS పరిశీలన పుస్తకం:position అట్రిబ్యూట్

CSS పరిశీలన పుస్తకం:writing-mode అట్రిబ్యూట్

ఉదాహరణ

ఉదాహరణ 1

ప్రతి గ్రిడ్ అంశం యొక్క గ్రిడ్ యూనిట్ ముగింపున వర్టికల్ ఆర్లైన్ దిశలో అనుకూలంగా జాస్టిఫై చేయండి:

#container {
  display: grid;
  justify-items: end;
}

亲自试一试

ఉదాహరణ 2: justify-items మరియు justify-self గా తోడ్పాటు

కంటైనర్ కుప్పించబడిన జాస్టిఫై పద్ధతి 'మధ్యలో' గా సెట్ చేయబడింది, గ్రిడ్ అంశం స్వయంగా 'కుడివైపు' గా సెట్ చేయబడింది. అట్రిబ్యూట్ విలువ 'right' స్వాధీనపడుతుంది:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

亲自试一试

ఉదాహరణ 3: అబ్సౌల్యూట్ లోకేషన్ గా సెట్ చేయబడిన గ్రిడ్ అంశం పై జాస్టిఫై-ఐటిమ్స్ సెట్ చేయండి

అబ్సౌల్యూట్ లోకేషన్ గా సెట్ చేయబడిన గ్రిడ్ అంశం యొక్క జాస్టిఫై-ఐటిమ్స్ ను 'కుడివైపు' గా సెట్ చేయండి:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

亲自试一试

ఉదాహరణ 4: writing-mode

నెట్‌వర్క్ కంటైనర్ ఎల్మెంట్ యొక్క writing-mode అట్రిబ్యూట్ విలువ వర్టికల్-ఆర్లైన్ గా సెట్ చేయబడినప్పుడు, రాక్షపాతం క్రిందకు ఉంటుంది. ఫలితంగా కంటైనర్ ప్రారంభం ఎడమ నుండి టాప్ కు కదులుతుంది, కంటైనర్ ముగింపు కుడి నుండి బోతుంది:

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

亲自试一试

例子 5：direction

网格容器元素的 direction 属性值设置为“rtl”时，行内方向是从右到左。结果是容器的起点从左侧移到右侧，容器的末端从右侧移到左侧：

#container {
  justify-items: start;
  direction: rtl;
}

亲自试一试

CSS 语法

justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignmentబేసైన్ అలిగ్న్మెంట్

లక్షణాన్ని పారంపర్యం గా అంగీకరించండి | ఇన్హెరిట్ చేయండి;

విలువ వివరణ
లెగసీ

అప్రమేయ విలువ

లెగసీ ప్రారంభించినప్పుడు మాత్రమే, justify-self విలువ 'auto' కలిగిన గ్రిడ్ అంశం గ్రిడ్ కంటైనర్ యొక్క justify-items లక్షణాన్ని పారంపర్యం గా అంగీకరిస్తుంది.

ఇది హెచ్ఎంఎల్ యొక్క <center> అంశం మరియు align లక్షణం యొక్క పారంపర్య అలిగ్న్మెంట్ ప్రక్రియను అమలు చేయడానికి ఉద్దేశించబడింది.
normal సాంకేతిక వ్యవస్థ ఆధారంగా ఉంటుంది, కానీ గ్రిడ్ లేఆఉట్ యొక్క 'stretch' వంటిది.
stretch ఇన్లైన్-సైజ్ (వెడల్పు) అమర్చబడలేకపోతే, గ్రిడ్ సెల్లు నిండడానికి స్ట్రెచ్ చేస్తుంది.
start రెండు వరుసల అంతరం లో ప్రాంతం లో ప్రాజెక్ట్ ను అలిగ్న్మెంట్ చేస్తుంది.
left ప్రాజెక్ట్ ను ఎడమపక్కన అలిగ్న్మెంట్ చేస్తుంది.
center ప్రాజెక్ట్ ను మధ్యలో అలిగ్న్మెంట్ చేస్తుంది.
end రెండు వరుసల అంతరం లో చివరి ప్రాంతం లో ప్రాజెక్ట్ ను అలిగ్న్మెంట్ చేస్తుంది.
right ప్రాజెక్ట్ ని కుడిపక్కన అలిగ్న్మెంట్ చేస్తుంది.
overflow-alignment
  • 'safe' అనేది ప్రాజెక్ట్ విషయం అయినా ప్రాజెక్ట్ అవగాహనను 'start' కు మారుస్తుంది.
  • 'unsafe' అనేది ప్రాజెక్ట్ విషయం అయినా అలిగ్న్మెంట్ విలువను ఉంచుతుంది.
బేసైన్ అలిగ్న్మెంట్ అంశం మరియు పేర్పడ్డ అంశం యొక్క బేసైన్ పైన ఉంచండి.
ఇనిశియల్ ఈ లక్షణాన్ని అప్రమేయ విలువకు అంగీకరించండి. చూడండి: ఇనిశియల్.
ఇన్హెరిట్ ఈ లక్షణాన్ని తన పేర్పడ్డ అంశం నుండి పారంపర్యం గా అంగీకరించండి. చూడండి: ఇన్హెరిట్.

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

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

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

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

క్రోమ్ ఎంజెల్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
క్రోమ్ ఐఈ / ఎంజెల్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
57.0 16.0 45.0 10.1 44.0