Как я могу сделать адаптивную сетку изображений, используя только flexbox?

Question

Я начинаю свой первый полноценный веб-проект, я изучаю HTML и CSS уже около месяца, и я только что закончил изучать основы flexbox. Мне было интересно, возможно ли создать сетку изображений, в которой размеры изображений изменяются автоматически, поскольку размер окна браузера изменяется только с помощью flexbox, как это все, что я знаю на данный момент.

Я пытаюсь воссоздать это . Одно большое изображение слева, с двумя меньшими изображениями, сложенными друг на друга справа. Когда я уменьшаю размер браузера, изображения автоматически сохраняют свои размеры. Вот веб-сайт , если вы хотите проверить его вживую. Просто прокрутите немного вниз, пока не увидите.

Вот моя неудачная попытка jsfiddle . По какой-то причине jsfiddle отображает их не так, как на моем компьютере. Изображения на моем компьютере расположены рядом друг с другом, как я того хочу, но они переходят на следующую строку, если я немного изменяю размер окна.

Для тех, кто не хочет иметь дело с jsfiddle, вот соответствующие HTML и CSS. Я знаю, что это беспорядок.

HTML:

/* Section: Gallery */

#gallery {
  display: flex;
  flex-wrap: wrap;
  background: rgb(252, 246, 237);
  text-align: center;
}

.coffee-img-1 {
  width: 500px;
  padding: 1.5rem;
  margin-right: 5rem;
  margin-top: 2rem;
  max-width: 100%;
  height: auto;
}

.coffee-img-2,
.coffee-img-3 {
  width: 400px;
  padding: 30px;
  max-width: 100%;
  height: auto;
}

.column {
  flex: 50%;
  padding: 1.5rem;
}

#gallery img:hover {
  animation-name: opacity-hover;
  animation-duration: 300ms;
  animation-fill-mode: forwards;
}

@keyframes opacity-hover {
  100% {
    opacity: 0.9;
  }
}

<!-- Gallery -->
<section id="gallery">
  <div>
    <img class="coffee-img-1" src="https://i.imgur.com/58DZwQ2.jpg" alt="Table with coffee and pastries">
  </div>
  <div class="column">
    <img class="coffee-img-2" src="https://i.imgur.com/hsSn85u.jpg" alt="Barista pulling two espresso shots">
    <img class="coffee-img-3" src="https://i.imgur.com/nmAId6V.jpg" alt="Barista brewing coffee with aeropress">
  </div>
</section>

Answer 1

В вашем примере вы забыли добавить класс column в первый div.Например:

<!-- Gallery -->
<section id="gallery">
  <div class="column">
    <img class="coffee-img-1" src="https://i.imgur.com/58DZwQ2.jpg" alt="Table with coffee and pastries">
  </div>
  <div class="column">
    <img class="coffee-img-2" src="https://i.imgur.com/hsSn85u.jpg" alt="Barista pulling two espresso shots">
    <img class="coffee-img-3" src="https://i.imgur.com/nmAId6V.jpg" alt="Barista brewing coffee with aeropress">
  </div>
</section>

Чтобы добиться такого поведения, вы можете изменить свойство width для max-width.Свойство width заставляет ширину быть фиксированной, в то время как max-width (и min-width) говорит: «эй, даже если мое изображение больше, чем оно, изменяет его для максимальной ширины x»

Пример:

https://codepen.io/icaromh/pen/jRopmp

Документы:

https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

https://developer.mozilla.org/en-US/docs/Web/CSS/min-width