如何保持恒定的图像高度？ 卡在 flexbox 中？

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

在这个 cas 我将使用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

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