justify-content प्रॉपर्टी

justify-content प्रॉपर्टी फ्लेक्स ब्लॉक्स के लिए मुख्य अक्ष के साथ और ग्रिड्स के लिए हॉरिजॉन्टल अक्ष के साथ एलिमेंट्स का अलाइनमेंट सेट करती है। यह पैरेंट एलिमेंट पर एप्लाई होती है।

सिंटैक्स

cssसिलेक्टर {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

वैल्यूज

डिफॉल्ट वैल्यू: flex-start.

उदाहरण . flex-start वैल्यू

अभी अक्ष बाएं से दाएं की ओर डायरेक्टेड है (यह flex-direction: row करता है), और ब्लॉक्स बाईं ओर चिपके हुए हैं:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . flex-end वैल्यू

इस उदाहरण में अक्ष भी बाएं से दाएं की ओर डायरेक्टेड है, लेकिन ब्लॉक्स दाईं ओर चिपके हुए हैं, क्योंकि justify-content को flex-end वैल्यू में सेट किया गया है:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . center वैल्यू

अभी ब्लॉक्स सेंटर में होंगे चाहे मुख्य अक्ष की डायरेक्शन कुछ भी हो:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . space-between वैल्यू

ब्लॉक्स मुख्य अक्ष के साथ डिस्ट्रीब्यूटेड हैं, जिसमें पहला एलिमेंट अक्ष की शुरुआत से चिपका हुआ है, और आखिरी - अंत तक:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . space-around वैल्यू

ब्लॉक्स मुख्य अक्ष के साथ डिस्ट्रीब्यूटेड हैं, जिसमें पहले ब्लॉक और अक्ष की शुरुआत के बीच, आखिरी ब्लॉक और अक्ष के अंत के बीच भी वही गैप है, जो बाकी ब्लॉक्स के बीच है। हालांकि, गैप्स जुड़ जाते हैं और दो ब्लॉक्स के बीच की दूरी दोगुनी हो जाती है, बजाय ब्लॉक और अक्ष की शुरुआत/अंत के गैप के:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . center वैल्यू. अक्ष नीचे की ओर

मुख्य अक्ष की डायरेक्शन बदलते हैं, flex-direction को column वैल्यू में सेट करके:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . space-between वैल्यू. अक्ष नीचे की ओर

अभी ब्लॉक्स वर्टिकली इक्वली डिस्ट्रीब्यूट होंगे:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . हॉरिजॉन्टल अक्ष की शुरुआत के साथ अलाइनमेंट (पंक्तियाँ) ग्रिड में

आइए हमारे एलिमेंट्स का अलाइनमेंट हॉरिजॉन्टल अक्ष की शुरुआत के साथ सेट करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

उदाहरण . हॉरिजॉन्टल अक्ष के सेंटर के साथ अलाइनमेंट ग्रिड में

और अब हमारे एलिमेंट्स का अलाइनमेंट हॉरिजॉन्टल अक्ष के सेंटर के साथ सेट करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

उदाहरण . हॉरिजॉन्टल अक्ष के अंत के साथ अलाइनमेंट ग्रिड में

आइए हमारे एलिमेंट्स का अलाइनमेंट हॉरिजॉन्टल अक्ष के अंत के साथ सेट करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

यह भी देखें