CSS justify-content - फ्लेक्स आइटम्स को हॉरिजॉन्टल संरेखित करें

justify-content प्रॉपर्टी फ्लेक्स आइटम्स को मेन एक्सिस पर संरेखित करती है जब आइटम्स सभी उपलब्ध स्थान नहीं घेरते। डिफ़ॉल्ट flex-direction: row में यह हॉरिजॉन्टल संरेखण करती है।

उदाहरण: justify-content: center

4 आइटम्स (प्रत्येक 100px) = 400px कुल। कंटेनर चौड़ा है, इसलिए आइटम्स केंद्र में समूहित होते हैं।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: blue;
      justify-content: center;
      gap: 10px;
      padding: 20px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
    }
  </style>
</head>
<body>
  <h1>क्विज़</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

justify-content मान त्वरित संदर्भ

रिस्पॉन्सिव संरेखण

.nav {
  display: flex;
  justify-content: flex-start;  /* मोबाइल: बाएं */
}
@media (min-width: 768px) {
  .nav {
    justify-content: space-between;  /* डेस्कटॉप: बाएं-दाएं */
  }
}

कॉलम दिशा में

flex-direction: column में justify-content **वर्टिकल** संरेखण नियंत्रित करता है।