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

Question

新的html / CSS，学习弹性框，我觉得我已经正确地遵循了W3schools网站的例子 ，我也从这里采取了一些代码来使其响应，但是当视口减少时我无法将图像包裹起来。

这是我的代码：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; （这在逻辑上是解决方案）在容器类中，所有图像都垂直排列，所以我删除了它。 我正在尝试创建像图像网格，我不正确理解flexboxes？

Answer 1

这是一个简单而精美的flexbox内容指南 。 我觉得你有混合的东西（css和html中的类）。

这是尝试使图像具有相同大小的另一件事：

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

（图像高度必须固定才能使其工作）。