我正在尝试创建具有不同图像高度和宽度的 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>