- Controlling the Direction of Flex Items 3:47
- Wrapping Flex Items 2:33
- Distributing Space Inside a Flex Container 5:55
- Changing the Order of Flex Items 5:32
- Wrapping Items and Distributing Space 3 objectives
- Growing Flex Items 3:42
- Smarter Layouts with flex-basis and flex 6:42
- Aligning Flex Items on the Cross Axis 3:43
- Growing and Aligning Flex Items 3 objectives
- Vertical and Horizontal Centering 4:14
- Flexbox Properties Review 6 questions
Preview
Video Player
00:00
00:00
Smarter Layouts with flex-basis and flex
6:42Learn 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.
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