This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Introducing Flexbox" Lesson
[00:00:00]
>> Jen Kramer: Flexbox was actually the very first layout element that we were given to work with in CSS. Prior to that, as I said, we used tables which were a hack for layouts, we used floats which were a hack for layouts, there was positioning which always sort of had spotty support.
[00:00:16] It was a really ugly period of time where we tried to do things with positioning. Especially those of you who remember Macromedia, Dreamweaver, chopping things up it was a very ugly time, about 2005. But moving on from that, Flexbox has been around for a while now, it's actually been around since 2009, but it's had some issues [LAUGH].
[00:00:36] Okay, so first of all, the way Flexbox works, there's tow elements to this, there's a parent and a child, we're gonna talk a lot about the parents and children. The parent is called a flex container, and the child is called a flex item, or you can think of them as rows and cells, just like we just had with floats where we had rows and cells, we have flex containers and flex items, okay?
[00:00:59] And both of these are required to work. You can't just call Flexbox on one element and magic happens. You're gonna have a parent and a child, they work together to make Flexbox work. Flexbox is absolutely amazing when it comes to vertical and horizontal centering and heights. There's no more equal height problem that we had with floats, does not exist in the Flexbox world, yay.
[00:01:22] It automatically does all of that for you, no JavaScript required. It is super easy to reorder boxes, which is one of the other really wonderful things. None of this relative positioning nonsense and reordering with percents. We can simply say, order 1, order 2, order 3, it's great. So, it's really super easy to reorder.
[00:01:45] There are some big disadvantages to working with Flexbox. So, again, remember that Flexbox as a grid system, which is where we're headed, is indeed a hack, okay? I'm teaching it because it is everywhere. It's pervasive throughout the industry right now. My philosophy is, if it's in Bootstrap, you've got to know it.
[00:02:05] And it's Bootstrap, it's in Bootstrap 4, so you gotta know it. Flexbox is not really designed to be locked down for layouts. It works in quote, as we call it, one dimension. What do we mean by one dimension? Think about Flexbox as being one continuous row. One continuous row.
[00:02:22] If you were to get some unknown number of images coming from some sort of database driven, whatever, your Pinterest. And you're getting all these images coming in, you don't how many images you're gonna have, but you have to display them on a page. Flexbox is a great way to do this because it will just wrap on to the next line as it runs out of screen space indefinitely.
[00:02:43] So, Flexbox is not really intended to be locked down into rows the way that we are actually gonna wind up doing it. The browser support can be challenging. I also find the syntax challenging. So I believe in the next folder that we're going to, which is folder number two, you will find a cheat sheet in there.
[00:03:04] I'll point that out to you when we go to those files. The people here in the class have it printed out. So you may also want to print out my little cheat sheet that has what the parent and the child properties are with those values. I think you'll find that handy to refer to as you work with Flexbox.
[00:03:22] Okay, so here's some basic terminology when it comes to Flexbox, as we start to talk about it. So, remember, flex containers, flex items. So the flex container, the parent, has many different values associated with it. And we can think about it either as a row or we can think about it as a column.
[00:03:43] So flex container is thought of as a column, we have flex items stacked on top of each other, and then we might talk about the main axis and the cross axis. So the main axis matches the direction of that flex container, so in this case, the main axis would be vertical, the cross axis would be horizontal.
[00:04:05] Okay, this tends to be the exception as we work with Flexbox as a grid system. We typically don't lay out grids and columns, we usually lay them out in rows. So this is the way that we more commonly think about Flexbox, at least the way I think about it in my world.
[00:04:20] So the main axis would be the row, the cross axis would be the column, and these flex items are going to sit next to each other just like this.