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

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

justify-content అట్రిబ్యూట్ (హోరిజంటల్) స్ప్యాస్ అనుసరించే ఎలాస్టిక్ కంటైనర్ అంతర్గత అంశాలను నిర్ణయిస్తుంది మరియు ప్రధాన అక్షంపై అన్ని లభించిన స్పేస్ కలిగి లేకపోతే.

సూచన:ఉపయోగించండి: align-items అట్రిబ్యూట్ అట్రిబ్యూట్లు వర్గాలు పెరిగిపోతుంది.

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

CSS ట్యూటోరియల్:CSS ఫ్లెక్స్ బాక్స్

CSS ట్యూటోరియల్:CSS Grid

CSS సూచనాల పుస్తకం:align-content అట్రిబ్యూట్

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

CSS సూచనాల పుస్తకం:align-self అంశం

HTML DOM సూచనాల పుస్తకం:justifyContent అంశం

ఉదాహరణ

కంటైనర్ మధ్యలో స్పాటిక్ ప్రాజెక్టులను జత పరచండి:

div {
  display: flex;
  justify-content: center;
}

స్వయంగా ప్రయత్నించండి

పేజీ కింద మరిన్ని TIY ఉదాహరణలను చూడండి.

CSS సంకేతం

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

అంశాల విలువ

విలువ వివరణ
flex-start అప్రమేయ విలువ. ప్రాజెక్టులు కంటైనర్ ప్రాంతంలో ప్రాంతంలో ఉన్నాయి.
flex-end ప్రాజెక్టులు కంటైనర్ చివరలో ఉన్నాయి.
center ప్రాజెక్టులు కంటైనర్ మధ్యలో ఉన్నాయి.
space-between ప్రాజెక్టులు పద్ధతి మధ్య అంతరాలు కలిగిన ఉంటాయి.
space-around ప్రాజెక్టులు పద్ధతి ముందు, పద్ధతి మధ్య మరియు పద్ధతి తర్వాత అంతరాలు కలిగిన ఉంటాయి.
initial ఈ అంశాన్ని అప్రమేయ విలువకు అమర్చండి. చూడండి: initial。
inherit ఈ అంశాన్ని తన పేర్పడిన ప్రాంతం నుండి పారస్పరిక లోటుపాటు చేయండి. చూడండి: inherit。

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

అప్రమేయ విలువ: flex-start
పారస్పరిక లోటుపాటు: లేదు
అనిమేషన్ తయారీ: మద్దతు లేదు. చూడండి:అనిమేషన్ సంబంధిత అంశాలు。
సంస్కరణ: CSS3
JavaScript సంకేతం: object.style.justifyContent="space-between"

మరిన్ని ఉదాహరణలు

ఉదాహరణ

కంటైనర్ ప్రాంతంలో ప్రాంతంలో స్పాటిక్ ప్రాజెక్టులను జత పరచండి (అప్రమేయం):

div {
  display: flex;
  justify-content: flex-start;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

కంటైనర్ చివరలో స్పాటిక్ ప్రాజెక్టులను జత పరచండి:

div {
  display: flex;
  justify-content: flex-end;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

పద్ధతి మధ్య అంతరాలు కలిగిన స్పాటిక్ ప్రాజెక్టులను ప్రదర్శించండి:

div {
  display: flex;
  justify-content: space-between;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ

పద్ధతి ముందు, పద్ధతి మధ్య మరియు పద్ధతి తర్వాత అంతరాలు కలిగిన స్పాటిక్ ప్రాజెక్టులను ప్రదర్శించండి:

div {
  display: flex;
  justify-content: space-around;
}

స్వయంగా ప్రయత్నించండి

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

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

ప్రత్యేకతలు -webkit- లేదా -moz- నంబర్లను ముందుగా వాడటానికి నియమించండి.

అంశం Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0