From the course: Responsive Layout

Defining a flexbox container - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

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.

Contents