Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- 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
00:00
- 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
Centering content is one of the trickiest and more difficult things to do in CSS layout when using properties like float, display or position. In this video, you'll learn why flexbox is the smartest solution when it comes to centering content.
Resources
- A Complete Guide to Flexbox
- Flexbox - latest browser support
- Flexbox Froggy - A fun way to practice flexbox
Three ways to center-align elements using flexbox
Set the flex container's justify-content and align-items values to center:
.container {
justify-content: center;
align-items: center;
}
Set the flex container's justify-content value to center, while setting the flex item's align-self value to center:
.container {
justify-content: center;
}
.item {
align-self: center;
}
Set the flex item's margin value to auto:
.item {
margin: auto;
}
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
Centering content is one
of the trickiest and
0:00
more difficult things to do in CSS layout.
0:02
Even vertical centering and centering
elements perfectly inside fluid containers
0:04
are things web designers and
developers usually struggle with
0:09
when using layout properties like float,
display, or position.
0:12
By now, you've seen that you
can align content vertically or
0:17
horizontally quite painlessly using
Flexbox properties like align-items,
0:20
align-self and justify-content.
0:24
So in this video, I'll show you why
Flexbox is the smartest solution
0:28
when it comes to centering content.
0:32
You can follow along using
the latest workspace,
0:34
by launching the workspace on this page.
0:37
In the index.html file,
we still have the same flex container div,
0:39
but this time there's only
one flex item inside.
0:45
The flex container has
a fluid min height of 50vh.
0:50
This means that the container's
height will always take up
0:56
half the viewport height as you
can see here in the preview.
0:59
Now, I want to align the flex item so
1:03
that it's positioned perfectly
in the center of the container.
1:05
So there are three different ways I
can center this item using Flexbox.
1:10
First, I can set container's justify-content
and align-items values to center.
1:15
I can also set container's
justify-content value to center,
1:21
while setting the item's
align-self value to center, or
1:25
I can simply set the item's
margin value to auto.
1:29
So, let's take a look
at these three options.
1:33
Back inside flexbox.css,
I'll start by adding a justify-content
1:35
property inside the container rule and
setting the value to center.
1:41
Now right below
the justify-content property,
1:47
I'll add the align-items property and
set the value to center as well.
1:50
With these two declarations,
1:58
the item displays perfectly
centered inside the container.
1:59
Back in my style sheet, I can also
target the item and center align
2:06
it on the cross axis using the align-self
property and the value center.
2:11
So now, I can remove the align-items
property from the container rule,
2:19
and when I refresh the browser,
we can see that the result is the same,
2:24
still positioned perfectly in the center,
no matter the container's width and height.
2:28
So by now, you know that a margin value
of auto has a significant effect on flex
2:33
items, because the value auto will absorb
any extra space around a flex item.
2:38
So if I use a margin on the flex item,
2:45
I don't even need to include a justify-content
or align-self property.
2:48
So I'll remove the justify-content
declaration from the container rule and
2:53
in the item rule I'll delete
the align-self declaration.
2:58
And now I can simply set the item's
margin value to auto and the browser
3:02
automatically inserts the extra space
on all four sides of the flex item.
3:09
So there you have it,
perfect horizontal and vertical centering.
3:14
Now, there's no right or wrong solution
here as each method does the trick
3:18
the method you use to center
content is up to you.
3:23
You learned a whole lot more about
Flexbox in this section of the course,
3:27
we even went over some ideas on how you
can use these features in your projects.
3:30
You should feel like you've gained
a new CSS layout super power,
3:34
because now you have the tools necessary
to build websites using Flexbox.
3:37
So, well done.
3:41
As I'm recording this video, Flexbox
is supported in every modern browser
3:43
with a few known issues in Chrome,
Safari, Firefox, and Internet Explorer.
3:47
IE10 has partial support for Flexbox and
3:52
older versions of Internet Explorer
like IE9 do not support Flexbox.
3:55
So before using Flexbox in your projects,
be sure to check a resource like,
4:00
caniuseit.com to see
the latest in browser support.
4:04
Coming up in the next section,
4:08
you're going to use your new Flexbox
skills to build a responsive webpage.
4:09
See you then.
4:13
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