CSS के साथ फ्लेक्स लाइन्स को कंटेनर की शुरुआत में प्रदर्शित करें

align-content प्रॉपर्टी को flex-start मान के साथ उपयोग करके फ्लेक्स लाइन्स को क्रॉस अक्ष की शुरुआत में संरेखित किया जाता है। यह केवल तभी लागू होता है जब flex-wrap: wrap सेट हो और एक से अधिक लाइन हों।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        height: 300px; 
        background-color: blue; 
        align-content: flex-start; 
        flex-wrap: wrap; 
      } 
      .mycontainer > div { 
        background-color: orange; 
        text-align: center; 
        line-height: 60px; 
        font-size: 30px; 
        width: 100px; 
        margin: 5px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>कतार</h1> 
    <div class="mycontainer"> 
      <div>Q1</div> 
      <div>Q2</div> 
      <div>Q3</div> 
      <div>Q4</div> 
      <div>Q5</div> 
      <div>Q6</div> 
      <div>Q7</div> 
      <div>Q8</div> 
    </div> 
  </body> 
</html>

व्याख्या: कंटेनर की ऊंचाई 300px है, आइटम्स 60px ऊंचे हैं, इसलिए तीन लाइनें बनती हैं। align-content: flex-start लाइन्स को कंटेनर के शीर्ष पर पैक करता है। flex-end उन्हें नीचे, center बीच में, space-between समान अंतर के साथ, space-around चारों ओर समान अंतर के साथ रखता है।