Stylin’ Around – Flexbox Introduction – Part 2: The Flex Children

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

You may also like