1
00:00:00,140 --> 00:00:04,630
One common problem Web Designers and
Developers face when building layouts

2
00:00:04,630 --> 00:00:09,270
is figuring out how to align elements
with the bottom-edge of a container.

3
00:00:09,270 --> 00:00:12,540
Regardless of the amount of
content inside the container.

4
00:00:12,540 --> 00:00:17,680
Like this, now using floats or
other layout methods, it's really

5
00:00:17,680 --> 00:00:22,270
tricky to align content to the bottom
of a container, but not with flex box.

6
00:00:22,270 --> 00:00:23,360
So let me show you how.

7
00:00:23,360 --> 00:00:25,880
You can follow along using
the latest workspace,

8
00:00:25,880 --> 00:00:27,830
just launch the workspace on this page.

9
00:00:27,830 --> 00:00:30,910
Or download the project files
to use your own text editor.

10
00:00:30,910 --> 00:00:34,790
When you preview the index.html
page in a browser,

11
00:00:34,790 --> 00:00:38,550
you'll see three equal height
columns containing a heading,

12
00:00:38,550 --> 00:00:42,670
some paragraphs, and
a fancy button below the paragraphs.

13
00:00:42,670 --> 00:00:46,800
Now the column on the right contains
the most amount of content.

14
00:00:46,800 --> 00:00:48,910
These columns are flex items,
so the first and

15
00:00:48,910 --> 00:00:52,710
second column stretch to match
the height of the third column.

16
00:00:52,710 --> 00:00:55,940
But you'll see that each
column also has a button

17
00:00:55,940 --> 00:00:58,690
that appears below
the content in each column.

18
00:00:58,690 --> 00:01:02,320
Now the design would have
more visual consistency

19
00:01:02,320 --> 00:01:06,960
if the three buttons all aligned
along the bottom edge of the columns,

20
00:01:06,960 --> 00:01:09,710
even when the text in
each column is different.

21
00:01:09,710 --> 00:01:14,040
So flex box makes aligning these
buttons to the bottom super simple.

22
00:01:14,040 --> 00:01:15,060
I'll show you how.

23
00:01:15,060 --> 00:01:20,820
In flexbox.css the parent row
is already a flex container.

24
00:01:20,820 --> 00:01:23,590
Its display value is set to flex which,

25
00:01:23,590 --> 00:01:28,400
as you know, makes all three
columns equal in height by default.

26
00:01:28,400 --> 00:01:31,520
Now earlier in this section you
learned that it's possible for

27
00:01:31,520 --> 00:01:35,860
an element to be both a flex item and
a flex container.

28
00:01:35,860 --> 00:01:40,200
So now I'll need to make the columns
flex containers so that I can have

29
00:01:40,200 --> 00:01:44,850
full control over the direction and
alignment of the content inside them.

30
00:01:44,850 --> 00:01:49,670
So to make the columns a flex container,
I'll simply group the class col

31
00:01:49,670 --> 00:01:53,700
with the other flex container
classes in the media query.

32
00:01:53,700 --> 00:01:56,240
Now each column is a flex container.

33
00:01:56,240 --> 00:01:58,470
So that means that the heading,

34
00:01:58,470 --> 00:02:03,230
paragraphs and
buttons inside them are all flex items.

35
00:02:03,230 --> 00:02:08,740
Now flex containers display their children
flex items horizontally, by default.

36
00:02:08,740 --> 00:02:12,960
So now the heading, paragraphs and
buttons are laid out on the same line.

37
00:02:12,960 --> 00:02:15,240
This is an easy adjustment.

38
00:02:15,240 --> 00:02:20,666
To fix this, I'll go over to the .col
rule inside the top media query,

39
00:02:20,666 --> 00:02:24,652
and I'll set the flex-direction
value to column.

40
00:02:27,414 --> 00:02:31,720
Now the flex items are vertically
stacked inside their columns.

41
00:02:33,140 --> 00:02:36,520
But this doesn't solve
the button alignment problem.

42
00:02:36,520 --> 00:02:41,060
By now you know that a margin value of
auto has an effect on flex item alignment,

43
00:02:41,060 --> 00:02:44,390
because it absorbs any extra
space around a flex item and

44
00:02:44,390 --> 00:02:47,700
pushes other flex items
into different positions.

45
00:02:47,700 --> 00:02:51,818
So, see if you can figure out what we
need to do to align the buttons to

46
00:02:51,818 --> 00:02:53,499
the bottom of each column.

47
00:03:01,653 --> 00:03:04,294
Back inside the top media query,

48
00:03:04,294 --> 00:03:09,589
I'm going to create a new rule that
targets the button flex items.

49
00:03:11,030 --> 00:03:13,650
And give them a margin top property.

50
00:03:15,280 --> 00:03:17,155
When I set the value to auto.

51
00:03:17,155 --> 00:03:19,708
[SOUND] Nice!

52
00:03:19,708 --> 00:03:23,259
It pins the buttons to
the bottom of the columns.

53
00:03:23,259 --> 00:03:27,610
The browser automatically inserts
the extra space in a column

54
00:03:27,610 --> 00:03:30,550
between the button and
the flex item above it.

55
00:03:32,570 --> 00:03:37,050
Now if you don't want your buttons to
stretch the full width of a column

56
00:03:37,050 --> 00:03:42,190
you can change their alignment on the
cross axis using the align-self property.

57
00:03:42,190 --> 00:03:46,840
So back inside the button
rule I'll add the align-self

58
00:03:46,840 --> 00:03:51,800
property and I'll set the value to flex-start.

59
00:03:53,640 --> 00:03:57,100
Which aligns the buttons to
the left edge of the columns.

60
00:03:57,100 --> 00:04:03,377
Now, if I want to align them to the right
edge, I can use the value flex-end.

61
00:04:03,377 --> 00:04:06,947
[SOUND] Great.

62
00:04:06,947 --> 00:04:10,862
So, in the next video, I'll show you
the quickest and easiest method for

63
00:04:10,862 --> 00:04:13,090
creating a sticky footer in your layout.