This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Flexbox Review" Lesson
[00:00:00]
>> Jen Kramer: So let's think about this a little bit more. So we're gonna go back to our example of our html. We're building a four column grid system and we have rows and we have cells, just like we had with floats. Our row is the flex-
>> Speaker 2: container
>> Jen Kramer: Container.
[00:00:17] The individual cells are?
>> Speaker 3: Flex items.
>> Jen Kramer: Flex items, right? So here is some representative HTML where we have a row and which is our container and then inside of that are the flex items.
>> Jen Kramer: The HTML, or sorry, the CSS for this might look as follow. So we have a class of row.
[00:00:40] We're gonna display that as flex because of course that's our initial declaration there to get this display as flex box. Our flex flow might be something like row wrap. Obviously you can change those values if you want but chances are row wrap. You could justify the content ion some direction or another, I have this being center.
[00:01:00] Obviously, you have all the other choices in values here, and I've put in a margin as well. And of course there's a note there that you can change row direction and so forth if you wish. In terms of the individual column properties, so .col-1, how would we set that up?
[00:01:17] We can set our flex-basis property, remember this is the short-hand. Grow, shrink basis, GSB, grow shrink basis, and so the growing and shrink are zero, in other words we're not worrying about them. But the basis number will vary depending on which particular media query you might be doing, okay?
[00:01:40] And then of course rearranging the columns is super easy. We can push and call them, it's what we usually call them with floats. You can call them also by whatever other name you want and you can just change the order property around to achieve the effect that you want.