🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

A new Figma course has dropped!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Smarter Layouts with flex-basis and flex

6: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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Video review

flex and flex-basis apply to flex items only.
flex-basis specifies 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.
flex is the shorthand for flex-grow, flex-basis and flex-shrink.
Using only one number value for flex sets the flex-grow value of an item.
The second and third values are optional in the flex shorthand.
Setting only one number value for flex automatically sets the flex-basis value to 0.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

To 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 its 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 flexbox evenly distributes the free space according to that size. 1:06

flex-basis 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-basis 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-basis value to 100 pixels, 2:24

The items are now equally sized until they're narrower then 2:31

the flex-basis 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-basis 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-basis, 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

You need to sign up for Treehouse in order to set up Workspace

Sign up