background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Download "Flexbox Tutorial - Flexbox Items"

input logo icon
"videoThumbnail Flexbox Tutorial - Flexbox Items
Table of contents
|

Table of contents

0:00
Intro
1:45
FlexGrow
5:03
Flex Shrink
7:50
Flex Items
11:03
Outro
Similar videos from our catalog
|

Similar videos from our catalog

Video tags
|

Video tags

HTML
CSS
How to
Web development
tutorial
web tut
web tutorial
Kevin Powell web
flexbox
flexbox tutorial
flexbox tutorial for beginners
how to use flexbox
how flexbox works
flexbox items
flexbox item
flexbox grow
flexbox shrink
flex-grow
flex-shrink
flex-basis
flexbox properties tutorial
Subtitles
|

Subtitles

subtitles menu arrow
  • ruRussian
Download
00:00:00
all right guys in this week's video
00:00:01
we're continuing our series on Flex box
00:00:03
and we're going to be looking at Flex
00:00:07
items Flex items are the little
00:00:10
everything that's inside a flex box as
00:00:12
soon as we take a container and we say
00:00:14
display Flex everything inside becomes a
00:00:16
flex item and we can do a whole bunch of
00:00:18
cool flex stuff with it where we're
00:00:19
controlling them individually so we saw
00:00:22
before you know you can make everything
00:00:24
shift from one side to the other but
00:00:25
what if you want one thing to act
00:00:26
differently that's what you can do with
00:00:28
a bunch of the flex box prop properties
00:00:30
that are dealing with individual items
00:00:31
and that's what we're going to be
00:00:32
exploring right now all right so for
00:00:34
Flex items the behavior changes things a
00:00:36
little bit so we're just going to stick
00:00:37
with three items in this one instead of
00:00:39
the five that we had in the last um and
00:00:41
the very first thing just to look at
00:00:42
really quickly uh there's actually three
00:00:45
well there's five different uh
00:00:47
properties we be looking at there's Flex
00:00:49
uh
00:00:50
grow there's a
00:00:53
flex
00:00:55
shrink I always misspell shrink
00:00:57
hopefully I don't do that in this video
00:00:59
uh there's the the flex basis there's
00:01:02
the
00:01:03
order and there's the Align self which
00:01:07
is really really awesome um now Flex oh
00:01:11
and there's one more sorry uh there's
00:01:12
also just flex and flex is a shorthand
00:01:15
for these three and it's actually sort
00:01:17
of recommended but we're going to look
00:01:18
at these three first uh and then we'll
00:01:20
get into what those uh what these other
00:01:22
ones here are after now the thing that's
00:01:25
important to know with it is as soon as
00:01:28
one of your items gets it so here even
00:01:31
we can take my Flex scow off of item um
00:01:35
you can see up here we have our one two
00:01:37
and three that I've added so each one I
00:01:39
can control
00:01:40
separately so as soon if I do a flex
00:01:42
grow on this I'm just going to put a one
00:01:44
on there and you see it's growing to
00:01:47
take up all the available space um so
00:01:49
the the default for Flex grow is zero
00:01:51
which is why by default they look like
00:01:53
this but as soon as I put a one whoops
00:01:55
uh a one in there and they're unitless
00:01:57
numbers so as soon as I put a one in
00:01:59
there
00:02:01
um it now takes up all the available
00:02:03
space the way the flex grow works um
00:02:06
deals a little bit with how some of the
00:02:08
other things work so I'm just going to
00:02:09
set up on here too so we also have a
00:02:11
flex shrink and the default Flex shrink
00:02:13
is one I'll put this to zero um and we
00:02:17
have my Flex basis and the flex basis is
00:02:21
how much room does this want to be
00:02:23
taking up if it has the available space
00:02:26
how much should it take up so let's say
00:02:28
we want it to be 250 pixels
00:02:30
wide so now it's sitting at 250 pixels
00:02:34
and I'm going to copy this on to all
00:02:36
three cuz I think this is the easiest
00:02:38
way to understand it so we have a two
00:02:40
and we have a three except I should have
00:02:43
made this a lot smaller um but just
00:02:45
really quick this is how much space it
00:02:46
wants to take up so you can see right
00:02:48
now it's smaller than 250 pixels there's
00:02:51
not enough room inside the container
00:02:53
actually maybe I should make my
00:02:54
container a little bit wider let's make
00:02:57
it like 80 there that we can that will
00:02:59
work well um so it has the amount of
00:03:02
space so what it's doing is it's not
00:03:05
growing so the grow is zero that's the
00:03:07
default its shrink is one which we'll
00:03:10
get into in a second and it's sitting at
00:03:12
its ideal width of 250 pixels and as I
00:03:16
grow it it's going to stay there but if
00:03:17
it gets to smaller you can see that now
00:03:20
when it's um it's not going to overflow
00:03:22
the side it's going to get smaller than
00:03:25
250 pixels so this is a lot like the
00:03:27
width when I was looking at it before
00:03:29
it's more like a Max width it's the
00:03:30
ideal width but if it has to get smaller
00:03:33
it will get smaller than that so that is
00:03:35
important to understand uh it does make
00:03:37
responsive layouts a little bit easier
00:03:39
to deal with because you're not getting
00:03:40
locked into a width um now I'm going to
00:03:43
switch number one here to a flex grow of
00:03:46
one and it grows to take up all that
00:03:48
available space it's taking all the
00:03:50
space that's available these ones aren't
00:03:52
growing so by this being a flex sc one
00:03:55
it's saying I want to be 250 pixels but
00:03:58
if there is available space space grow
00:04:00
to fill that
00:04:02
space now this is at one but it's the
00:04:05
only one so if you're the only one it's
00:04:06
the only it's growing and the other two
00:04:08
are going to stay the same and then here
00:04:10
everything shrinks
00:04:11
together now if I make this a flex one
00:04:15
uh sorry a flex grow of one now they're
00:04:18
going to grow at the same Pace these
00:04:20
both grow at equally so when I'm getting
00:04:22
smaller or bigger uh they're the amount
00:04:26
of space that they're growing by is the
00:04:28
same and let's go on to number three
00:04:31
here and I'll make that a flex grow of
00:04:34
two so when we're at our ideal width of
00:04:36
250 pixels they should all look the same
00:04:39
they'll all shrink the same way but if
00:04:41
it they have more space than they need
00:04:45
um this one will grow faster than these
00:04:48
two so let's even make this a three just
00:04:51
to sort of exaggerate it a little bit
00:04:53
you can see that this space is now
00:04:55
bigger than these two so these two are
00:04:56
growing at the same rate and this one is
00:04:58
growing faster than the other ones cuz
00:04:59
it has the larger Flex
00:05:02
grow so you can sort of guess now what's
00:05:05
going to happen with the flex shrink um
00:05:08
my Flex shrink let's put this one all
00:05:11
the way up to a
00:05:12
three so now when I'm smaller than 250
00:05:16
pixels how fast is it shrinking so now
00:05:19
you can see that this one is actually
00:05:21
shrinking faster than the other ones so
00:05:24
with these ones it's growing faster when
00:05:26
it's bigger than 250 pixels and it's
00:05:29
shrinking faster when it's less than 250
00:05:32
pixels so that's pretty cool um so
00:05:35
that's with the shrinks let's put this
00:05:37
back to a one so they should all be
00:05:39
equal and just to show you I can make
00:05:40
this one a two so now the one in the
00:05:43
middle is going to shrink faster than
00:05:45
the other ones but when I get to a
00:05:47
larger screen size this one here is
00:05:50
still growing faster than them because
00:05:52
grow one a grow one and a grow three and
00:05:55
again if I have two items with the same
00:05:57
number those two will grow at an equal
00:05:59
speed and this one will grow slower than
00:06:02
the other ones and if this is a flex
00:06:05
grow of zero it's going to stay at its
00:06:07
Flex basis size so it's just always as
00:06:10
long as I'm bigger than 250 pixels it's
00:06:12
just going to stay at
00:06:15
250 um so that's how the flex grow the
00:06:17
flex shrink and the flex basis works and
00:06:20
the shorthand for it is just
00:06:22
Flex so this would just be 0 1 250
00:06:25
pixels and then I can get rid of all of
00:06:28
that um and that's the exact same thing
00:06:30
so this one would be a flex of 3 to 250
00:06:36
pixels and this last one would be a flex
00:06:40
of 31 to 50
00:06:45
pixels so uh one thing that's nice about
00:06:48
just writing Flex is if I just do a flex
00:06:51
250 it's going to default the rest to um
00:06:55
it's going to assume what you want for
00:06:56
the other ones now uh what that is is
00:06:59
doing is it actually is letting this one
00:07:01
grow so let's do my Flex grow of one and
00:07:03
a flex grow of one um so the the growing
00:07:07
should be all the same now so it's
00:07:09
assuming if you do a flex 250 it's just
00:07:11
going to get a shrink of one a grow of
00:07:13
one and um it works that way uh so it
00:07:16
works nicely and I can do a 250 or let's
00:07:19
do
00:07:20
two um so it's going to grow faster than
00:07:23
the other ones cuz the other ones have a
00:07:24
grow of one let's put a shrink of two on
00:07:27
them but it's going to automatically
00:07:29
give it a shrink of one so the shrink is
00:07:31
going
00:07:33
um it's it's still it's shrinking slower
00:07:37
than the other ones are shrinking
00:07:38
because it's defaulting to a one on the
00:07:40
shrink so if you want to use the Shand
00:07:42
here it is a little bit easier because
00:07:43
if you forget one of them or you just
00:07:44
ignore it uh it automatically fills it
00:07:46
in for you so I usually just use the
00:07:48
flex property like
00:07:51
that um so yeah that that's I think
00:07:53
pretty cool now well I'm going to come
00:07:56
up to here um and change a couple of
00:07:59
things or just one thing let's change my
00:08:01
align items to flex oops Flex Flex
00:08:08
start um so when I do an align items
00:08:11
Flex start they all get aligned up to
00:08:13
the top like that um or they get aligned
00:08:17
to the on the cross axis the start of
00:08:20
the Cross axis so now what I can do is I
00:08:22
can take the Align self and put a flex
00:08:27
end on this and it's it's going to align
00:08:31
it it's the same as the Align items
00:08:33
property except it's aligning only
00:08:36
itself on that part so the flex end I
00:08:39
can pull one thing down or I can do an
00:08:41
align self Center and it's going to
00:08:43
Center just that one item so align self
00:08:47
can be kind of cool uh if I took off
00:08:51
my align say I take this one off these
00:08:54
ones are stretching because the default
00:08:56
for Align items is to be
00:09:00
stretch so that's why they're taking up
00:09:02
all that space that's the default um but
00:09:05
as soon as I do an align self it's
00:09:07
breaking out of the default so you can
00:09:10
choose whichever of the Align items
00:09:12
properties that you'd want for Align
00:09:14
self and control it on its own so that's
00:09:17
awesome and the last one and is order
00:09:21
and I was going to do order before Aline
00:09:22
self so I'm out of order but that's okay
00:09:24
um you can control the order of
00:09:26
things um now the thing is a little
00:09:29
weird with order is if you do in order
00:09:31
one it actually goes to the end because
00:09:32
these ones don't have an order on
00:09:35
them if I do in order zero it will go to
00:09:38
its natural resting place it doesn't
00:09:41
pull it over to the front which is what
00:09:43
a lot of people um originally assume and
00:09:45
it's because the default is zero so if I
00:09:47
don't give anything it's just giving it
00:09:49
an order of Zero by default so order
00:09:51
zero just puts it back to where um it is
00:09:54
in the
00:09:55
HTML uh if you do want to pull it all
00:09:57
the way to the start you can give it a
00:09:58
NE ative value though and that will pull
00:10:00
it all the way to the beginning and you
00:10:02
might be wondering why would I want to
00:10:04
put an order on it this is nice when you
00:10:06
want to rearrange things uh when it's a
00:10:09
mobile display or going from Mobile to
00:10:11
something else um if you need to change
00:10:13
the order of things because you don't
00:10:14
like the way things are falling this is
00:10:17
a nice way to do
00:10:20
it so I can actually have my item two my
00:10:23
item three and then my item one or if I
00:10:25
make this a bigger negative value I
00:10:27
could do that I wouldn't suggest getting
00:10:29
too far into the negatives I think it
00:10:30
would make more sense to do a one a two
00:10:33
and uh in order three if you really
00:10:37
needed to change the order of things
00:10:39
like
00:10:40
that um or in this case because the
00:10:43
Reversed I could just change my Flex
00:10:45
direction to row reverse that might be a
00:10:47
bit smarter uh but it's just to show you
00:10:49
you can change the order of all of your
00:10:51
Flex items to any order you want them to
00:10:54
be in so that's a nice Nifty thing um
00:10:57
that can give you a lot of control on
00:10:59
uh for when you're using media queries
00:11:01
and trying to get things where you need
00:11:02
them to be and there you go now some of
00:11:04
those items might be a little bit
00:11:06
confusing and weird still so if that's
00:11:08
the case don't be afraid to play around
00:11:10
with it a bit um the best way to learn
00:11:12
and get used to these is by trying them
00:11:14
out and a little bit of trial and error
00:11:16
cuz knowing you know just seeing how one
00:11:18
thing works in a little demonstration
00:11:20
like that it's not always perfect uh but
00:11:22
that's why in the next video I will be
00:11:23
taking a look at an actual layout and
00:11:25
it's going to be a pretty simple layout
00:11:26
but it's common ways that flexbox is
00:11:29
used if you do have any questions right
00:11:30
now though please don't be shy leave a
00:11:32
comment down below and in case you
00:11:34
haven't heard I have launched a patreon
00:11:35
account so you can go and check in the
00:11:37
description below if you don't know what
00:11:38
patreon is go down there and check the
00:11:41
link and there's a nice welcome video
00:11:42
that explains it in a little bit more
00:11:44
detail thank you so much for watching
00:11:46
and until the next video don't forget to
00:11:47
make your corner of the internet just a
00:11:49
little bit more awesome

Description:

Dive in deep and learn how to *really* take control of flexbox: https://www.flexboxsimplified.com/ I have a course all about building responsive websites! It covers everything from the basics to thinking responsively, flexbox and grid and a whole bunch more. Check it out! https://www.kevinpowell.co/learn-responsive In the last video we looked at Flexbox containers, now we look how we can control the behaviour of individual flex items. I cover flex-grow, flex-shrink, flex-basis, flex, order, and align-self. Here is a nice Flexbox playground, it can be a real life saver! (the old link is dead, but here is a new one!) - https://flexbox.help/ The full playlist: https://www.youtube.com/watch?v=hwbqquXww-U&list=PL4-IK0AVhVjMSb9c06AjRlTpvxL3otpUd --- Support me on Patreon: https://www.patreon.com/kevinpowell I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.facebook.com/unsupportedbrowser Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powellom/KevinJPowell

Preparing download options

popular icon
Popular
hd icon
HD video
audio icon
Only sound
total icon
All
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players

Questions about downloading video

mobile menu iconHow can I download "Flexbox Tutorial - Flexbox Items" video?mobile menu icon

  • http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.

  • The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.

  • UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.

  • UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

mobile menu iconWhich format of "Flexbox Tutorial - Flexbox Items" video should I choose?mobile menu icon

  • The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

mobile menu iconWhy does my computer freeze when loading a "Flexbox Tutorial - Flexbox Items" video?mobile menu icon

  • The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

mobile menu iconHow can I download "Flexbox Tutorial - Flexbox Items" video to my phone?mobile menu icon

  • You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

mobile menu iconHow can I download an audio track (music) to MP3 "Flexbox Tutorial - Flexbox Items"?mobile menu icon

  • The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

mobile menu iconHow can I save a frame from a video "Flexbox Tutorial - Flexbox Items"?mobile menu icon

  • This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

mobile menu iconWhat's the price of all this stuff?mobile menu icon

  • It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.