How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox

Hey everyone, this video you'll notice that we have all these testimonials here. They're here because I want to show you how Flex Wrap works. So we've got these guys all in one Parent tag. They're not in individual rows, they're all in their own one tag, and there's a cool little feature called Text Wrap or at least Flex Wrap, that will break them on to their own lines. So let's learn how to do that and add some testimonials. 

In my mock-up I've mocked up three different, sorry, four different testimonials here. What I'd like to do is I like this site to kind of just grow as I keep adding testimonials, to get longer and longer. So instead of making a row, so I could make a Div tag, like a parent, and put these two in it, and split them using Flexbox, and then do a second one. Trouble with that though is that I have to make a parent for every single one, and what I want to do is I want to show you the Flexbox attribute called Text Wrap. 

It means we're going to make one giant or one parent for them all to go inside of. And what we're going to say is, guys just wrap on the next line, if there's too many of you, and you don't fit, go to the next line, because by default what it tries to do, like these fellas here, just tries to squeeze them all on the same line. 

Now it's going to take us a little while to build this up. So if you just want to cut to the shortcut sheet, in your Exercise Files, under Flexbox, this is the attribute here. So you can kind of see what it's doing there. It's going to the Parent tag, just add that wrap condition, but I want you to-- if you're working along with me, I want you to-- let's go through the rest of this tutorial, because I want to add a few bits and pieces, because there's some things later on in this course, if you're thinking, "I'll just skip this one," it's going to come back around because I want to do Pseudo classes, and all sorts of other fun stuff later on.
 
So where to add them? It gets confusing down here, right? You're like, "Ah, where is all this?" And I find just clicking in them, you can see, it's kind of married up his buddy up the top there. So cards in there, after cards finish I want my testimonials to start. I'm going to put a nice big break in it to make it easier for everyone, mainly for me. So I'm going to create a Class called 'Testimonials', it's close enough for me. Inside of there I'm going to make, how many, we need three of them. So I'm going to create all the classes now.
 
There's one going to-- I'm going to call it test box-- tbox. And unlike our cards, where we've got Card1, 2, and 3, because these are exactly the same all the way along, I'm just going to use the same Class to control them all. Inside of these tboxes are going to be some text that I've got in your Project2 folder. Look for Project2 Text, I got my testimonials. I'll show you this, testimonial-generator.com, I do not use this on myself, but I was looking for something for this Class, and I just needed to go through and I found testimonial-generator.com.

You put in your Projects Service, Dan's Back Massage. Nobody wants one of those. And there you go, 'Generate'. Since I've invested in Daniel's Back Massage, I've made over, wow, 100,000 profit. I'd be lost-- you get the idea, right? You can generate all of these things. I did for these ones but I don't for my own particular ones. So I put in Roar Cycles, and what I'd like to do is, I'd like this, so the name separated from the Body Copy, into two separate P-tags. I'm going to copy this first bit and I'm going to go to here, and I'll put in a P-tag. I'm going to paste it in, and I'm going to tidy it up. That's the kind of guy I am, there we go. 

We'll do another P-tag with, I could just make up the name, right? Another P-tag, and I'm going to put this one in there. So I want that for three of them. So I'm just going to duplicate them, copy, paste, paste. My tabs are all getting messed up, do you remember what we did earlier? I'm going to select, where is it, all of this, I'm going to right click it, and I'm going to go to 'Format Selection'. You see the shortcut there, if you're finding, you know, don't want to do it all the time. Now it's nice and spaced. It's going to switch out the text. I'll get the editor to speed it up. Now the editor is Jason; thanks, Jason. For some reason I decided we needed three, clearly we needed four. There we go. Paste them in, and put the last one in, and I'll see you in a second. 

All right, you're back. What you might have noticed is, when I did my clean up, cleaning up my code, did some weird stuff, by putting this in there, I'm not sure why. Maybe it's the apostrophe, I'm not sure. Didn't really clean it up. Got my tabs right but did some weird stuff with the P-tag. Now remember, if yours is flowing off the page, go to 'View' and toggle the 'Word Wrap', if it's going all the way off there, it might be-- how do you like it? 

So I've got my four things in, let's have a look at it in my page. Is that the one? There it is there. So I've got these four testimonials. I haven't styled them at all, so let's go and do that. So let's go-- I'll style the tbox first, because the other ones, they have like the width and height. So .tbox, you do a couple of things to it. I want to give it a width. In this case I'm going to use percentages, and I'm going to do-- I've already tested this. I'm going to make it 37%, let's have a little look. Actually that's a little small, yeah, good work, Dan, testing it. 

So that's it there, perfect. And I would like to put some Padding around it. So Padding all the way around, I'll do 50 pixels, and I want to get them up on the same line. Actually, put the line around the outside first, just so that we can get that bit done. So we do Border, I spell it wrong for like the millionth time. Border, and we are going to do the same as we did for the buttons. It's going to have a width of 1, it's going to be a solid border. It's going to be white. Let's have a little look. And how close is that? That's pretty good. 

Now I want to get them up on their own line. It's never going to happen at the moment because we've got ours a little bit big. You can kind of see, I made it be 47%, but it's way past that, it's way past 50, why is that? You know why, because we added the Padding. Remember, the Padding added to the total width, you're like, "Okay." So I could-- that's why I have 37 in my head, because 37 plus my Padding, it makes it less than half, where is it? Less than half. And there was just being a sneaky trick, but we don't want to do that, we want to be all official. 

Remember how to do it? We do it to the Box or the Wrapper box. I think we can do it to, oh, I'm not even sure. Mine's gone blank, let's check. Let's add our testimonials, and let's-- remember what it was, remember, Border Box. No, it's Box size, Box sizing. Border box, there you go. No, you have to actually do it to the things themselves, of course you do, that makes sense. There you go. So by doing that, that minuses off that, and we're good to go. 

Next thing we want to do is get them up on the same line. How do we do that? I want you to pause it and just have a little think. It's a sudden exam. It's kind of like a pop quiz. And what we did before, is remember we set the display to Flex, and by default they'll all try and squeeze on the same line, which is cool. 

The next thing we're going to look at, is the bit we half, well we didn't half mention, I totally pointed at it from your Flexbox cheat sheet, from the Exercise Files, and we set the Flex Wrap to Wrap, because that's what we want to do. Let's have a look, let's go to here. Let's set the Flex Wrap to Wrap. Here we go. See if it works. Nice. Awesome, huh? Now I want to separate them up. I could start adding Padding between them. I could do-- be a little bit hard. Do you remember the Class we add from Flexbox, just to separate them all out, we did it for this one. You can cheat and go check that one. Where is my cards? There it is up here. Remember this one, Justify Content, space between. All right, cards. You're like, "He was just stalling because he couldn't remember," a little bit. But that's what it is, Justify Content, space between. And it should separate them all out. 

Now I want to add a little bit of margin to the top. So, of these little tboxes here, I'm going to say Margin, Margin, we'll do Top. And how much? We will do 50 pixels. Here we go, there's our little borders. We've got this weird thing going on with the height here, with our Gradient going random in the background. Let's fix that, and what's controlling him, up the top here. So we added this before to fix our problem when our website was too small. It's made that initial view, like 100%, which kind of gets us down to the bottom of my screen. Yours might not have this problem because your screen might be smaller or bigger, but we don't need the height to be 100% anymore. There you go there, because my website is nice and long, I'm doing some Padding underneath of these guys, or actually, where do you add the Padding now? 

We don't have a Footer in this site, weirdly I just didn't design one with one. I decided I don't have to have one, so where should I do it? I might put it at the bottom of the testimonials. I'm reluctant to add Padding to the bottom of the Body, only because I'm gun shy, like messing with the Body tag can do weird stuff, especially if you're working with things like Bootstrap, Flexbox. They all got their mitts in for-- wanted to do stuff with body. I'm going to just be super careful, and just use the one that I made. I know that they're not going to mess with it, and I'm going to say Margin-bottom, and I'm going to say 50, maybe 100, let's double it up. Let's have a look, that's my mock-up. 

Here we go, some Padding at the bottom, or at least Margin at the bottom. So we learned what Flex Wrap does. So it means that these guys are all full guys, all in one box, and the cool thing about it is that if I made these guys smaller, or I added more of them, so let's go copy, I'm going to add a few more; paste, paste, paste. I'm adding loads more. The cool thing about them is, check it out, they can just keep wrapping on to the next line. I just, I don't want all those guys, go away. Nice and clean, back to where we started. Oh, CPU, you, over there, I'll whack the mic, and we're done. All right, I will see you in the next video.