How do I maintain constant image height? Stuck in flexbox? - html

Question

I am trying to create flexbox with different image heights and width. I want the break points as
max-width: 640px; ------->Only one column
max-width: 860px; -------->Two columns only
greater than: 860px;-------->Three column only
What I am messing with? Why it is becoming ugly while shrinking window?I am losing 3 column of image even before window size reach 860px breakpoint. What else can I do?
After window size reaches to 860px it is working fine, but until than it is becoming ugly.
I want my image height not be changed. Let it be as it is !
.container {
width: 100%;
height: 1000px;
display: flex;
flex-direction: column;
background: green;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.box {
width: 30%;
border: 2px solid red;
margin: 8px;
}
img {
width: 100%;
height: auto;
}
#media screen and (max-width: 860px) {
.container {
background-color: red;
height: 1100px;
}
.box {
width: 46%;
}
}
#media screen and (max-width: 640px){
.container {
background-color: yellowgreen;
height: auto;
flex-direction: row;
}
.box {
width: 100%;
}
}
<div class="container">
<div class="box">
<img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
</div>
<div class="box">
<img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
</div>
<div class="box">
<img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
</div>
<div class="box">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
</div>
</div>

Answer 1

In this cas, I would use CSS column-count and CSS grid.
Just an example with your code:
.container {
column-count: 3;
column-gap: 10px;
background: green;
padding: 10px;
}
#media (max-width: 640px) {
.container {
column-count: 1;
}
}
#media (min-width: 641px) and (max-width: 840px) {
.container {
column-count: 2;
}
}
img {
max-width: 100%;
display: block;
}
.box {
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 10px;
break-inside: avoid;
border: 2px solid red;
}
<div class="container">
<div class="box">
<img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
</div>
<div class="box">
<img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
</div>
<div class="box">
<img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
</div>
<div class="box">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
</div>
</div>

Answer 2

However for this layout using grid is the best way, but I tried to find a way by flex. For "flex-direction: column;" height is important so you should set a height that can't contain more than 2 images. I did it with "height: 70vw;"
.container {
width: 100%;
height: 70vw;
display: flex;
flex-direction: column;
background: green;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.box {
width: 30%;
border: 2px solid red;
margin: 8px;
}
img {
width: 100%;
height: auto;
}
#media screen and (max-width: 860px) {
.container {
background-color: red;
height: 1120px;
}
.box {
width: 46%;
}
}
#media screen and (max-width: 640px){
.container {
background-color: yellowgreen;
height: auto;
flex-direction: row;
}
.box {
width: 100%;
}
}
<div class="container">
<div class="box">
<img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
</div>
<div class="box">
<img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
</div>
<div class="box">
<img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
</div>
<div class="box">
<img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
</div>
<div class="box">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
</div>
</div>