Создание гибкой коробки с изображениями одинакового размера

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; (что по логике было бы решением) в классе контейнера, все изображения выстраивались вертикально, поэтому я удалил их.Я пытаюсь создать как сетку изображений, правильно ли я понимаю флексбоксы?

Answer 1

Вот простое и приятное руководство по содержимому flexbox .Я думаю, что вы получили что-то смешанное (классы CSS и HTML).

Вот еще одна вещь, чтобы попытаться сделать изображения одинакового размера:

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

(высота изображения должна быть фиксированной для этогона работу).