1 00:00:01,020 --> 00:00:05,430 In this video we're going to get a handle on some of the basics around a flex Box model. 2 00:00:05,460 --> 00:00:10,380 So once again we're going to use the Flex box system any time we want to position some number of common 3 00:00:10,440 --> 00:00:13,480 sibling elements inside of one common parent. 4 00:00:13,500 --> 00:00:18,270 So in other words we're kind of talking about this situation right here where we've got some maybe view 5 00:00:18,300 --> 00:00:21,690 element that has three different texts inside of it. 6 00:00:21,690 --> 00:00:26,430 We would use the Flex box system to control how these three text elements are laid out inside of this 7 00:00:26,430 --> 00:00:27,540 view. 8 00:00:27,540 --> 00:00:33,100 So we might have some view represented by this big white box and text one two three inside of it. 9 00:00:33,990 --> 00:00:35,800 It's going to flip back over to my code editor. 10 00:00:35,880 --> 00:00:40,590 We're going to adjust our component and add in a couple more text elements so we can then start to style 11 00:00:40,830 --> 00:00:46,620 using the Flex box system gets SO BACK OVER HERE I'M GOING TO FIND MY TEXT element and I'm going to 12 00:00:46,620 --> 00:00:55,400 duplicate it twice like so I'm then going to change the text inside of it to child number one child 13 00:00:55,460 --> 00:00:58,670 number two and child number three. 14 00:00:58,670 --> 00:01:05,090 Like so I'll then go back down to my styles object right here and I'm going to kind of lighten up on 15 00:01:05,090 --> 00:01:07,940 some of the box object model properties inside of here. 16 00:01:07,970 --> 00:01:13,580 So in particular I'm going to drop off that margin I'm going to change the border with to about just 17 00:01:13,640 --> 00:01:16,280 three and we'll leave it there for right now. 18 00:01:16,970 --> 00:01:18,240 So I'll save this. 19 00:01:18,500 --> 00:01:20,970 And now I should see something like this appear. 20 00:01:21,090 --> 00:01:21,600 OK. 21 00:01:21,710 --> 00:01:23,570 So we talk about the flex box system. 22 00:01:23,570 --> 00:01:28,390 We're essentially talking about how these child children get laid out inside this single view. 23 00:01:28,400 --> 00:01:32,750 You'll notice that right away we very clearly have some default settings here for how these children 24 00:01:32,750 --> 00:01:33,900 get laid out. 25 00:01:33,910 --> 00:01:37,670 It's the first thing once you understand is a couple of different properties that are tied to the Flex 26 00:01:37,670 --> 00:01:41,300 box system and what their default values are. 27 00:01:41,310 --> 00:01:41,890 All right. 28 00:01:41,910 --> 00:01:47,430 So the first property we're going to look at is something called a line items the line items property 29 00:01:47,520 --> 00:01:49,680 is a property that we set on the parent element. 30 00:01:49,680 --> 00:01:54,930 So in this case our view depending upon the value of a line items our children are going to be laid 31 00:01:54,930 --> 00:01:59,790 out slightly differently specifically in the horizontal direction. 32 00:01:59,790 --> 00:02:01,080 That's something I want you to know right. 33 00:02:01,230 --> 00:02:05,910 Right away as I'm saying that this is going to affect how our children get laid out horizontally. 34 00:02:05,910 --> 00:02:09,870 But there is another rule that we're going to take a look at that's going to significantly impact how 35 00:02:09,900 --> 00:02:11,400 a line items works. 36 00:02:11,400 --> 00:02:13,720 We'll discuss that in just a moment. 37 00:02:13,770 --> 00:02:17,380 The default setting for a line items is stretch. 38 00:02:17,400 --> 00:02:22,830 That means that by default every element with react native that is placed inside of some other element 39 00:02:23,190 --> 00:02:28,100 is going to attempt to stretch and take up as much horizontal space as it possibly can. 40 00:02:28,170 --> 00:02:31,200 And you can see that very easily inside of our simulator right now. 41 00:02:31,200 --> 00:02:32,710 I've got Child 1 2 and 3. 42 00:02:32,760 --> 00:02:37,980 And based upon the presence of that really long border right there it's very clear that this child 1 43 00:02:37,980 --> 00:02:45,720 2 and 3 are attempting to stretch and fill up as much horizontal space as possible we can provide some 44 00:02:45,780 --> 00:02:52,440 other values for a line items on the parent element such as Let's start if we provide a flex start on 45 00:02:52,440 --> 00:02:58,500 the parent then our children 1 2 and 3 are going to kind of condense down to the left hand side as close 46 00:02:58,500 --> 00:03:03,710 as they possibly can while still allowing for some amount of space where the text inside them. 47 00:03:03,750 --> 00:03:09,360 So let's try that out really quickly on my parent element of view style right here or I should say the 48 00:03:10,260 --> 00:03:12,890 style that's being applied to the parent element. 49 00:03:13,020 --> 00:03:23,260 I'll add in and a line items of flex dash start once I save that I'll now see those three pieces of 50 00:03:23,260 --> 00:03:26,160 text all the way to the left hand side. 51 00:03:26,170 --> 00:03:29,900 Notice how they just have enough width to show the amount of content inside them. 52 00:03:30,860 --> 00:03:35,540 We can take a test with these other properties as well so a line items of center is going to center 53 00:03:35,540 --> 00:03:40,300 everything horizontally and flex and is going to shove everything to the right hand side. 54 00:03:40,460 --> 00:03:44,660 There are one or two other values of a line items but honestly I don't really expect you have to use 55 00:03:44,660 --> 00:03:45,530 them that often. 56 00:03:45,550 --> 00:03:48,890 So I'm just kind of showing you a list of the different values of a line items that you probably are 57 00:03:48,890 --> 00:03:55,330 going to need to use on a regular basis let's try and a line items of center really quick well change 58 00:03:55,330 --> 00:04:02,220 out to center and there we go and we can do the same thing for Lex and as well. 59 00:04:02,250 --> 00:04:04,470 And that's going to move everything to the right hand side. 60 00:04:05,230 --> 00:04:05,480 OK. 61 00:04:05,520 --> 00:04:06,690 So not that bad. 62 00:04:06,810 --> 00:04:11,010 Once again the line item is property were always going to add on the parent element. 63 00:04:11,010 --> 00:04:13,650 It's going to control how our children are laid out horizontally. 64 00:04:13,650 --> 00:04:15,290 But there is an exception to that. 65 00:04:15,300 --> 00:04:18,010 Like I said we're gonna discuss that in just a moment. 66 00:04:18,010 --> 00:04:23,400 And once again the default value of a line items is stretch which means all the children inside of some 67 00:04:23,400 --> 00:04:28,380 common parent are going to stretch themselves out horizontally as much as they possibly can. 68 00:04:28,380 --> 00:04:28,600 All right. 69 00:04:28,600 --> 00:04:31,170 So now we understand this first property of a line items. 70 00:04:31,170 --> 00:04:33,270 Let's take a look at our next property in the next video.