1 00:00:01,060 --> 00:00:05,870 Now that we've seen an example of a line items let's move on to our next flex box property. 2 00:00:05,920 --> 00:00:09,430 This is going to be another property that we're going to add onto a parent element and it's going to 3 00:00:09,430 --> 00:00:12,740 customize how all the children are laid out inside there. 4 00:00:12,830 --> 00:00:18,730 The next property we're going to discuss is flex direction by default flex direction is column on every 5 00:00:18,730 --> 00:00:25,540 single element Lex direction is going to control whether children are laid out vertically or horizontally. 6 00:00:25,570 --> 00:00:29,380 So once again by default it's always going to be column which means all of our children are laid out 7 00:00:29,380 --> 00:00:30,860 from top to bottom. 8 00:00:30,910 --> 00:00:36,520 We can change it to a flex direction of row which will make all of our children lay themselves out horizontally 9 00:00:36,520 --> 00:00:37,720 instead. 10 00:00:37,750 --> 00:00:42,790 Now in the last video when we were discussing a line items I said that the behavior of a line items 11 00:00:43,060 --> 00:00:47,350 would change ever so slightly depending upon some other property value. 12 00:00:47,470 --> 00:00:49,810 And that is actually flex direction. 13 00:00:49,810 --> 00:00:54,610 So by default if we have a flex direction of column as we do right there that's going to make our line 14 00:00:54,640 --> 00:00:57,310 items property function horizontally. 15 00:00:57,320 --> 00:01:02,560 So essentially whenever flex direction is column a line items is going to lay stuff out in the horizontal 16 00:01:02,560 --> 00:01:03,620 direction. 17 00:01:03,820 --> 00:01:09,850 But if we change flex direction to row instead then the direction in which a line items functions is 18 00:01:09,850 --> 00:01:15,700 going to change as well and it's going to instead start to control how elements are laid out vertically. 19 00:01:15,760 --> 00:01:19,720 So let's start playing around with Flex direction just a little bit and understand how it's going to 20 00:01:19,720 --> 00:01:22,310 change a line items all right. 21 00:01:22,310 --> 00:01:26,450 So back inside my editor I'm going to find where we set that line items property. 22 00:01:26,690 --> 00:01:32,870 I'm going to delete that one and we're going to change it to flex direction so once again the default 23 00:01:32,870 --> 00:01:34,040 value is column. 24 00:01:34,040 --> 00:01:38,930 So if we ever put in a flex direction of column well things are going to look just a okay or pretty 25 00:01:38,930 --> 00:01:40,690 much as they usually do. 26 00:01:40,700 --> 00:01:45,080 So it's actually kind of uncommon that we're ever going to have to set flex direction of column. 27 00:01:45,080 --> 00:01:48,380 Instead it's much more likely that we'll do a flex direction of row. 28 00:01:48,380 --> 00:01:51,060 So that's going to override the default behavior. 29 00:01:51,290 --> 00:01:56,820 So we can now save this and now we'll see all of our children laid out horizontally instead. 30 00:01:57,170 --> 00:02:02,690 In this case we're not really seeing any kind of a line items action here because the view element that's 31 00:02:02,690 --> 00:02:07,210 wrapping them is kind of shrinking down just to encapsulate these three different children. 32 00:02:07,430 --> 00:02:10,720 But we could set a hardcoded height on this view style right here. 33 00:02:10,910 --> 00:02:14,510 And if we did well then see a line items in action. 34 00:02:14,510 --> 00:02:14,780 All right. 35 00:02:14,780 --> 00:02:18,650 So going to add into the view style a height of 200 36 00:02:21,860 --> 00:02:22,870 and there we go. 37 00:02:22,880 --> 00:02:27,260 So what you're seeing right here is the default behavior or the default value of a line items. 38 00:02:27,260 --> 00:02:29,990 Remember the default is stretch. 39 00:02:29,990 --> 00:02:34,400 That means that our children by default are going to stretch and take up as much space as they possibly 40 00:02:34,400 --> 00:02:38,870 can before when we were making use of the default behavior. 41 00:02:38,870 --> 00:02:44,360 We had a default value flex direction of column which means our children tried to span as much horizontal 42 00:02:44,360 --> 00:02:50,630 space as possible but because we changed flex direction to row that changed the default direction or 43 00:02:50,630 --> 00:02:52,520 the way in which a line items is working. 44 00:02:52,550 --> 00:02:57,590 So now it's trying to stretch items vertically as opposed to horizontally which is why we're seeing 45 00:02:57,590 --> 00:02:58,520 this. 46 00:02:58,790 --> 00:03:04,580 We can now start to make use of that a line items property again so we can set in a line items of like 47 00:03:04,580 --> 00:03:05,670 center. 48 00:03:05,720 --> 00:03:10,520 And that's going to try to make all of our children lay themselves out at the very center of that parent 49 00:03:10,520 --> 00:03:11,310 view. 50 00:03:11,450 --> 00:03:13,430 Let's try saving that. 51 00:03:13,430 --> 00:03:14,270 And there we go. 52 00:03:14,270 --> 00:03:20,090 We can also do a like start number that's going to make all of our children kind of smushed up against 53 00:03:20,090 --> 00:03:30,830 the front edge and we can do a flex end which will move them down to the very bottom instead. 54 00:03:30,840 --> 00:03:34,160 All right so that's flex direction. 55 00:03:34,250 --> 00:03:38,750 Again we basically just use it to get elements to light themselves out horizontally versus vertically 56 00:03:39,140 --> 00:03:42,020 and it changes the way in which aligned items work. 57 00:03:42,050 --> 00:03:44,930 There's one other property around flex box I want you to understand. 58 00:03:44,950 --> 00:03:47,150 So let's take a look at that last property in the next video.