Что я делаю не так с flexbox, пытаясь выровнять эти изображения?

Question

Итак, я пытаюсь выровнять изображения рядом друг с другом с помощью flex flex, но они не работают, много чего перепробовал, но ни одно из них не помогло

.container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.image {
  width: 100%;
  margin-right: 10px;
}

<div class="container">
  <div class="image">
    <img src="photo.jpg">
  </div>

  <div class="image">
    <img src="photo.jpg">
  </div>

  <div class="image">
    <img src="photo.jpg">
  </div>

  <div class="image">
    <img src="photo.jpg">
  </div>
</div>

Answer 1

Вам необходимо удалить

width: 100%;

из ваших .image стилей.

Рабочий пример:

.container {
display: flex;
width: 100%;
flex-wrap: wrap;
}

.image {
margin-right: 10px;
}

<div class="container">

<div class="image">        
<img src="photo.jpg">
</div>

<div class="image">        
<img src="photo.jpg">
</div>

<div class="image">        
<img src="photo.jpg">
</div>

<div class="image">        
<img src="photo.jpg">
</div>

</div>

---

Обновление:

Хотите одну строку из 4 изображений? Если это так, вам нужно присвоить каждому изображению width или flex-basis равным или меньшим 25% из .container.

В противном случае предполагается, что ширина изображения соответствует его оригинальному размеру.

Этого можно добиться, вставив .image {flex: 0 1 25%;} в CSS:

.container {
display: flex;
width: 100%;
flex-wrap: wrap;
}

.image {
flex: 0 1 25%;
margin-right: 10px;
}