Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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