如何仅使用flexbox制作自适应图像网格？

Question

I'm starting my first full website project, I've been learning HTML and CSS for about a month now and I just got done learning the basics of flexbox. I was wondering if it's possible to create an image grid where the images resize themselves automatically as the browser window is resized using only flexbox, as that's all I know for now.

What I'm trying to recreate is this . One large image on the left, with two smaller images stacked on top of each other to the right. When I shrink the browser, the images stay in place automatically resize themselves. Here's the website if you want to check it out live. Just scroll down a bit till you see it.

Here is my poor attempt on jsfiddle . For some reason, jsfiddle is not displaying it they way it displays on my computer. The images on my computer are side by side, like how I sort of it want it, but it breaks onto the next line if I resize the window a tiny bit.

For those not wanting to deal with jsfiddle, here is the relevant HTML and CSS. I know it's a mess.

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

In your example, you forgot to add the class column into the first div. Like this:

<!-- 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>

To achieve this behavior you can change the width property for max-width . The width property forces the width to be fixed, while the max-width (and min-width ) says "hey, even if my image it's bigger than that resizes it for the max width x "

Example:

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

Docs:

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

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