html - 创建具有相同大小图像的响应式 flexbox

Question

初学html/CSS，学习flex boxes，感觉关注了W3schools网站example正确而且我还从 here 中获取了一些代码关于使其响应，但当视口(viewport)缩小时我无法让图像换行。

这是我的代码开始:CSS:

* {font-family: arial, sans-serif; box-sizing: border-box;}

html body {margin: 0;}

.flex-container {
    display: flex;
    margin: 0 .5%;
}

.flex-container > div {
    margin: 1%;
}

.whatwecando {padding-top: 125px;
padding-bottom: 15px;
}

.nav {position:flex; top:0; left:0;
    background-color: black;
    font-size: 20px; 
    float: left; 
    border-radius: 0px;
    border: none;
    width: 100%;
    overflow: hidden;
    margin: 0;
    list-style-type: none;
    padding: 25px;
    display: flex;
    list-style: none;
    flex-direction: row;
    /* vertical alignement */
    align-items: center;
    /* how you want horizontal distribution */
    /* space-evenly | space-around | space-between */
    justify-content: space-evenly;
}

.item {
    color: white;
}

.item:first-child {
    height: 50px;
    line-height: 50px;
}

@media screen and (max-width:500px){
    .column {
        width: 100%;
    }
}

ul {list-style: none}

HTML:

<div class="flex-container">

<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Banners" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Posters" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Flock again" /></div>

当我在容器类中添加 flex-wrap: wrap;(这在逻辑上是解决方案)时，所有图像都垂直排列，因此我将其删除。我正在尝试创建图像网格，我是不是没有正确理解 flexbox？

Answer 1

这是一个简单而漂亮的guide to flexbox content .我认为您混合了一些东西(css 和 html 中的类)。

这里有另一件事可以尝试使图像具有相同的大小:

.image-container{
    width:100px;
}
.image-container img {
    width:100%;
    height:100px;
    object-fit:cover;
} 

(图像高度必须固定才能工作)。