CSS Grids and Flexbox for Responsive Web Design Flexbox Exercise 3 Solution

[00:00:00]
>> Jen Kramer: Okay, so it's so short, let's just go ahead and code this together. So let's go ahead and start here. First of all, I didn't make any changes to my HTML, I worked with it exactly as it is, okay? And I just used very simple selectors for selecting things on the page here.

[00:00:19] So let's start by identifying what is our flex container and what are our flex items. So which tag is our flex container, tag or tags?
>> Speaker 2: ul.
>> Jen Kramer: The ul, the ul is our flex container. What then are our flex items? What are the flex items?
>> Speaker 3: The list items.

[00:00:45]
>> Jen Kramer: The lis. Could the figure tag be our flex items?
>> Jen Kramer: Could the figure tag be our flex item?
>> Jen Kramer: How many say yes? How many say no?
>> Jen Kramer: How many say I don't know?
>> Speaker 3: [LAUGH]
>> Jen Kramer: Okay, so the answer is no, and the reason why is if your flex container is the ul, only the direct children can be flex items.

[00:01:18] So the figures are grandchildren. Okay, so the figures cannot, they actually have no flex properties associated with them. The only thing, if we have the ul as our flex container, only the lis become flex items. All right, so given that, and the ul's gonna become our flex container.

[00:01:38] Let's go on ahead and add to it then the appropriate styles to make it do that. What do I need to add here to the ul?
>> Speaker 3: Display: flex.
>> Jen Kramer: Display: flex, always a good start. And what else?
>> Speaker 3: Flex-flow?
>> Jen Kramer: How about a flex-flow?
>> Jen Kramer: And how would we like our images to display?

[00:02:05]
>> Speaker 3: Row.
>> Jen Kramer: How about a row? Do we want them to wrap onto the next row? Probably a good idea. Okay, so if we just do that much, let's look at our webpage.
>> Jen Kramer: So that's not bad, right off the bat, right? Okay, so we have a bunch of images here.

[00:02:29] You could play some games now with justify content, right? So you can sort of see, especially in this view, you can see we have a bit of a rag going on here. Again, like paragraphs have that rag on the right edge, in English anyway. You can see here, we have a bit of a rag going on in the edge of these images, okay?

[00:02:49] So every image is displaying at its current dimensions, all right? And you can see these are just displaying, however many that they display, row by row until we get here to the bottom. I made a couple of tweaks to this to make things a little bit prettier. So what I added to that is I added an li.

[00:03:14] This is solution one, which is these are just gonna display however many on a row that they happen to display. So on my li, I added to this a flex: auto, okay? So that's gonna give me an automatic space these things out evenly kind of effect. Okay, so that spaces them out a little bit more evenly on the page, see that?

[00:03:44]
>> Jen Kramer: All right, and then the very last thing that I did, which I think makes it kinda pretty, is on the images, I gave it a width of 100%, okay? So this means that my images are now going to expand to fill the width of what?
>> Speaker 4: Container.

[00:04:05]
>> Jen Kramer: Their container, and what's the container for the image?
>> Speaker 4: Li.
>> Speaker 3: Figure.
>> Jen Kramer: It's the figure tag, and what's the container for the figure tag?
>> Speaker 4: Li.
>> Jen Kramer: The li, okay. And figure is a block level element, so now the image is gonna stretch to be as wide as the figure tag, which is a block level element inside of the li, which is a block level element.

[00:04:29] And if we refresh our page, then I think that that just sort of fills out kinda nicely, looks kinda pretty. All right, and we have different dimensions going on here, like this one has more height to it, right, they all actually have the same or a similar width, I guess it's a similar width, it's not the same.

[00:04:50] Okay, and here's the bottom one, a little fuzzy cuz that's probably a little big.
>> Speaker 3: [LAUGH]
>> Jen Kramer: All right, and then as I make the screen smaller, then the pictures adjust appropriately. Adding that image size of 100% also gives these images the flexibility to do this very thing that they change size like this.

[00:05:12] Without that image width of 100%, so if I was just to take that out.
>> Jen Kramer: As we resize the images here on the page, okay? They just sort of eventually run into each other and step on top of each other, okay? The page doesn't flex nearly as attractively, shall we say.

[00:05:38] All right, so that width of 100% is a really lovely hack.
>> Jen Kramer: Okay, that's one possible solution. For the other possible solution, I said, if you have the same number of images per row, how might you go about doing this? So can anybody suggest what we might do here to make that work?

[00:06:01]
>> Jen Kramer: So here on the ul, is there anything I need to change?
>> Speaker 5: No.
>> Jen Kramer: No, so we're still gonna be flex, we're still gonna be row wrap. Okay, how about on the li? What should we do here?
>> Speaker 5: Should give it flex basis.
>> Jen Kramer: Uh-huh, we need a flex basis.

[00:06:25] Anyone suggest a number?
>> Speaker 5: Three.
>> Jen Kramer: So this is the mobile sizes, so we want one on a row, right? So what might be a good size?
>> Speaker 5: 100%.
>> Jen Kramer: 100%, 100% might be a great size, okay.
>> Jen Kramer: I'm gonna leave this image with a width of 100% here.

[00:06:50] And then now how would I get to have different size or different numbers of images per row? What would I do then?
>> Jen Kramer: What would I do then? How do I get different numbers of images per row? If this line 20 here, this is gonna produce one image per row at mobile dimensions, what do I need to modify, hint hint, in order to get more than one image per row at different dimensions?

[00:07:22]
>> Speaker 5: The basis.
>> Jen Kramer: Yeah, so this flex basis is gonna continue to change. So here in my media queries, maybe what I do is,
>> Jen Kramer: Tab, maybe what I do is something like,
>> Jen Kramer: 50% here for tablets. And maybe something like 33% for desktop. I think I also change these media query numbers, I think I actually like 605 better and 910, but that's neither here nor there.

[00:08:05]
>> Jen Kramer: Okay, so if we go on ahead and refresh the page then, now we've sort of fixed these, so that at desktop dimensions, at 33% a piece, obviously we're gonna have three pictures a row, right? And there they are one, two, three, one, two, three, one, two, three, one, two, three, one, two, three, until we run out.

[00:08:23] And 17 being a prime number, [LAUGH] coincidently divisible by nothing. We have just an empty space here as well. And then as we scrunch this down to smaller dimensions, then we'll go two to a row eventually, somewhere along the way. There we go, we went to two in a row, and then finally, of course, one to a row.

[00:08:48]
>> Jen Kramer: Cool? So that's like the easiest thing in the world with flex box, isn't it? You can make a really nice-looking gallery. And you can do it in like, what, five lines of code or something, right? Pretty awesome. Okay, any questions on that?
>> Jen Kramer: You test for the robustness of your answers by, in your HTML, because, of course, we don't have a database and all of that stuff set up to give us different numbers of these things.

[00:09:19] But you could copy those lines of code, you can take your 17 and double it, make 34 of these things. You could comment some stuff out, and make sure that your layouts hold up. In both of these solutions, your layouts will hold up no matter how many images you have.