1 00:00:02,180 --> 00:00:04,380 Time to dive a bit deeper into 2 00:00:04,380 --> 00:00:07,620 the layout of our flex items here. 3 00:00:07,620 --> 00:00:09,500 And the first thing I would like to change 4 00:00:09,500 --> 00:00:12,620 is the alignment of our two items, 5 00:00:12,620 --> 00:00:16,120 because here the diff is on top of this box. 6 00:00:16,120 --> 00:00:19,680 Whereas our nav bar here, is kind of in the middle, 7 00:00:19,680 --> 00:00:22,130 as we have two elements inside of it. 8 00:00:22,130 --> 00:00:24,600 So I would like to bring down the diff a bit 9 00:00:24,600 --> 00:00:29,390 to be kind of in the center of these two elements. 10 00:00:29,390 --> 00:00:31,270 And for this, we have a property, 11 00:00:31,270 --> 00:00:33,960 we know already from this course, align-items. 12 00:00:33,960 --> 00:00:37,760 And this also works here in a flexbox context 13 00:00:37,760 --> 00:00:41,230 because of align-items center, we can quickly do this. 14 00:00:41,230 --> 00:00:44,843 Now, these two items are on the same level, so to say. 15 00:00:46,010 --> 00:00:50,770 Besides that, I don't like the way the space is used 16 00:00:50,770 --> 00:00:53,180 in our entire header here. 17 00:00:53,180 --> 00:00:55,410 Because normally we would like to have our 18 00:00:55,410 --> 00:00:59,000 travel goals logo here, to the left of our page. 19 00:00:59,000 --> 00:01:02,260 Whereas the two destinations and about elements 20 00:01:02,260 --> 00:01:03,730 should be to the right here. 21 00:01:03,730 --> 00:01:07,050 So these should actually be right here, to the right part 22 00:01:07,050 --> 00:01:09,773 of our entire flex container. 23 00:01:10,980 --> 00:01:13,360 We can achieve this with another property, 24 00:01:13,360 --> 00:01:17,200 specifically used here in a flexbox context. 25 00:01:17,200 --> 00:01:20,630 And this property is called justify-content, 26 00:01:20,630 --> 00:01:22,890 you see lots of different options. 27 00:01:22,890 --> 00:01:26,860 I just want to show you some of the core rules you will use 28 00:01:26,860 --> 00:01:28,430 when working with flexbox. 29 00:01:28,430 --> 00:01:32,020 And this would be space-between here. 30 00:01:32,020 --> 00:01:33,790 If we do that, 31 00:01:33,790 --> 00:01:36,600 then what is happening is that flexbox 32 00:01:36,600 --> 00:01:40,230 checks the elements inside the flex container. 33 00:01:40,230 --> 00:01:42,310 So here our div and the nav bar, 34 00:01:42,310 --> 00:01:44,560 and we see that compared to the width 35 00:01:44,560 --> 00:01:47,500 of the entire container, of 600 pixels, 36 00:01:47,500 --> 00:01:50,270 there is some space that can be used to the right. 37 00:01:50,270 --> 00:01:52,010 If I comment this out quickly, again, 38 00:01:52,010 --> 00:01:55,220 you see I'm talking about this space here. 39 00:01:55,220 --> 00:01:56,850 So what flexbox then does with 40 00:01:56,850 --> 00:01:58,600 justify-content, space-between, 41 00:01:58,600 --> 00:02:01,870 it says, okay, the first element should be here. 42 00:02:01,870 --> 00:02:03,000 And then the space, 43 00:02:03,000 --> 00:02:04,080 the remaining space, 44 00:02:04,080 --> 00:02:07,800 should be added between the remaining elements we have. 45 00:02:07,800 --> 00:02:11,470 So this means we will push this element to the right, 46 00:02:11,470 --> 00:02:14,870 which is exactly the behavior we need for our purposes here, 47 00:02:14,870 --> 00:02:16,520 to create this navigation bar. 48 00:02:16,520 --> 00:02:18,743 With this, we achieved this goal. 49 00:02:19,990 --> 00:02:22,420 We also have other options here, though. 50 00:02:22,420 --> 00:02:25,030 For example, space-around, 51 00:02:25,030 --> 00:02:27,970 with this, your remaining space will be divided 52 00:02:27,970 --> 00:02:29,210 between the elements. 53 00:02:29,210 --> 00:02:32,380 So we see we have a space here, there, and there. 54 00:02:32,380 --> 00:02:33,820 That will be one option. 55 00:02:33,820 --> 00:02:36,470 Another one would be space-evenly. 56 00:02:36,470 --> 00:02:39,140 Just to give you a few examples here with that. 57 00:02:39,140 --> 00:02:41,090 The remaining space that we had at the end 58 00:02:41,090 --> 00:02:43,410 of our flex container, would be divided 59 00:02:43,410 --> 00:02:47,343 well evenly between the gaps we have in our project. 60 00:02:48,260 --> 00:02:50,380 Besides that, we also have other 61 00:02:51,680 --> 00:02:53,640 values like center here, 62 00:02:53,640 --> 00:02:55,340 with that the space would be added to the 63 00:02:55,340 --> 00:02:56,830 left and to the right. 64 00:02:56,830 --> 00:03:01,700 And two more values, which are flex-start, 65 00:03:01,700 --> 00:03:04,970 so this will be the default case, and flex end, 66 00:03:04,970 --> 00:03:06,540 which would push those two elements 67 00:03:06,540 --> 00:03:08,960 towards the end of the container. 68 00:03:08,960 --> 00:03:11,700 We'll stick with space-between though, 69 00:03:11,700 --> 00:03:14,570 because that's what we need for our nav bar. 70 00:03:14,570 --> 00:03:16,640 By the way, it's not required to remember 71 00:03:16,640 --> 00:03:19,840 all these values or properties by heart. 72 00:03:19,840 --> 00:03:22,600 I just want to show you the core properties and values 73 00:03:22,600 --> 00:03:23,883 in this video here. 74 00:03:25,060 --> 00:03:28,060 Attached to the last lecture of this module, 75 00:03:28,060 --> 00:03:31,880 you can find a quick summary of all the flex properties 76 00:03:31,880 --> 00:03:33,010 and values we have. 77 00:03:33,010 --> 00:03:36,300 And what effect these have on the elements 78 00:03:36,300 --> 00:03:38,303 in the flexbox context. 79 00:03:39,240 --> 00:03:40,550 We've justified content, 80 00:03:40,550 --> 00:03:43,470 we achieved some nice goals already. 81 00:03:43,470 --> 00:03:45,550 We are coming closer towards a 82 00:03:45,550 --> 00:03:49,020 navigation bar like look for our header. 83 00:03:49,020 --> 00:03:53,270 But now the problem is our nav element itself. 84 00:03:53,270 --> 00:03:56,860 So this element here, as you see the two links, 85 00:03:56,860 --> 00:03:59,720 which will be linked in our project destinations and about, 86 00:03:59,720 --> 00:04:02,630 are below each other and not next to each other. 87 00:04:02,630 --> 00:04:03,630 And additionally, 88 00:04:03,630 --> 00:04:06,110 these should be also well positioned 89 00:04:06,110 --> 00:04:08,890 at the right of the page and not right here. 90 00:04:08,890 --> 00:04:11,303 These are the next things, we'll have a look at.