Smarter Layouts with flex-basis and flex6:42 with Guil Hernandez
Learn how the flex-basis property gives you even more control over the size of flex items, and how the flex shorthand property intelligently sets flexbox values when you don't specify them.
flex-basisapply to flex items only.
flex-basisspecifies the initial main size of a flex item.
- You set the initial size you want the flex items to be, then flexbox evenly distributes the free space according that size.
flexis the shorthand for
- Using only one number value for
flex-growvalue of an item.
- The second and third values are optional in the
- Setting only one number value for
flexautomatically sets the
So follow along using the latest workspace, 0:00 launch the workspace on this page or you can download the project files. 0:02 In the index.html file the flex container now contains only four items. 0:06 I added content inside each flex item. 0:13 Some items have more content than others, 0:17 as you can see here in the workspace preview. 0:19 Back in flexbox.css when I target the items and 0:21 set their flex grow value to one. 0:26 The browser tries it's best to equally distribute the space inside the container. 0:33 Some flex items are wider than others because of the amount 0:39 of content inside of them but what if your layout requires equal width items? 0:42 Well, this is where the flex basis property 0:47 can give you even more control over the size of your flex items. 0:50 The flex basis property works, alongside the flex grow property to display equal, 0:54 but flexible, widths for all flex items. 0:59 So, you set the initial size you want the flex items to be, 1:03 then flex box evenly distributes the free space according to that size. 1:06 Flex spaces accepts the same values as the width and height properties. 1:11 So, pixels, ems, percentages, and other units. 1:16 Now, I wanna set the flex items' initial size to 200 pixels. 1:19 So in the item rule I'm going to add 1:24 the flex-basis property and set the value to 200px. 1:27 So in other words the flex items will display 1:33 at an equal size, when they're 200 pixels or wider. 1:37 But if and 1:42 when they're narrower than 200 pixels, the browser will redistribute the space. 1:43 So, let's take a look. 1:48 Great, the space in the flex container is evenly distributed. 1:51 The flex items have flexible widths and 1:56 notice what happens once the flex container starts to get narrow. 1:59 The items begin to break onto multiple lines. 2:04 So, at this point, each flex item is 200 pixels wide. 2:07 Once they're narrower, than the flex space's value of 200 pixels, 2:12 the browser starts redistributing the space inside the flex container. 2:16 And if I go back and change the items flex spaces value to 100 pixels, 2:24 The items are now equally sized until they're narrower then 2:31 the flex spaces value of 100 pixels. 2:35 When setting both the flex-grow and flex-basis value of a flex item, 2:43 it's recommended that you use the flex shorthand property, 2:47 instead of the individual properties. 2:51 Let me show you why [SOUND]. 2:54 Flex is the shorthand for flex-grow, flex-basis, and 2:58 a less commonly used flex-shrink property. 3:03 The flex-shrink property does the opposite of flex-grow. 3:06 So instead of growing the item within the available space it shrinks it. 3:11 You can read more about flex-shrink in the teacher's notes. 3:15 The flex shorthand property intelligently sets some of the values for 3:19 you when you don't specify them. 3:23 So for example, I'm going to delete the flex-grow and 3:26 flex-basis properties from the item rule and set the flex value to one. 3:30 Now, using only one number value sets the flex-grow value of the items. 3:34 So here, I'm setting flex-grow to one. 3:42 Now, the second and third values, for flex-shrink and 3:45 flex-basis, are optional in the flex shorthand. 3:49 So, setting one number value still makes the flex items flexible. 3:53 The value one sets the flex grow to one, and 3:59 it automatically set the flex basis value to zero. 4:02 Which makes the items proportional within the space the flex container, but the flex 4:07 items do not redistribute the space inside the flex container when it's narrowed. 4:11 As you can see here. 4:17 So, they don't break to new lines. 4:18 Because a flex basis of zero means that the items can shrink 4:20 all the way to a width of zero pixels. 4:25 Now I still want their initial size to be 200 pixels, so 4:28 I'll go back to the flex property and set the second value in 4:33 the shorthand to 200 pixels this is the flex basis value [SOUND]. 4:39 So, my layout works exactly like it did earlier, 4:44 before I applied the flex shorthand. 4:48 So, now if I only want to grow the size of an item, 4:51 I can use the flex-grow property on that item so for instance, 4:55 I'll go back to the style sheet and target item two and 4:59 set its flex-grow value to two. 5:05 So item two now gets twice as much space. 5:09 Now I'm not using the flex shorthand here 5:14 because I only want to affect item two's flex-grow factor. 5:18 Using the flex shorthand will reset item two's flex spaces back to zero, 5:22 so, as you can see it doesn't grow at all. 5:28 So, unless you explicitly want to give a flex item a different flex spaces, 5:33 you can simply use flex-grow to expand any of the other items. 5:38 Finally, if you're not setting a flex-basis or flex-shrink value, 5:47 you can still set a flex-grow using the flex shorthand. 5:52 So, in the item rule, I'm going to delete the flex base's value of 200 pixels, 5:57 and then in item two, I'm going to replace the flex-growth 6:03 declaration with the flex shorthand and I'll set the value to two. 6:07 Back in the browser, item two still gets twice as much space as the other flex 6:13 items but remember, the flex shorthand sets the flex-basis value to zero. 6:18 So the flex items do not redistribute the space inside the flex container 6:25 by breaking to a new line. 6:29 Coming up in the next videos, you'll learn how to align flex items on the cross axis, 6:33 and how to achieve perfect horizontal and vertical centering with flex box. 6:37
You need to sign up for Treehouse in order to download course files.Sign up