创建具有相同大小图像的响应式弹性框

Question

html/CSS 新手，学习 flex 框，我觉得我已经正确地关注了 W3schools 网站 example，我还从 here 获取了一些代码以使其具有响应性，但我无法获取图像视口缩小时换行。

这是我的代码开始： 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;
} 

（图像高度必须固定才能正常工作）。