From the course: Responsive Layout
Defining a flexbox container - HTML Tutorial
From the course: Responsive Layout
Defining a flexbox container
- [Instructor] Flexbox is another way to lay out elements on a web page. Unlike Grid which can lay out elements in two directions, Flexbox is meant to lay out items in only one direction. We're going to start out with what will be our flex container and inside of it will be several Flex items. For this example, we're going to use divs for both the Flex container and the Flex items inside it. They don't have to be divs, they could be anything. For example, the Flex container could be a UL, unordered list and the Flex items inside it could be the list items. Over in the browser, we have a bunch of boxes with numbers inside of them. This isn't a Flexbox yet and you see it's just a bunch of divs in a row. They're display blocks so each is on a new line and is the full width of the viewport. To start out with Flexbox styles, the first thing we need to do is set display to Flex. Once I've done that, the containing element is now the Flex container. The immediate children inside that container are automatically Flex items. So, going over into the code, I'm on line nine, and for the container element, I'm gonna add display: flex and save and refresh. Now all of the boxes are all displayed on one line going across. This is different than Grid where the default is the grid items fill the width of the container. In Flexbox, by default the Flex items are only as wide as they need to be to fit their content. However, the Flex container fills the width of the viewport. We haven't set a height for the container, so the container is only tall enough to display the content. I'm going to give the container a height just so you can see what's going on with the height of the items inside it. Back on the code on line 11, I'm gonna add a min-height of 90vh and save and going back and refresh and now you can see that the Flex items fill up the whole height of the container.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Defining a flexbox container1m 53s
-
Direction3m 36s
-
Wrapping2m 30s
-
Ordering flex items1m 28s
-
Flexbox alignment overview1m 39s
-
Aligning items on main axis3m 16s
-
Aligning items on cross axis3m 35s
-
Aligning lines on cross axis3m 15s
-
Aligning individual flex items1m 38s
-
Distributing space to flex items4m 43s
-
Challenge: Floats to flexbox1m 21s
-
Solution: Floats to flexbox8m 17s
-
-
-