- 00:00:00 everyone welcome back to our flexbox
- 00:00:02 series
- 00:00:03 where as nother series we focused on the
- 00:00:06 flexbox container itself in this video
- 00:00:09 we'll have a look at the children which
- 00:00:12 live inside such a flax container and
- 00:00:15 the properties we can provide to them
- 00:00:17 let's get started one thing I already
- 00:00:22 showed you in the last video but I'm
- 00:00:23 going to repeat it nonetheless is the
- 00:00:26 flag shrink property now if we give her
- 00:00:30 boxes please note that the Box class is
- 00:00:34 the class album or children inside the
- 00:00:37 container app now if we give our boxes
- 00:00:40 the property of slacks shrink and
- 00:00:44 provide value other than 0 for example 1
- 00:00:48 then every box will be allowed to shrink
- 00:00:52 to fit inside this container so at the
- 00:00:55 moment as you can see this is no issue
- 00:00:57 as they're not taking enough space at
- 00:01:00 the moment anyway but what if we
- 00:01:03 decrease the size of our container to
- 00:01:06 let's say 400 pixels 400 pixels now
- 00:01:10 everything will still be fitted inside
- 00:01:14 this container even though as you can
- 00:01:16 see here above in this example the the
- 00:01:20 normal wave of all boxes would be
- 00:01:22 broader than the container dimensions so
- 00:01:27 if we set flex ring to 0 watch what
- 00:01:30 happens now our boxes will have the same
- 00:01:34 width as they do in the above example
- 00:01:36 and therefore they will overlap the
- 00:01:39 container right so there are no longer
- 00:01:43 fitted inside and this is what flex
- 00:01:45 ranked us now I just reset everything
- 00:01:48 and we're looking at the next example
- 00:01:50 flex grow so again our box class let's
- 00:01:55 provide a flex grow of 1 and as you can
- 00:02:00 see what now happens is that even though
- 00:02:04 we have specific width provided for each
- 00:02:07 box these classes here defy the width of
- 00:02:12 our bar
- 00:02:14 they will still stretch out and expand
- 00:02:17 over the full width of our container and
- 00:02:19 this is because we gave every box a
- 00:02:22 property of flex crow now as with Flex
- 00:02:25 rink we don't have to do this for every
- 00:02:28 box we could also pick some specific box
- 00:02:31 so let's say I only want box 1 2 flex
- 00:02:35 crow back box 1 has a class of box 1 in
- 00:02:39 this example and if I do this now you
- 00:02:41 will see every color every box keeps its
- 00:02:45 width I provided what this class is here
- 00:02:47 except for box 1 which would have as you
- 00:02:51 could see a class of W small which is
- 00:02:55 100 pixels but it stretches out to the
- 00:02:59 size of W big which is three times the
- 00:03:02 size now we can get us even further if
- 00:03:07 we go to box 2 which is the broadest box
- 00:03:10 and give it a flex grow of 2 now you can
- 00:03:17 see flex 1 has double the size roughly
- 00:03:21 of its it's normal size we can have a
- 00:03:24 look at it
- 00:03:27 it's one point six six times the normal
- 00:03:33 size and flex 2 has also been increased
- 00:03:37 now what happened here is that box 1 and
- 00:03:42 box you got bigger but box 2 takes more
- 00:03:47 space of the to be filled with space and
- 00:03:51 this is because we gave it a flexed row
- 00:03:53 of 2 whereas this only has a flex grow
- 00:03:56 of 1 and what this means it means us
- 00:03:58 divided up basically what what flex crew
- 00:04:02 does is divided up all to be filled with
- 00:04:05 space the white space here between all
- 00:04:09 boxes which have to flex grow property
- 00:04:13 with a positive integer and then it
- 00:04:16 looks at the relation of these values
- 00:04:20 you provide here and we pay and what
- 00:04:22 this numbers say is that box 2
- 00:04:26 should take twice as much of this
- 00:04:29 remaining space as box one does and
- 00:04:32 every word is said word receptors to
- 00:04:35 eight then you can see box one is bigger
- 00:04:40 than in the above example but only by a
- 00:04:42 tiny bit because we talk box two to take
- 00:04:45 up if you put it this way eight times as
- 00:04:50 much space of this space here then box
- 00:04:54 oneness
- 00:04:55 so that's flex group the next property
- 00:04:58 is the order property now if I take my
- 00:05:03 second box here and give it a order of
- 00:05:07 two it has pushed all the way to the end
- 00:05:13 of our four boxes now you might think
- 00:05:17 why is this the case I gave it an order
- 00:05:19 of two or not four well flexbox doesn't
- 00:05:22 know how many boxes live in silence flex
- 00:05:25 containers so order works a little bit
- 00:05:27 different the number we specify here is
- 00:05:30 not the position of your occurrence in
- 00:05:34 inside this box but it is a relative
- 00:05:39 measure compared to the upper boxes and
- 00:05:41 by default this number is zero so you
- 00:05:43 could say all boxes have zero but the
- 00:05:46 boys too has a value of two that means
- 00:05:48 zero means leave them the way they
- 00:05:52 appear in the HTML document in the DOM
- 00:05:54 and only the the one with the higher
- 00:05:59 number will be pushed to the end so if
- 00:06:02 we had box one with a value of order
- 00:06:08 free you can see that now one us in D
- 00:06:12 and because of the still highest value
- 00:06:13 two is the second last element because
- 00:06:17 it has a second highest value and these
- 00:06:19 two stay the way they are in this
- 00:06:22 example here because they don't have any
- 00:06:25 order provided they have an order of
- 00:06:27 zero now we can also provide a negative
- 00:06:30 value here of minus 1 for example now 2
- 00:06:33 is the first element because minus 1 is
- 00:06:36 smaller than 0 which these elements you
- 00:06:38 have and this is why
- 00:06:40 pushed to the beginning now if we give
- 00:06:42 this a buddy of mine is free we have the
- 00:06:46 same order as here even though we don't
- 00:06:49 use the standard values of zero so you
- 00:06:51 basically have to think of the order
- 00:06:54 function as how with numbers you provide
- 00:06:58 here be ordered and dari would see okay
- 00:07:01 – freeze the smallest that's the first
- 00:07:03 one
- 00:07:03 then comes minus one the second one and
- 00:07:05 these two have zero and if elements have
- 00:07:09 the same intention value here they will
- 00:07:14 just be ordered by the appearance in the
- 00:07:18 HTML structure so next we're going to
- 00:07:22 look at the Flex basis property and this
- 00:07:25 one is a little bit difficult because
- 00:07:26 not all of it supported values are
- 00:07:29 actually supported by browsers at the
- 00:07:32 moment but nonetheless we're gonna have
- 00:07:34 a look at it
- 00:07:35 so what flex basis does is it sets the
- 00:07:38 dimensions of an element now you would
- 00:07:41 say well I'm doing this with width and
- 00:07:43 heigh height right and yeah you
- 00:07:46 basically do and this is why the default
- 00:07:48 value of Flex basis is auto which says
- 00:07:51 look at my width and height now we can
- 00:07:55 also provide a different value here we
- 00:07:59 could provide measurement value like 100
- 00:08:04 pixels and now look what happens now all
- 00:08:07 elements are 100 pixels wide well I just
- 00:08:10 said you can set width and height here
- 00:08:13 right not exactly you're setting only
- 00:08:18 the dimension which is which corresponds
- 00:08:22 to the direction of your container so as
- 00:08:25 we got a container of Flex direction of
- 00:08:27 Rho which means from left to right we're
- 00:08:30 setting the width here if you were to
- 00:08:33 change this to column we're setting the
- 00:08:36 height getters so
- 00:08:41 you can say flex-space is 100 pixel we
- 00:08:45 could also say 10% we can basically use
- 00:08:47 all units we can use in our width and
- 00:08:51 height properties so we theoretically
- 00:08:59 also cup the content value which would
- 00:09:01 mean take as much space as the content
- 00:09:05 needs and as you can see I can't really
- 00:09:08 use it at the moment
- 00:09:09 and this is what I meant it's not fully
- 00:09:11 supported as of yet but what does work
- 00:09:13 is setting value add width in pixels or
- 00:09:22 dimension in pixels and our units like
- 00:09:27 MS REMS percentages as well as Auto
- 00:09:30 which is the default now we learn about
- 00:09:33 flex grow shrink and flex basis and we
- 00:09:37 can sum them up with two flags property
- 00:09:39 which first looks at grow property which
- 00:09:45 means you can set it to one to allow it
- 00:09:48 to grow as you can see it's already grew
- 00:09:51 then we can set it to zero to allow it
- 00:09:54 to shrink and we can set it to a lab to
- 00:10:00 slogan zone provided dimensions or for
- 00:10:04 example 100 pixels but there's always a
- 00:10:08 that worked because we allow it to grow
- 00:10:10 this would only work if we set this to
- 00:10:12 zero right okay that's the flex property
- 00:10:19 now the last property we have is the
- 00:10:23 align self property and for this to work
- 00:10:27 I'm just going to remove this and add a
- 00:10:31 line items property to our a container
- 00:10:34 you already know this one from the last
- 00:10:37 video and I'm going to sell it to flex
- 00:10:41 start now all items are aligned to top
- 00:10:45 and no longer stretch out now I can set
- 00:10:48 box free for example to align self flex
- 00:10:54 and
- 00:10:55 and now only box free will be aligned to
- 00:10:59 the end where the other ones are still
- 00:11:02 aligned to the top of the box of the
- 00:11:04 container so basically an alliance elf
- 00:11:07 allows you to overwrite the setting of a
- 00:11:09 line items for individual children and
- 00:11:15 that's basically all about children
- 00:11:18 properties in on flexbox environment
- 00:11:22 you learn about Flex grow shrink bases
- 00:11:24 the combined flex property and now align
- 00:11:27 itself and with these properties as well
- 00:11:31 as the other stuff we learn about the
- 00:11:34 Flex container itself you should really
- 00:11:37 be able to make cool-looking flexible
- 00:11:39 layouts and we're actually gonna do this
- 00:11:41 and one of my upcoming syriza's and I'm
- 00:11:44 really looking forward to that so I hope
- 00:11:47 you enjoyed it please leave some
- 00:11:48 feedback and I will see you in the next
- 00:11:51 video bye