1
00:00:02,210 --> 00:00:03,680
And let's start this lecture

2
00:00:03,680 --> 00:00:06,340
with a little challenge for you.

3
00:00:06,340 --> 00:00:08,470
With the knowledge we gained so far,

4
00:00:08,470 --> 00:00:12,470
you should be able to make sure that these two elements,

5
00:00:12,470 --> 00:00:16,720
so the list items in our unordered list,

6
00:00:16,720 --> 00:00:20,800
are positioned next to each other, not below each other.

7
00:00:20,800 --> 00:00:24,300
For this, you will have to use the display flex rule.

8
00:00:24,300 --> 00:00:25,870
Make sure to remember the concept

9
00:00:25,870 --> 00:00:28,170
of containers and flex items

10
00:00:28,170 --> 00:00:31,770
and the parent and child relationship these two have,

11
00:00:31,770 --> 00:00:36,010
and, as a bonus, you can also try to align

12
00:00:36,010 --> 00:00:37,570
these two elements,

13
00:00:37,570 --> 00:00:39,330
which should then be sitting next to each other,

14
00:00:39,330 --> 00:00:43,350
to the right of this nav element here.

15
00:00:43,350 --> 00:00:44,400
Give it a try.

16
00:00:44,400 --> 00:00:46,520
Now is your chance to pause the video,

17
00:00:46,520 --> 00:00:48,623
and then we'll solve this together.

18
00:00:53,800 --> 00:00:56,230
How did it go? Were you successful?

19
00:00:56,230 --> 00:00:59,230
Well, it wasn't the biggest challenge, hopefully,

20
00:00:59,230 --> 00:01:01,180
but it was a great way to create

21
00:01:01,180 --> 00:01:04,110
the first flex layout on your own.

22
00:01:04,110 --> 00:01:07,780
Because the awesome thing is that our flex logic

23
00:01:07,780 --> 00:01:11,200
always applies to the parent, so the header here,

24
00:01:11,200 --> 00:01:14,510
and the direct children, the div and the nav element.

25
00:01:14,510 --> 00:01:16,920
So if we want to change the position

26
00:01:16,920 --> 00:01:20,480
of the two list elements here, these two list items,

27
00:01:20,480 --> 00:01:24,910
then why don't we turn our unordered list, here,

28
00:01:24,910 --> 00:01:28,850
into a flex container, which then gives us full control

29
00:01:28,850 --> 00:01:32,580
over these two children, these two flex items,

30
00:01:32,580 --> 00:01:35,770
and that was exactly the way to solve this.

31
00:01:35,770 --> 00:01:38,660
Just go to the unordered list, here,

32
00:01:38,660 --> 00:01:43,240
and add display: flex; which solves the first task.

33
00:01:43,240 --> 00:01:45,933
Again, we know that the flex-direction is row,

34
00:01:46,910 --> 00:01:50,620
therefore this is exactly the alignment we need right here.

35
00:01:50,620 --> 00:01:53,560
And, then, the second task was to make sure

36
00:01:53,560 --> 00:01:56,790
that these two elements are pushed

37
00:01:56,790 --> 00:01:58,870
to the right of the container.

38
00:01:58,870 --> 00:02:03,870
Well, this can be done with our justify-content property,

39
00:02:04,910 --> 00:02:08,520
but this time not space-between, as before,

40
00:02:08,520 --> 00:02:10,400
because then the result would look like this,

41
00:02:10,400 --> 00:02:14,313
but here we can now simply use flex-end.

42
00:02:16,200 --> 00:02:18,530
With that, this challenge is solved.

43
00:02:18,530 --> 00:02:21,000
As a little bonus, don't know if you did that,

44
00:02:21,000 --> 00:02:23,420
if you also want to make sure that the text

45
00:02:23,420 --> 00:02:26,330
is aligned to the right, well, then this can be done

46
00:02:26,330 --> 00:02:29,560
without any flex context here.

47
00:02:29,560 --> 00:02:34,560
Here we can simply use the text-align property,

48
00:02:34,870 --> 00:02:38,740
here on our list items, and align these to the right.

49
00:02:38,740 --> 00:02:41,943
With that, this goal would also be achieved.

50
00:02:42,910 --> 00:02:46,920
And this is our introduction to Flexbox in this course.

51
00:02:46,920 --> 00:02:49,900
As I said, attached to the last lecture of this module,

52
00:02:49,900 --> 00:02:53,010
you can find a summary of all these properties used

53
00:02:53,010 --> 00:02:55,910
and a bit more, but with this knowledge

54
00:02:55,910 --> 00:02:59,750
we are able to create our header and our navigation bar,

55
00:02:59,750 --> 00:03:04,123
and, therefore, we can apply these concepts in practice.