Coding

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