Автоматическая ширина столбца с изображениями внутри

Question

В настоящее время я пытаюсь получить следующий тип сетки / столбца, но не могу. Некоторые изображения имеют большую ширину, чем другие, поэтому они должны занимать больше места.

У меня будет около 30i sh изображений, через которые я пройду l oop, поэтому я не могу просто указать ширину, установленную для каждый столбец. Я не уверен, как решить эту проблему.

У меня есть следующее, и я хочу иметь 3 на строку, это дает мне несколько странные результаты, но не совсем.

https://codepen.io/BlooDyBG/pen/OJVxYEj

  <div class="flex-container">
  <div class="flex-item">
  <a href="https://ibb.co/CBBLGnp"><img src="https://i.ibb.co/WnnCJcN/Image-2.png" alt="Image-2" 
 border="0"></a>
 </div>
<div class="flex-item">
  <a href="https://imgbb.com/"><img src="https://i.ibb.co/HqdrqQB/Image-3.png" alt="Image-3" border="0"> 
  </a>
    </div>

   <div class="flex-item">
 <a href="https://ibb.co/3d20nnC"><img src="https://i.ibb.co/r0YZVVw/Image-4.png" alt="Image-4" border="0"></a>
 </div>

      <div class="flex-item">
     <a href="https://ibb.co/QHJ4gTP"><img src="https://i.ibb.co/7pSqfZn/Image-5.png" alt="Image-5" border="0"></a>
            </div>

     <div class="flex-item">
    <a href="https://ibb.co/7p6LHFy"><img src="https://i.ibb.co/R6Vd1WH/Image-6.png" alt="Image-6" border="0"></a>
    </div>

  <div class="flex-item">
  <a href="https://imgbb.com/"><img src="https://i.ibb.co/HqdrqQB/Image-3.png" alt="Image-3" border="0"></a>
  </div>

   </div>

CSS

.flex-container {
display : flex;
flex-wrap: wrap;
 padding : 20px;
}

.flex-item {
 flex: 1 1 auto;
 padding : 20px;
 }

 img {
  width : 100%;
  height : 100%;
 }

Answer 1

Третья часть сокращения flex - flex-basis, которая сообщает браузеру, как обрабатывать размеры гибких элементов. В этом случае вы установили значение auto, которое указывает браузеру использовать ширину содержимого для определения размера.

Вместо этого вы должны использовать что-то вроде flex: 1 1 30%, чтобы гарантировать, что все элементы имеют одинаковый размер.

---

В качестве альтернативы, вы можете создать этот тип макета с помощью CSS Сетка. Это будет выглядеть примерно так:

.flex-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}