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
Flexbox is a remarkable layout feature that's redefined how web designers build responsive layouts. With flexbox you can change the direction, size, and order of elements, like navigation links, content columns and images, regardless of their original size and order in the HTML. By the end of this course, you'll be able to build complex layouts in less time using flexbox.
Resources
Video review
- CSS layout methods like floats, inline-block and absolute positioning have limitations and were not designed to handle the layout demands of today’s complex responsive websites.
- With flexbox you get the benefits of floats, block and inline-block, like stacking elements and laying them out side-by-side, without any of the strange browser behaviors that come with using them.
- For example, You can evenly distribute the space inside a container so that the columns are of equal width.
- You can grow the width of one column while automatically shrinking the width of the two columns beside it.
- You can easily rearrange column order and display columns vertically on smaller screen sizes, without ever changing the markup.
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
[SOUND] Hey everyone, I'm Guil.
0:00
Thanks for joining me here in CSS Flexbox
Layout where you'll learn one of the most
0:06
advanced methods for laying out webpages.
0:10
CSS lab methods like floats,
0:13
in line block and absolute positioning
have certain limitations and were not
0:15
designed to handle the layout demands
of today's complex responsive websites.
0:19
Floats, for example,
weren't even intended for
0:24
page layout, they were really meant for
wrapping text around images.
0:26
As you learned in CSS Layout Basics,
0:31
floats can be problematic because
of their quirky behavior.
0:33
They require clear fixes to prevent
containing elements from collapsing.
0:36
And with inline block display
you're always fighting with
0:40
the default white space
created by the browser.
0:43
And positioning can be tricky in page
layout because it requires positioning
0:46
context and
0:49
other content on the page behaves as if
the positioned elements didn't even exist.
0:51
So, Flexbox, or Flexible Box Layout
0:56
is a set of CSS properties that proved
a flexible way to layout page content.
0:59
It's a remarkable layout feature that's
redefined how web designers build layouts.
1:04
You get the benefits of floats,
1:09
block, and inline block like stacking
elements and laying them out side by side
1:11
without any of the strange browser
behaviors that come with using them.
1:16
With Flexbox you can change the direction,
size and order or
1:20
elements, like navigation links,
content columns and
1:24
images, regardless of their original
size and order in the HTML.
1:27
And it gives you simple yet intelligent
tools for placing your content anywhere
1:31
from top to bottom, left to right,
center, and middle of a container.
1:36
No matter where they
appear in the source code.
1:40
You could even stretch and
shrink elements and distribute space.
1:42
[NOISE] For instance,
you can create three equal height columns,
1:46
regardless of which column is the tallest.
1:49
Then, lay them out on the same line by
aligning the first column to the left edge
1:52
of its container.
1:56
And the last column to the right edge,
1:57
while the second column sits
perfectly between the two.
1:59
You can evenly distribute
the space inside the container so
2:02
that the columns are of equal width.
2:06
Or you can grow the width of one column,
2:08
while automatically shrinking the width
of the two columns beside it.
2:10
And you can easily rearrange
the column order and
2:14
display them vertically on small screen
sizes without ever changing the markup.
2:16
So all this with just a few lines of CSS.
2:21
This makes building responsive
layouts that scale from small
2:25
mobile devices to large desktop
screens easier than ever.
2:28
So I'm excited to introduce
you to the powers of Flexbox.
2:32
By the end of this course you'll be able
to build complex layouts in less time
2:35
using Flexbox.
2:39
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