Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Now that you know the basic concepts and terminology, you're ready to learn the first step in creating a flexbox layout: defining the flex container.
Resources
- A Complete Guide to Flexbox
- A Visual Guide to CSS3 Flexbox Properties
- display | MDN
- Flexbox - latest browser support
Video review
- Before you can use any flexbox property, you need to define a flex container in your layout.
- You create a flex container by setting the
display
property of an element to one of the flexbox layout values:flex
orinline-flex
. - By default, flex items are laid out horizontally on the main axis from left to right.
- By default, flex items stretch to fill the flex container's height.
-
display: flex;
creates a block-level flex container. -
display: inline-flex;
creates an inline flex container. - Any element outside a flex container is not affected by the flexbox layout.
- Only children of a flex container automatically become flex items.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up-
Piotr Manczak
Front End Web Development Techdegree Graduate 29,368 Points1 Answer
-
Sean Flanagan
33,236 Points1 Answer
-
Kenneth Thomas
Front End Web Development Techdegree Student 7,891 Points2 Answers
-
Alex Thomas
4,247 PointsDo I need to incorporate the stylings that Guil has on page.css for a personal project?
Posted by Alex ThomasAlex Thomas
4,247 Points1 Answer
-
PLUS
Craig Burkett
Courses Plus Student 537 Points1 Answer
-
Luke Lappen
3,524 Points6 Answers
View all discussions for this video
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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