- 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
Growing Flex Items
3:42With flexbox you can make flex items grow or shrink in relation to other flex items and the available space inside the flex container.
With flexbox you can make flex items grow
or shrink in relation to the other flex
0:00
items and the available space
inside the flex container.
0:05
For example,
I can expand the flex items so
0:09
that they fill up
the entire flex container.
0:12
Then I can expand the first, second,
0:15
or any flex item to take up
more space in the container.
0:17
The flex-grow property determines
how much of the available space
0:21
inside the flex-container
an item should take up.
0:25
So, it assigns more or
less space to flex items.
0:28
By default, flex items in a flex container
do not take up the full space of a line.
0:32
But, you can expand the flex items so
0:39
that they fill up the entire line
using the flex-grow property.
0:41
Back in my workspace,
inside flexbox.css, I'm going to target
0:46
all the flex items by creating a new
rule that targets the class item.
0:51
Then I'm going to give
them a flex-grow property.
0:58
The default value for flex-grow is zero.
1:02
The flexed items do not expand.
1:06
So watch what happens when I
set their flex-grow value to 1.
1:09
Now all the items have the same
size in the container.
1:17
The flex items expand to take
up the full space of a line.
1:21
Even as the flex container gets narrower,
the flex items adjust to the width.
1:25
When the flex container can no longer
distribute an equal amount of space on one
1:33
line, It breaks items on to a second line
where it also gives the items equal space.
1:38
So notice how item six expands to take up
the full space of the second line and once
1:45
item five moves down to the second line
they each take up half the line and so on.
1:51
So this is a handy feature for
building responsive layouts.
1:58
For instance, you can display a certain
number of equal width columns on one row
2:02
on wide desktop screens.
2:07
Then on smaller screens where
the row will be much narrower,
2:09
some of the columns appear on a second or
third line.
2:13
The higher the flex grow value, the more
an item grows relative to the other items.
2:17
So, for instance,
if I go back to the style sheet and
2:21
if I create a new rule
that targets item-3,
2:26
and give it a flex-grow value of two.
2:31
So for every bit of space the other
flex items get on one line,
2:35
Item 3 will always get twice
as much of that space.
2:39
And if I go back to the item-3 rule and
change the flex-grow value to 3,
2:44
this will give it three times
the amount of space. So again,
2:50
this is great for
building flexible columns.
2:55
Say I'm creating a two column layout.
2:59
So for instance,
I'll go over to my HTML file and
3:01
comment out all but items one and two.
3:05
So this for example can be a main
content column and a sidebar.
3:09
So now I can go back to my style sheet and
give the main column a larger flex-grow
3:15
so I'll target item-1 and set
its flex-grow to four.
3:21
This way it will always take
up four times as much space
3:26
as the sidebar. The flex-grow
property applies to flex items only.
3:31
If you apply flex-grow to a flex
container, it will have no effect on it.
3:37