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
A common problem web designers and developers face when building layouts is figuring out how to align elements with the bottom edge of a container, regardless of the amount of content inside the container.
Video review
- An element can be both a flex item and a flex container.
- A
marginvalue ofautoaffects flex item alignment because it absorbs any extra space around a flex item and pushes other flex items into different positions.
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
is figuring out how to align elements
with the bottom-edge of a container.
0:00
Regardless of the amount of
content inside the container.
0:00
Like this, now using floats or
other layout methods, it's really
0:03
tricky to align content to the bottom
of a container, but not with flex box.
0:08
So let me show you how.
0:13
You can follow along using
the latest workspace,
0:14
just launch the workspace on this page.
0:16
Or download the project files
to use your own text editor.
0:18
When you preview the index.html
page in a browser,
0:21
you'll see three equal height
columns containing a heading,
0:25
some paragraphs, and
a fancy button below the paragraphs.
0:29
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