Creating a Flex Container4:50 with Guil Hernandez
Now that you know the basic concepts and terminology, you're ready to learn the first step in creating a flexbox layout: defining the flex container.
- A Complete Guide to Flexbox
- A Visual Guide to CSS3 Flexbox Properties
- Flexbox Playground
- Flexbox - latest browser support
- Before you can use any flexbox property, you need to define a flex container in your layout.
- You create a flex container by setting the
displayproperty of an element to one of the flexbox layout values:
- By default, flex items are laid out horizontally on the main axis from left to right.
- By default, flex items stretch to fill the flex container's height.
display: flex;creates a block-level flex container.
display: inline-flex;creates an inline flex container.
- Any element outside a flex container is not affected by the flexbox layout.
- Only children of a flex container automatically become flex items.
Now that you know the basic concepts and terminology, you're ready to learn 0:00 the first step in creating a flex box layout, defining the flex container. 0:04 To follow along using Workspaces, launch the Workspace on this page. 0:09 You can also download the files to follow along with your own text editor, 0:12 if you prefer. 0:16 In the Workspaces, in the index.html file you'll see a div with the class container. 0:17 Nested inside the container div are six divs that share the class item. 0:24 In the CSS folder you'll see the files flexbox.css and page.css. 0:32 In page.css I've added some base styles for the page. 0:38 You can see the base styles once you preview the Workspace in the browser. 0:42 As you can see, the container has a white background color, and 0:47 the item divs inside have a light blue background color. 0:51 There's also a five pixel margin around the item divs. 0:54 We're going to write our Flexbox layout styles here inside flexbox.css. 1:00 Currently, the item divs are in the normal document flow. 1:07 They display as stacked block level elements 1:11 in the order they appear in the mark up. 1:15 When you apply Flexbox layout to these items, you can place them 1:17 anywhere in the container, for example, if you make them appear side by side, and 1:21 make the last item appear first, or even second, third or fourth. 1:26 Before you can use any Flexbox property, 1:30 you need to define a flex container in your layout. 1:33 So, I'm going to make the parent container div, the flex container. 1:36 Flexbox gives you a whole new way of using the CSS display property. 1:42 You create a flex container by setting the display property of an element 1:46 to one of the Flexbox layout styles. 1:51 So inside flexbox.css I'm going to create a new rule 1:53 that targets the class container. 1:57 I'll give it a display property and set the value to flex. 2:01 Now I've established a flex formatting context inside the container div. 2:07 So every item div inside the container div automatically becomes a flex item. 2:13 So let's take a look at how the value flex changed the container's layout. 2:20 I'll save my style sheet, and once I refresh the browser, 2:25 we're now seeing the default behavior of Flexbox layout. 2:28 So the flex items are laid out 2:33 horizontally on the main axis from left to right. 2:35 And they're also laid out on the cross axis from the top start side 2:39 to the bottom inside of the flex container. 2:44 So that means that the flex items expand 2:47 to fill the full height of the flex container. 2:50 So let's what happens when I increase the height of the container. 2:53 Back inside flexbox.css I'll give the container 2:56 rule a height property and set the value to 300 pixels. 3:02 As you can see, the flex items stretch to fill the flex container height. 3:08 They're stretched from top to bottom. 3:13 So from the start of the cross axis to the end side of the cross axis. 3:15 So now we have a Flexbox layout. 3:22 Pretty simple so far, right? 3:24 By default, display flex creates a block level flex container. 3:27 The flex container takes up a full line, but 3:32 it doesn't have to take up a full line if you don't want it to. 3:36 The display value in line flex creates an in line level flex container. 3:40 As you can see, there is no difference in the effect on flex items. 3:46 The flex container now behaves like an inline element and 3:50 takes up as much space as its content. 3:53 So it can lay out beside other inline content, but I'll go ahead and 3:56 change the display value back to flex. 4:00 Remember in Flexbox any element outside 4:05 a flex container is not affected by the Flexbox layout. 4:07 Only children of a flex container automatically become flex items. 4:12 So that means if I add a new div outside of the container div, 4:17 it will not be affected by flex box properties 4:21 unless I also set its display value to flex or inline flex. 4:24 We're just getting started. 4:30 In the next section of the course, you'll start to see why Flexbox is one of 4:32 the most intelligent and efficient layout solutions in web design and development. 4:35 You're gonna learn advanced Flexbox properties for 4:40 layout direction, order, alignment, sizing, and more. 4:42 And after that, you'll build a responsive webpage layout 4:45 using your new Flexbox skills. 4:48
You need to sign up for Treehouse in order to download course files.Sign up