- 00:00:00 welcome to the second part of this
- 00:00:03 flexbox mini series in the last video we
- 00:00:06 had a look at the Flex container and we
- 00:00:08 saw that we can add different properties
- 00:00:11 and by that change the way the elements
- 00:00:14 nested inside of that container the
- 00:00:16 so-called Flex items behave the problem
- 00:00:19 is that with adding properties to the
- 00:00:22 Flex container we can only change the
- 00:00:24 way all items behave but if you want to
- 00:00:28 change the behavior of a single flex
- 00:00:30 item well then you can also do that
- 00:00:32 let's find out how this works so how we
- 00:00:35 can work with the Flex items in this
- 00:00:37 video
- 00:00:41 back in our code and as always a link to
- 00:00:44 the code can be found in the video
- 00:00:46 description and if we look at our page
- 00:00:49 now well it basically looks like that
- 00:00:52 well let's maybe increase the width
- 00:00:54 right here and also delete a line
- 00:00:57 content we don't need that actually so
- 00:00:59 we can get rid of that and now we want
- 00:01:02 to focus on to these Flex items just
- 00:01:05 remember these are the different
- 00:01:07 elements we have right here so these six
- 00:01:09 elements inside our container of a Flex
- 00:01:13 container which you can see right here
- 00:01:15 and now back to the code again and now
- 00:01:19 how do we start well let's start maybe
- 00:01:21 with diff one right here because the
- 00:01:24 first attribute we could add to a Flex
- 00:01:27 item and that's important we added the
- 00:01:29 properties in the last video just to our
- 00:01:32 Flex container but now we can add all
- 00:01:34 these properties we will have a look at
- 00:01:36 in this video to all flex items and they
- 00:01:39 will only affect well this flex item
- 00:01:42 basically now coming back to a proper
- 00:01:43 team the first property we could use is
- 00:01:46 this one this is called order now what
- 00:01:49 does this mean
- 00:01:49 well let's maybe type one and save that
- 00:01:52 if we now go back have a look at it if
- 00:01:55 one is positioned right here if we now
- 00:01:57 reload the page we can see that the item
- 00:02:01 is now placed at the last position wise
- 00:02:04 is happening well because we added this
- 00:02:07 order property to this div this means if
- 00:02:10 I set this to zero and save it again and
- 00:02:13 reload the page it will be displayed
- 00:02:16 again in the beginning because normally
- 00:02:18 all items have an order of zero or value
- 00:02:21 for order of zero now if we change it
- 00:02:24 back to 1 and then go down to the free
- 00:02:27 maybe and also add order right there and
- 00:02:29 change it to free right or it could also
- 00:02:32 be to actually let's maybe make two like
- 00:02:34 that so if we change it so we have now
- 00:02:36 order 1 right here and order free in
- 00:02:39 this third item and now reload the page
- 00:02:41 well you can see what happens now the 1
- 00:02:44 is positioned at the end because order 1
- 00:02:46 is bigger than 0 but order 2 is bigger
- 00:02:49 than or the 1 so we have placed it right
- 00:02:52 here and if I now change to 1/2
- 00:02:54 order free then you can imagine what
- 00:02:56 happens this will now be placed to the
- 00:02:58 right of this stiff right here that's
- 00:03:01 basically how order works really
- 00:03:04 important we talked about that in the
- 00:03:06 last video this also is based on the way
- 00:03:10 we have set the flex flow for example if
- 00:03:14 we change that to Rho reverse if you're
- 00:03:16 not don't know what we're doing right
- 00:03:17 here just have a look at the first video
- 00:03:19 of this flexbox miniseries so robbery
- 00:03:22 worse save that and go back well then
- 00:03:26 you can see that if one is now placed
- 00:03:28 here this looks like it will be the
- 00:03:31 first position but now it's basically
- 00:03:32 the last position because we have Rho
- 00:03:34 reverse then we have the diff with the
- 00:03:37 order value of 2 so this different air
- 00:03:40 where is it here it is and then we have
- 00:03:44 all the other divs in the normal order
- 00:03:46 right so always keep that in mind that's
- 00:03:48 why I talk a lot about the flex
- 00:03:50 direction in the last video because it's
- 00:03:52 really important to understand how this
- 00:03:54 works because otherwise well results can
- 00:03:57 be confusing in Flex box but let's
- 00:03:59 change it back to Rho because I think
- 00:04:01 this makes more sense right here and
- 00:04:02 lets us show our examples easier however
- 00:04:05 let's maybe get rid of that we don't
- 00:04:09 need order actually in our example and
- 00:04:10 right here and let me show you another
- 00:04:13 property you can add maybe we use the
- 00:04:16 two right here because this property is
- 00:04:18 kind of familiar two of the one we had
- 00:04:21 already but now it's different because
- 00:04:22 it refers to a single element or a
- 00:04:25 single flex item and this is called a
- 00:04:28 line but now you can see it already we
- 00:04:30 had aligned content we had aligned items
- 00:04:32 but now we have aligned self and as the
- 00:04:35 name kind of indicates this simply
- 00:04:38 defines how our Flex item is positioned
- 00:04:42 related to D cross access that's really
- 00:04:46 important we also talked about that a
- 00:04:48 lot in the last video but aligned self
- 00:04:50 refers to the position in relation to
- 00:04:52 the cross axis now let's have a look if
- 00:04:55 we now say we want to align this item
- 00:04:57 flex start maybe and do it like this and
- 00:05:02 go back and reload the page then you can
- 00:05:06 see exactly what happens you remember we
- 00:05:08 had
- 00:05:08 that slide in the last video this means
- 00:05:10 we have now a flex direction of roll set
- 00:05:14 in the Flex container and this means the
- 00:05:18 cross axis starts right here and goes
- 00:05:20 from top to bottom this means adding
- 00:05:22 flex star to this will simply add this
- 00:05:25 item well at the start of the cross axis
- 00:05:27 if we go back and change it to Flex end
- 00:05:30 like that and go back then it would be
- 00:05:34 at the end right here because again
- 00:05:36 cross axis starts here in our case ends
- 00:05:39 here
- 00:05:39 so we position this item right there and
- 00:05:41 this is basically what you can do with
- 00:05:45 align self it is kind of related or
- 00:05:48 similar to what we saw with line items
- 00:05:51 but this time only relating to a single
- 00:05:54 item
- 00:05:54 now you might again ask yourself where
- 00:05:57 can I find all these properties and all
- 00:05:59 these values what can I apply right here
- 00:06:02 and the answer again is in the MVN the
- 00:06:04 Mozilla developer Network you can find a
- 00:06:06 link to this page down there in the
- 00:06:08 description
- 00:06:09 the important thing is right here you
- 00:06:11 see all the properties that we have we
- 00:06:13 talked about a lot of these actually in
- 00:06:15 the series and if you click on to align
- 00:06:18 self then you can see that you have a
- 00:06:20 lot of different values that you can
- 00:06:22 apply basically too much values to cover
- 00:06:25 them all in this video but we just had a
- 00:06:27 look at flex start and flex end but feel
- 00:06:31 free to play around with these to make
- 00:06:33 sure that the single items behave the
- 00:06:35 way you want them to behave however we
- 00:06:39 saw this now and we know how aligned
- 00:06:41 self works so we can actually get rid of
- 00:06:44 it right here because there are three
- 00:06:47 more properties that I would like to
- 00:06:49 show you which can be confusing but
- 00:06:51 actually they are not difficult if you
- 00:06:54 had a closer look so let's take this
- 00:06:56 closer look now and for that we'll focus
- 00:06:59 onto the last two items right here so
- 00:07:01 that 5 and tip 6 why are we using these
- 00:07:03 well basically if we go to page
- 00:07:06 basically because they have an equal
- 00:07:08 width and the properties I want to show
- 00:07:10 you now well have something to do with
- 00:07:12 the width so let's add a property right
- 00:07:15 here and this property is called flex
- 00:07:18 which is quite intuitive actually and
- 00:07:21 flex is just like flex flow for the Flex
- 00:07:24 container a property which combines
- 00:07:27 multiple properties the standard value
- 00:07:30 is 0-1 in Auto and this simply or these
- 00:07:34 individual values stand for the
- 00:07:37 following properties
- 00:07:38 I'll again add them as a comment here
- 00:07:39 just to make it clearer for you the
- 00:07:41 first value stands for flex row right
- 00:07:45 here the second value stands for flex
- 00:07:48 rink
- 00:07:49 oops shrimp like that and the third one
- 00:07:52 stands for Flex basis like that now what
- 00:07:56 does it mean let's maybe go for it step
- 00:07:59 by step makes the most sense I think so
- 00:08:01 flex crow this is the first value we can
- 00:08:04 see right here the standard value is
- 00:08:06 zero as I said so if we save that go
- 00:08:08 back and reload the page we can see that
- 00:08:11 the elements grow up until the point
- 00:08:14 they reach their maximum width and so
- 00:08:18 this is the width that we defined so 200
- 00:08:20 pixels let me quickly go back and let me
- 00:08:23 change justify content to flex start
- 00:08:26 like that because then it's easier to
- 00:08:30 see that because now we have more space
- 00:08:32 so as you could see we don't increase
- 00:08:34 the width of these items as soon as they
- 00:08:37 reach the maximum width that we defined
- 00:08:39 okay so that's the basic value that's
- 00:08:42 right here flex 0 let me now change 0 to
- 00:08:46 1 right here that's not a standard value
- 00:08:48 so if we save that and go back we can
- 00:08:52 see that the item right here increased
- 00:08:56 although we actually reached a limit of
- 00:08:59 the width of 200 but it still keeps
- 00:09:01 growing and that's interesting right
- 00:09:04 because by adding a flex grow and a
- 00:09:07 number larger than zero this simply
- 00:09:09 means that we make sure that this item
- 00:09:12 that we add this property well kind of
- 00:09:15 increases its width although we set a
- 00:09:17 limit
- 00:09:18 now what's basically happening right
- 00:09:19 here is that the width of this item will
- 00:09:22 be increased or will be stretched up to
- 00:09:25 the point where the entire free space
- 00:09:27 that we have on our page is occupied by
- 00:09:30 that item you can see it actually right
- 00:09:32 here because if I increase it or
- 00:09:34 decrease it stay
- 00:09:35 right there and if I decrease the page
- 00:09:37 you can even see that it still behaves
- 00:09:39 like that and make sure that the enter
- 00:09:42 page is occupied by this item so that is
- 00:09:46 what you can do with Flex Grove
- 00:09:48 basically this first part but there is
- 00:09:51 more and to see this more we simply copy
- 00:09:54 down this right here including the
- 00:09:57 semicolon of course and add it right
- 00:09:59 there and now change flex right here for
- 00:10:03 allative 6 to 2 so keep in mind the
- 00:10:06 other items have flex zero so they won't
- 00:10:09 stretch the the 5 has a flex value of 1
- 00:10:13 and the 6 now has the Flex value of 2
- 00:10:16 now let's see what happens if we go back
- 00:10:19 and reload the page we can see that the
- 00:10:22 space is again occupied entirely by our
- 00:10:25 elements and if you look at it you can
- 00:10:28 see that only these two elements are
- 00:10:31 kind of stretching or not stretched but
- 00:10:35 if you look at it closely it's hard to
- 00:10:39 see but the last item increases more
- 00:10:42 because let's have a look if we start
- 00:10:46 right here and inspect that we can see
- 00:10:48 that the first item right here has a
- 00:10:50 width of 200 2.84 now the second item
- 00:10:54 right there has a width of 200 5 point 6
- 00:10:57 9 now that's just some rounding but
- 00:11:00 basically we can see that the width of
- 00:11:03 this item increased two times the amount
- 00:11:07 this item increased now that's important
- 00:11:10 this item is not two times this first
- 00:11:13 item that's not true it's just the case
- 00:11:15 that we have a space a free space that
- 00:11:18 should be occupied and we defined that
- 00:11:20 the space should be occupied by these
- 00:11:22 two items but this space well you could
- 00:11:25 imagine like that the space can now be
- 00:11:27 cut into three equal pieces and two of
- 00:11:30 these pieces are added to the last item
- 00:11:33 with the Flex CRO value of two and one
- 00:11:36 piece is added to this first item with a
- 00:11:39 flex CRO value of 1 now if we go back
- 00:11:42 and change it to free so the value for
- 00:11:45 flex right here for this six like that
- 00:11:47 and
- 00:11:48 back you can see that this item now is 2
- 00:11:53 0 2 point 1 3 and this one here is 2 0 6
- 00:11:57 point 4 so 3 times 2 growth that we saw
- 00:12:01 for the first item and that's a really
- 00:12:03 important concept that you have to keep
- 00:12:05 in mind always think about this space
- 00:12:07 you have available divided into the
- 00:12:09 parts that you have right here that's at
- 00:12:11 least how I remember that and then think
- 00:12:13 about it how many parts should be added
- 00:12:15 to each single item depending on the
- 00:12:18 Flex value that we have added right here
- 00:12:20 so that's flex grow basically you can
- 00:12:23 specify how a single or multiple items
- 00:12:26 should grow if you change the size or
- 00:12:28 the width of your website but we have
- 00:12:31 more because we also have this second
- 00:12:33 value right here flex shrink now as the
- 00:12:37 name indicates flex shrink helps us to
- 00:12:40 decrease the size of our items let's
- 00:12:43 have a look at that now and to show you
- 00:12:45 that we will change our parent right
- 00:12:49 here our flex container from wrap so in
- 00:12:52 the Flex flow property to no rep like
- 00:12:55 that oops sorry to no wrap now it's
- 00:12:59 correct like that because if we now have
- 00:13:03 a look right here and we load the page
- 00:13:04 we can see that well we can see a thing
- 00:13:07 because of the inspect to we can now see
- 00:13:09 that our items decrease and they kind of
- 00:13:12 decrease equally as you can see right
- 00:13:15 here we learned that in the last video
- 00:13:16 they decrease up until the point where
- 00:13:19 the content is basically displayed and
- 00:13:22 then we have the following behavior so
- 00:13:24 far so clear we saw that and if we look
- 00:13:27 at the size or the width of these
- 00:13:29 elements we can see one on seven point
- 00:13:31 eight one or seven point eight okay
- 00:13:33 let's increase the size again we can see
- 00:13:36 again the following behavior as soon as
- 00:13:38 we reach the defined width we can see
- 00:13:40 that this item right here has two three
- 00:13:42 four point three eight and this one here
- 00:13:45 has three times the value so free of
- 00:13:47 3.15 so the same behavior that we saw
- 00:13:50 before now let's go back and let's maybe
- 00:13:52 change that flag strategy to one because
- 00:13:54 it can be confusing now but now change
- 00:13:57 the flag score off right here sorry D
- 00:14:00 flex shrink we just talked about growth
- 00:14:02 it's flex rink to free like that if we
- 00:14:06 now go back and reload the page well we
- 00:14:09 basically don't see a big difference
- 00:14:11 because both items now keep growing the
- 00:14:14 same value because we just defined it or
- 00:14:16 the same amount of width so that's equal
- 00:14:18 but if I now decrease the website right
- 00:14:22 here can you see it already mm I don't
- 00:14:24 think it's clear enough let's add a
- 00:14:27 shrink of four maybe even because then
- 00:14:29 it becomes clearer yeah I think now it
- 00:14:32 becomes evident if we increase the size
- 00:14:34 again and then decrease that page can
- 00:14:38 you see it I think now it's clear the
- 00:14:41 amount the fifth element right here
- 00:14:45 decreases is five times higher value
- 00:14:49 decreasing level we have right here for
- 00:14:51 our fifth number six where we have flex
- 00:14:53 crink of one like all the other elements
- 00:14:56 have so if we try to get it back to a
- 00:15:00 width of 200 which is way too much right
- 00:15:03 here as you can see still too much maybe
- 00:15:08 like that you can see that now we have
- 00:15:10 here a width of one hundred ninety nine
- 00:15:13 point seven so 0.3 smaller than the
- 00:15:16 actual width that we defined and here we
- 00:15:19 have four times
- 00:15:20 the decrease because the Flex shrink
- 00:15:23 value was set to four so this item
- 00:15:26 decreased by 0.3 well zero point three
- 00:15:28 times four is one point two and this one
- 00:15:31 point to decrease can be seen right here
- 00:15:33 and that's basically how flex shrink
- 00:15:36 works it allows us just like flex grow
- 00:15:39 actually when we increase the size to
- 00:15:41 specify the shrink level or the amount
- 00:15:44 an item can shrink specifically for a
- 00:15:47 single item or for all items so that's
- 00:15:50 another important property that you have
- 00:15:52 to keep in mind when you work with the
- 00:15:54 different flex items but there is one
- 00:15:57 less property that I would like to show
- 00:15:59 you right now
- 00:16:00 it's very unselect that and for that
- 00:16:02 let's set that back to one maybe grow to
- 00:16:06 zero and also here and save that because
- 00:16:10 we talked about flex grow and flex
- 00:16:12 shrink but we also have flex basis
- 00:16:16 so the standard setting is flex paces
- 00:16:19 Auto and before we have a look at that
- 00:16:22 and change that
- 00:16:22 what does flex paces actually do or what
- 00:16:25 does it mean well flex basis and this is
- 00:16:29 really important simply defines the
- 00:16:31 starting size or the standard size of
- 00:16:34 your element or of your Flex items
- 00:16:37 depending on the main axis and that's
- 00:16:41 really important depending on the main
- 00:16:44 axis so flex basis is not something like
- 00:16:47 the width or the height it's actually
- 00:16:50 always the size of your element relating
- 00:16:53 to the main axis now let's see what that
- 00:16:56 means because generally you can define a
- 00:16:59 width that's no problem but if you
- 00:17:02 define a flex basis this will be kind of
- 00:17:04 the value that is considered this means
- 00:17:06 in our case we can see that our Flex
- 00:17:09 basis is auto so we will fall back to
- 00:17:11 the width but just in case that our main
- 00:17:14 axis is related to the width now this
- 00:17:17 can be really confusing therefore let's
- 00:17:19 just have a look at that now because if
- 00:17:22 I now keep it right here on auto the
- 00:17:25 width but right here define a Flex basis
- 00:17:29 of one of the pixels for example like
- 00:17:31 that and we can go back and we can see
- 00:17:36 which is quite as expected that for this
- 00:17:38 fifth element if we just increase the
- 00:17:41 size maybe like that that for this fifth
- 00:17:44 element a width of 200 pixels was
- 00:17:47 applied why did this happen well we saw
- 00:17:49 that we have the Flex basis of autumn we
- 00:17:51 also see right here that our Flex flow
- 00:17:54 is row
- 00:17:55 this means the main axis is equal to the
- 00:17:58 width of our page we talked about that
- 00:18:00 in detail also in the last video and
- 00:18:02 because of that the fallback will refer
- 00:18:05 to the width that's why it works like
- 00:18:07 that in the second example or in the
- 00:18:09 second element we have a flex with
- 00:18:12 offeror pixels
- 00:18:13 therefore the width doesn't play a role
- 00:18:14 so we have a width of 100 pixels right
- 00:18:17 here so far so clear and now you might
- 00:18:20 still say well apparently the Flex basis
- 00:18:23 is just something like the width but as
- 00:18:26 you will see now it's not because if we
- 00:18:29 go back right here
- 00:18:30 and change our flex flow from row – oops
- 00:18:35 to column like that and save it and now
- 00:18:40 go back to our web site and reload that
- 00:18:42 page now it gets more interesting right
- 00:18:46 because if we inspect these two items
- 00:18:49 right here we can see that the width for
- 00:18:53 both items is still 200 pixels but the
- 00:18:57 height is totally different and if I
- 00:19:00 would also have increased the size of
- 00:19:02 the box I'm sorry for that let's
- 00:19:04 increase the size of the Flex container
- 00:19:06 and here now you can see better and now
- 00:19:09 back to what we just talked about you
- 00:19:10 can see that for the fifth element we
- 00:19:12 have a width of 200 and a height of well
- 00:19:15 just the amount of height we need for
- 00:19:17 the content but for the last item we
- 00:19:21 have a width of 200 and a height of 100
- 00:19:24 and if you look back at our code right
- 00:19:28 here we can see why this happened
- 00:19:31 because our code it can now be read like
- 00:19:35 this we have a flex flow of column so
- 00:19:38 the main axis let's go back goes from
- 00:19:40 top right here to the bottom this means
- 00:19:44 for the code we will have a look at the
- 00:19:46 Flex basis which is auto so the width
- 00:19:49 doesn't play a role because you would
- 00:19:50 would only be important if the main axis
- 00:19:54 would be from left to right which is not
- 00:19:56 the case so if you would have height
- 00:19:58 right here it would use height as we
- 00:20:00 don't have height it just uses the
- 00:20:02 standard value which in our case simply
- 00:20:04 means just give me enough height to
- 00:20:06 present the content that's the case for
- 00:20:09 this fifth element but for the last
- 00:20:11 element we have a flex spaces defined
- 00:20:14 right here and this flex basis now
- 00:20:17 refers to the main axis again the main
- 00:20:20 axis goes from top to bottom
- 00:20:21 this means it now specifies a height
- 00:20:23 right here so we have a height of 100 as
- 00:20:26 written right there and for the width
- 00:20:28 well we can of course use the value that
- 00:20:31 we defined that's why we have a width of
- 00:20:33 200 so always keep that in mind
- 00:20:36 flex spaces always refers to the main
- 00:20:40 axis and it only refers to flex
- 00:20:43 items so only in a flexbox context you
- 00:20:47 can use flex basis one last example
- 00:20:50 maybe if I would add height 100 right or
- 00:20:54 50 maybe right here like that and save
- 00:20:57 that and go back then you can see that
- 00:21:02 now a height of 50 was added just
- 00:21:05 because what I just said now we have set
- 00:21:07 Flex to auto and therefore it will look
- 00:21:10 for a value for the main axis in our
- 00:21:12 case the main axis goes from top to
- 00:21:15 bottom
- 00:21:15 therefore the height will be used now if
- 00:21:18 we change it back to row finally right
- 00:21:20 here and save that we can see that now
- 00:21:24 we will have a width of 15 a height of
- 00:21:27 50 and we will have a width of 100 right
- 00:21:29 here and a height that will just be
- 00:21:32 enough to display the content let's see
- 00:21:34 if that's correct as you can see we have
- 00:21:37 a width of 200 a height of 50 and we
- 00:21:39 have a width of 100 right here because
- 00:21:42 we defined that for the Flex basis and
- 00:21:44 we have a height that is just enough for
- 00:21:47 the content and that's it actually what
- 00:21:51 I wanted to show you regarding the Flex
- 00:21:53 items as for the Flex container it's
- 00:21:56 really important to practice what we
- 00:21:58 just talked about because with that you
- 00:22:01 now have an understanding of the real
- 00:22:02 basic concept behind it but just by
- 00:22:05 watching the video I think it's hard to
- 00:22:07 really understand all the details
- 00:22:09 therefore I can only encourage you to
- 00:22:12 play around with this example code
- 00:22:14 because you don't need more code than
- 00:22:16 that to understand flex box and if you
- 00:22:19 play around with that and think about
- 00:22:20 back what we just saw in this and in the
- 00:22:22 last video I think then you are really
- 00:22:25 ready to go with Flex box and use it on
- 00:22:28 your websites and with that as always I
- 00:22:31 can only say thanks a lot for watching
- 00:22:33 hope to see you in the next videos and
- 00:22:35 bye