html एक फ्लेक्सबॉक्स में आइटम को सभी ऊर्ध्वाधर और क्षैतिज स्थान ले लें



css image (1)

मेरे पास वर्तमान में एक कंटेनर के भीतर तत्व हैं, जिनमें से प्रत्येक में एक छवि है मैं फ्लेक्सबॉक्स का उपयोग करके इन चार कोनों या कंटेनर में इन वितरित करना चाहता हूं। छवियाँ क्षैतिज रूप से सही वितरण कर रही हैं, लेकिन सभी उपलब्ध स्थान को लंबवत रूप से नहीं लेना

इस समय यह कैसा दिखता है:

यहां मेरा मार्कअप है:

<div class="container">
    <div class="photo">
        <img src="https://placehold.it/180">
    </div>
    <div class="photo">
        <img src="https://placehold.it/180">
    </div>
    <div class="photo">
        <img src="https://placehold.it/180">
    </div>
    <div class="photo">
        <img src="https://placehold.it/180">
    </div>
</div>

और मेरे (एस) सीएसएस:

div.container {
    width: 405px;
    height: 405px;
    background: rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    div.photo {
        width: 180px;
        height: 180px;
        overflow: hidden;
        border-radius: 5px;

        img {
            height: 100%;
        }                   
    }
}

align-content: space-between लागू align-content: space-between ऐसा करने के लिए आपके flexbox align-content: space-between (यह निश्चित है कि आपके पास ऊर्ध्वाधर संरेखण के लिए पर्याप्त उपलब्ध स्थान है) - नीचे डेमो देखें:

संरेखित सामग्री की संपत्ति फ्लेक्स-रैप संपत्ति के व्यवहार को संशोधित करती है यह संरेखित-वस्तुओं के समान है, लेकिन फ्लेक्स आइटम को संरेखित करने के बजाय, यह फ्लेक्स लाइनों को संरेखित करता है (स्रोत: डब्ल्यू 3 स्कूल )

div.container {
  width: 405px;
  height: 405px;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
div.container div.photo {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 5px;
}
img {
  height: 100%;
}
<div class="container">
  <div class="photo">
    <img src="https://placehold.it/180">
  </div>
  <div class="photo">
    <img src="https://placehold.it/180">
  </div>
  <div class="photo">
    <img src="https://placehold.it/180">
  </div>
  <div class="photo">
    <img src="https://placehold.it/180">
  </div>
</div>





flexbox