Coding

CSS Flexbox Tutorial for Beginners | Flex-Items | 2/2

  • 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