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
So in our layout when the view port or
device is 769 pixels or
0:00
wider, I want the two columns to
appear side by side, like this.
0:04
And if the viewport is 1020 pixels or
0:09
wider, I want the primary
content column on the left
0:12
to take up twice as much space as
the secondary content column on the right.
0:15
In the index.html file,
both the primary and
0:20
secondary content columns are inside
a div with the class row.
0:24
So first I'll make row the flex
container for the two columns.
0:29
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