如何保持恒定的图像高度？卡在弹性盒子里？

Question

我正在尝试创建具有不同图像高度和宽度的 flexbox。我希望断点为

 max-width: 640px; ------->Only one column
 max-width: 860px; -------->Two columns only
 greater than: 860px;-------->Three column only

我在搞什么鬼？为什么在缩小窗口时变得丑陋？即使在窗口大小达到 860px 断点之前，我也会丢失 3 列 的图像。我还可以做些什么？ 窗口大小达到 860px 后，它工作正常，但直到变得丑陋为止。

我希望我的图像高度不改变。就这样吧！

.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

在这种情况下，我会使用 CSS column-count 和 CSS grid。

只是您的代码示例：

.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

但是对于这种布局，使用网格是最好的方式，但我试图通过 flex 找到一种方式。对于“弹性方向：列；”高度很重要，因此您应该设置一个不能包含超过 2 张图像的高度。我用“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>