"Java Data Structures - Retired" was retired on May 31, 2019. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Flexbox Layout!
You have completed CSS Flexbox Layout!
Preview
With flexbox, it's simple to create flexible multi-column layouts without using floats or inline-block display.
Video review
- You can assign an equal amount of space to columns with the
flex-growandflexproperties.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
With Flexbox, you can create flexible,
multicolumn layouts without using floats
0:00
or the display property's
inline-block value.
0:05
So in our layout when the view port or
device is 769 pixels or
0:08
wider, I want the two columns to
appear side by side, like this.
0:13
And if the viewport is 1020 pixels or
0:18
wider, I want the primary
content column on the left
0:21
to take up twice as much space as
the secondary content column on the right.
0:24
In the index.html file,
both the primary and
0:29
secondary content columns are inside
a div with the class row.
0:33
So first I'll make row the flex
container for the two columns.
0:38
Back in flexbox.css, inside the first
media query, I'll group the class
0:42
row with the main-header and
the main-nav selectors to display it flex.
0:48
When I preview the workspace in
the browser, both the primary and
0:55
secondary columns are now flex items, so
0:59
they display on the same line once
the viewport is 769 pixels or wider.
1:02
Now the primary content column is
wider than the secondary column,
1:09
because it contains more content.
1:14
And the secondary column
looks a little too narrow,
1:16
depending on the viewport width.
1:19
So at this breakpoint,
I want equal width columns.
1:21
You can assign an equal amount of space
to flex items with the flex grow and
1:25
flex properties.
1:29
So back inside the first
media query in flexbox.css,
1:31
I'm going to create a new rule
that targets the class col.
1:35
Then I'm going to add a flex property and
set the value to 1.
1:40
So now each column takes up an equal
amount of space inside the row.
1:45
They each take up half the space.
1:50
At the widest break point,
I want the primary
1:54
content column here to get twice as
much space as the secondary column.
1:57
So back inside flexbox.css, I'll scroll
down to the second media query and
2:02
I'm going to select the class primary and
give it a flex value of two.
2:08
So now for every bit of space
the secondary column gets,
2:18
the primary column will always
get twice as much of that space.
2:22
So that's it.
2:26
Our two-column layout is complete.
2:27
Coming up in the next video,
we'll add a third column to the row and
2:31
adjust the layout with Flexbox.
2:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up