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
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
displayproperty of an element to one of the flexbox layout values:flexorinline-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 upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that you know the basic concepts and
terminology, you're ready to learn
0:00
the first step in creating a flex box
layout, defining the flex container.
0:04
To follow along using Workspaces,
launch the Workspace on this page.
0:09
You can also download the files to
follow along with your own text editor,
0:12
if you prefer.
0:16
In the Workspaces, in the index.html file
you'll see a div with the class container.
0:17
Nested inside the container div are six
divs that share the class item.
0:24
In the CSS folder you'll see
the files flexbox.css and page.css.
0:32
In page.css I've added some
base styles for the page.
0:38
You can see the base styles once you
preview the Workspace in the browser.
0:42
As you can see, the container has
a white background color, and
0:47
the item divs inside have
a light blue background color.
0:51
There's also a five pixel
margin around the item divs.
0:54
We're going to write our Flexbox
layout styles here inside flexbox.css.
1:00
Currently, the item divs are in
the normal document flow.
1:07
They display as stacked
block level elements
1:11
in the order they appear in the mark up.
1:15
When you apply Flexbox layout to
these items, you can place them
1:17
anywhere in the container, for example,
if you make them appear side by side, and
1:21
make the last item appear first,
or even second, third or fourth.
1:26
Before you can use any Flexbox property,
1:30
you need to define a flex
container in your layout.
1:33
So, I'm going to make the parent
container div, the flex container.
1:36
Flexbox gives you a whole new way
of using the CSS display property.
1:42
You create a flex container by setting
the display property of an element
1:46
to one of the Flexbox layout styles.
1:51
So inside flexbox.css I'm
going to create a new rule
1:53
that targets the class container.
1:57
I'll give it a display property and
set the value to flex.
2:01
Now I've established a flex formatting
context inside the container div.
2:07
So every item div inside the container
div automatically becomes a flex item.
2:13
So let's take a look at how the value
flex changed the container's layout.
2:20
I'll save my style sheet, and
once I refresh the browser,
2:25
we're now seeing the default
behavior of Flexbox layout.
2:28
So the flex items are laid out
2:33
horizontally on the main
axis from left to right.
2:35
And they're also laid out on the cross
axis from the top start side
2:39
to the bottom inside
of the flex container.
2:44
So that means that the flex items expand
2:47
to fill the full height
of the flex container.
2:50
So let's what happens when I increase
the height of the container.
2:53
Back inside flexbox.css
I'll give the container
2:56
rule a height property and
set the value to 300 pixels.
3:02
As you can see, the flex items stretch
to fill the flex container height.
3:08
They're stretched from top to bottom.
3:13
So from the start of the cross axis
to the end side of the cross axis.
3:15
So now we have a Flexbox layout.
3:22
Pretty simple so far, right?
3:24
By default, display flex creates
a block level flex container.
3:27
The flex container takes up a full line,
but
3:32
it doesn't have to take up a full
line if you don't want it to.
3:36
The display value inline-flex creates an inline level flex container.
3:40
As you can see, there is no difference
in the effect on flex items.
3:46
The flex container now behaves
like an inline element and
3:50
takes up as much space as its content.
3:53
So it can lay out beside other inline
content, but I'll go ahead and
3:56
change the display value back to flex.
4:00
Remember in Flexbox any element outside
4:05
a flex container is not
affected by the Flexbox layout.
4:07
Only children of a flex container
automatically become flex items.
4:12
So that means if I add a new div
outside of the container div,
4:17
it will not be affected
by flex box properties
4:21
unless I also set its display
value to flex or inline-flex.
4:24
We're just getting started.
4:30
In the next section of the course,
you'll start to see why Flexbox is one of
4:32
the most intelligent and efficient layout
solutions in web design and development.
4:35
You're gonna learn advanced
Flexbox properties for
4:40
layout direction, order,
alignment, sizing, and more.
4:42
And after that,
you'll build a responsive webpage layout
4:45
using your new Flexbox skills.
4:48
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