CSS Flexbox Tutorial for Beginners | Flex-Items

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

You may also like