This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Flexbox Exercise 3 Setup: Image Gallery" Lesson
[00:00:00]
>> Jen Kramer: The next thing we're gonna move on to is how to use Flexbox correctly, so now that we hacked it. We're going to go on to our image gallery, and I'm actually gonna let you guys run this one on your own. So,
>> Jen Kramer: I'm gonna go ahead and open this page in the web browser.
[00:00:18] So once again, we have a prototype here. So this is a whole series of pictures of pies and captions. Isn't that lovely? And the pies go on forever. I think there is something like 17 of these. I've marked these up for you. So the markup that I did is the following.
[00:00:38] So it's just a bunch of pictures, so that's an unordered list. Within each of the list items, it's a figure, because we have both an image and a caption to go with it. So there is our image and then we have a figure caption that's displaying along with that image.
[00:00:53] So this is something that you might get from a web server. I’ve mentioned this a few times. You might have some number of images coming in for an image gallery, or some number of little blurby kind of things. Coming in for press releases, or articles, blog posts, whatever it happens to be.
[00:01:11] Coming in from your database and you need to display them here on the web page. So here’s a whole bunch of these. So the goal of this now is I'd like you to display this, and I'm gonna show you the end state that I have here.
>> Jen Kramer: So I want you to display this in some way that makes sense to you.
[00:01:34] This is one possibility where we have a whole bunch of pictures, and notice how they just sort of shift around on the page, depending on our width, and so forth. This is the way Flexbox is supposed to work, okay? And it's kinda cool that they're all different sizes, I think, I really like this particular effect.
[00:01:53] If you don't like that effect, there's a second possible answer to this,
>> Jen Kramer: And I'll show you that as well.
>> Jen Kramer: Which is we can fix this down to let's say three images per row, like this, okay? And, whoops, and we can do three images per row, and then we can go to, whatever, two images a row, and then one image a row, okay?
[00:02:24] So that's your hint, that's what we're looking for, and you know enough about Flexbox at this point. That what I'd like for you to do is to go ahead and write one possible solution that's going to lay out these pictures on the webpage. It's obviously gonna loop or loop these images over and over again, so there's no grid structure to this, okay?
[00:02:47] And there's not a whole lot of CSS required.