One 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.

Like this, now using floats or other layout methods, it's really

tricky to align content to the bottom of a container, but not with flex box.

So let me show you how.

You can follow along using the latest workspace,

just launch the workspace on this page.

Or download the project files to use your own text editor.

When you preview the index.html page in a browser,

you'll see three equal height columns containing a heading,

some paragraphs, and a fancy button below the paragraphs.

Now the column on the right contains the most amount of content.

These columns are flex items, so the first and

second column stretch to match the height of the third column.

But you'll see that each column also has a button

that appears below the content in each column.

Now the design would have more visual consistency

if the three buttons all aligned along the bottom edge of the columns,

even when the text in each column is different.

So flex box makes aligning these buttons to the bottom super simple.

I'll show you how.

In flexbox.css the parent row is already a flex container.

Its display value is set to flex which,

as you know, makes all three columns equal in height by default.

Now earlier in this section you learned that it's possible for

an element to be both a flex item and a flex container.

So now I'll need to make the columns flex containers so that I can have

full control over the direction and alignment of the content inside them.

So to make the columns a flex container, I'll simply group the class call

with the to her flex container classes in the media query.

Now each column is a flex container.

So that means that the heading,

paragraphs and buttons inside them are all flex items.

Now flex containers display their children flex items horizontally, by default.

So now the heading, paragraphs and buttons are laid out on the same line.

This is an easy adjustment.

To fix this, I'll go over to the .col rule inside the top media query,

and I'll set the flex-direction value to column.

Now the flex items are vertically stacked inside their columns.

But this doesn't solve the button alignment problem.

By now you know that a margin value of auto has an effect on flex item alignment,

because it absorbs any extra space around a flex item and

pushes other flex items into different positions.

So, see if you can figure out what we need to do to align the buttons to

the bottom of each column.

Back inside the top media query,

I'm going to create a new rule that targets the button flex items.

And give them a margin top property.

When I set the value to auto.

[SOUND] Nice!

It pins the buttons to the bottom of the columns.

The browser automatically inserts the extra space in a column

between the button and the flex item above it.

Now if you don't want your buttons to stretch the full width of a column

you can change their alignment on the cross axis using the align self property.

So back inside the button rule I'll add the align

self property and I"ll set the value to flex start.

Which aligns the buttons to the left edge of the columns.

Now, if I want to align them to the right edge, I can use the value flex-end.

[SOUND] Great.

So, in the next video, I'll show you the quickest and easiest method for

creating a sticky footer in your layout.