CSS justify-content: flex-start से फ्लेक्स आइटम्स को शुरुआत में संरेखित करें

CSS justify-content प्रॉपर्टी का flex-start मान (डिफ़ॉल्ट) फ्लेक्स आइटम्स को मुख्य अक्ष की शुरुआत (लेफ्ट, जब flex-direction: row हो) पर संरेखित करता है। यह आइटम्स को एक साथ पैक करता है बिना किसी अतिरिक्त जगह के।

उदाहरण

नीचे दिए गए उदाहरण में, justify-content: flex-start का उपयोग करके फ्लेक्स आइटम्स को कंटेनर के बाईं ओर संरेखित किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: red;
      justify-content: flex-start;
    }
    .mycontainer > div {
      background-color: orange;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      width: 100px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

justify-content मान सारांश:

• flex-start (डिफ़ॉल्ट): शुरुआत में पैक
• flex-end: अंत में पैक
• center: केंद्र में
• space-between: बीच में जगह
• space-around: चारों ओर जगह
• space-evenly: समान जगह हर जगह

लेखन मोड प्रभाव: RTL (राइट-टू-लेफ्ट) भाषाओं में flex-start दाईं ओर होता है।