Up next in 10
Learn Flexbox in 15 Minutes
419 views
Feb 7, 2024
"Learn Flexbox in 15 Minutes" is a concise tutorial video aimed at teaching the fundamentals of Flexbox, a CSS layout model that allows designers and developers to create dynamic and responsive web layouts with ease. In just 15 minutes, viewers are guided through the core concepts of Flexbox, including flex containers, flex items, flex direction, alignment, and distribution. The video offers clear explanations and practical examples to help viewers quickly grasp the key concepts and start using Flexbox in their own web projects effectively. Whether you're a beginner looking to enhance your CSS skills or a seasoned developer seeking a refresher, this video provides a fast-paced yet comprehensive introduction to Flexbox.
View Video Transcript
0:00
Hello everybody. In this video we're going to dive into the different parts of Flexbox
0:04
starting with what Flexbox is and how FlexBox works, and then we're going to dive into the
0:09
different properties that we can apply to Flexbox in order to lay out and style our elements as we want
0:13
So to get started, let's add a div inside of our body here, and we'll give it a class of Flexbox container
0:20
since this will be the container that all our Flexbox items will reside inside. Then, inside of this container
0:26
we'll add another div, give it a class, and we'll call this one Flexbox Container, flex box item and we'll also give it a class of flex box item one that will we know which
0:36
item we are referring to when we style them individually. And if you save that, you'll see that we have a gray box show up on the right here
0:42
and that's because I've already applied some styles to these flux box items so that we can
0:46
distinguish them and see them. Now let's copy this and add in two more flux box items and save that, and you'll see that we
0:53
have now three flex box items inside of our flex box container, but we don't have any styling
0:58
to actually make this a flex container. So to get started with creating a flex container
1:02
what's going to our styles here? We have our flexbox container selector
1:06
and we can just say display and set it to flex, and this is how we create a flexbox container
1:12
Now if I save that, you'll see that all of our items are now the same height, and they all show up in one row
1:17
You'll also notice that if I shrink our browser, you'll see that these items will scale their size
1:22
to fit within the browser, and as I make it wide enough for them to all fit, you'll just show up
1:26
on the left side of the screen. And this is really the main thing that Flexbox has going for it
1:32
It allows you to style the flexibility and sizing of different elements in the container
1:37
from the actual container selector here, this Flexbox container, without ever having to style the actual Flexbox items
1:44
So inside of the container for Flexbox, you can do things such as laying out your different elements
1:49
across the different rows and columns, as well as aligning them inside of that layout
1:54
And then the items themselves, you can specify how you want them to flexibly
1:58
grow inside of the container or how you want them to shrink inside of the container
2:02
To make this easier to see, I've created some background styles here, and if we save this
2:07
you'll see that we now have our flux box container, which is this yellow background item
2:11
and then our different flux box items with their numbers in the corner as these grayish colored
2:15
with a border that is a little bit darker gray. This is where we can see when we shrink our browser, you can see that these items shrink
2:21
together, and as we increase it, they'll grow again. Now before we get started with actually laying out and styling our different elements inside
2:28
of our container, we first need to understand the concept of the main axis and the cross
2:32
axis inside of a flexbox container. I have these styles here that will show us the main axis and cross access for our
2:39
fluxbox container, and as you can see this main axis goes horizontally across the entire
2:44
flexbox container, while the cross axis goes vertically. This is because our flex box container is laid out in a row as opposed to a column
2:52
Flexbox gives us a property on the container called the flex direction, where we can set if we
2:57
want our flex box to be a row or column-based layout. And depending on this, these main axis
3:03
and cross-axis will actually flip. So in a column-based layout, the cross-axis will go horizontally
3:09
and the main axis will go vertically. All you really need to remember is that this main
3:13
axis will go the same direction as your layout. So in a row layout, it will be horizontal
3:18
and a column layout, it'll be vertical. And in order to style the layout of these elements
3:22
you style them based on the axis, so the main axis or the cross-axis, and then, and then, you style
3:27
not based on vertical or horizontal. So if we wanted to style our elements on the main axis
3:32
we would use the justify content property inside of our flexbox container
3:37
Right now, our main axis has a flex start attribute applied to it
3:42
which means that all the elements will align at the start of the main axis If for example we wanted to center these items inside of this main axis we would change this from flex start to center and if you say that you see that now all of our flex box items are
3:55
in the center of our container. Another thing that we could do is if we wanted to lay out our elements with space between them
4:01
we could use the space between property here and now all the extra space inside of our
4:06
flux container will be put evenly between all the different items inside of our container
4:12
If we wanted to have space on the outside of our container as well, we could use space around
4:17
which puts an even amount of space on all sides of the flex items and not just in between them
4:22
This makes laying out items in a horizontal manner very easy inside of flux box due to this
4:27
justified content property. But if we wanted to, for example, lay out things on this cross access, we would use the
4:34
Align items property, and right now the default for this is stretch, which means our items
4:40
will stretch to fill the most amount of space vertically that they can
4:43
That's why some of our items that were smaller grew to full size. If we wanted to keep the size of our items, we would use flex start, and then all of our items
4:51
would align themselves at the very top of our flex box container based on this cross axis
4:56
We could also use center here in order to center them vertically, which is one of the most
5:01
important things that you can do with Flexbox. Before Flexbox, aligning items vertically inside of a container was nearly impossible, but a flexbox
5:09
is as easy as one line of CSS, and it will perfectly align all of your items inside of this container
5:15
The last way to align our items inside of our flex box container is to use the align content
5:20
property, and this property is only for you using on multi-line flux box containers
5:26
But as you saw, when we shrink our browser size, these items just shrink to take up the amount of space needed
5:31
But if we change our flex box here to use the flex wrap property and tell it to wrap
5:37
You'll see that now our items will wrap onto different lines instead of shrinking their size
5:42
as you can see here. And this Align Content property tells it how much space to put between the lines
5:48
For example, if we use Flex Start, all of our items will line up at the top of the container
5:53
while Flex End will line them all up at the bottom of the container. An easy way to see this is if we add a height property to our Flexbox container, so if we put
6:02
height here and we just make it, let's say, 700 pixels, now you can see that
6:07
The flex end for our line content has made our flex box items all align at the bottom of our container
6:12
While flex start, we'll make them align at a start. And this has very similar properties to justify content
6:18
For example, we could put space between here, and now we have spacing between our flex box item rows
6:24
And if we shrink this even further, you'll see that there's now even space between them as well, which is great
6:30
But aligned content is something that I don't really use that often. And really justify content and align items are the properties I use most
6:37
since they align your individual rows along the main and cross axis
6:42
Now let's revert that height back to the default, get rid of our aligned content
6:46
justify content, align items, and wrap. So we just have a normal flexbox container here, and we'll increase that size a little bit
6:54
and we'll also remove these axes since we no longer actually need them
6:58
Now if we go back into our stylus here, and let's say we want a column way out instead
7:03
We'll just use our flex direction, change it to column, and now you'll see you'll see
7:07
that our different flex box items show up in a column as opposed to the different row
7:11
And if we use justify content and we say center for example, you'll notice that they
7:17
don't center horizontally and that's because they're centering inside of the column
7:20
vertically. And if we put that height back onto our flux container, let's make it 800
7:25
pixels save that You see that now they centered vertically and that because justify content is using the main axis which in this case is column as opposed to row If we used align items we put center in here and save it
7:42
You'll see that now our items are centering horizontally because the cross axis is horizontal inside of a column-based flex box container
7:51
Now we can revert all that back to normal, so we just have our standard flex box container here
7:55
and we can start to talk about the different properties you can apply to our different flex box items
7:59
as opposed to the Flexbox container. As I mentioned, the container is really only for laying out spacing between your items
8:06
as well as the positioning of your items inside of the container. The actual Flexbox item properties are meant to either override those positioning and layout properties
8:15
or to apply different flexible sizing to these elements. As you can see, by default, when we decrease the size of our browser, our items shrink in size
8:25
But if we wanted to prevent that on, let's say, only our first item, we could go in here, use the flux shrink property, and set it to zero to say we don't want
8:33
it to shrink at all. And if we say that, you now see our first item does not shrink, no matter
8:38
how small our browser gets, but these other two items shrink together. We could also use
8:43
the flex grow property if we wanted to tell our items to grow bigger. So if we increase our size
8:48
here, we have all this extra space. Let's say we wanted our third flux box item to fill
8:53
that space. All we would do is set flex grow to be one, and now that item takes a little bit
8:58
up all of the extra space no matter what size our browser is
9:04
We can also use flex grow on multiple items, so let's say we want our second item to also grow
9:08
we can apply it to here, and as we increase our browser size, you'll see that they'll both
9:12
grow proportionally to one another, so that way this item, the flux box item 2, and
9:17
flex box item 3, are the same exact size since they have the same exact flux grow number
9:23
If we, for example, change this to be 2 and increase the size of our browser, you now
9:28
see that our flux box item 2 is about twice the size of our flux box item 3. You will notice
9:34
however, that flux box item 2 is not exactly twice the size of flex box item 3, as you would
9:39
think by making flex grow twice as big. But all the flex grow property actually does is take all
9:45
of the leftover space. So if we remove these flux grows here, you'll see we have all this left over space
9:50
and it divides it between all the different flex grows. So if we have a flex grow of 2 here
9:58
a flux grow of 1 on the third item, flux box item 2 will get twice the amount of available space that
10:06
flux box item 3 gets. So if we say that, you'll see that this
10:10
flux box item 2 has gained twice of the available space that was left over as
10:14
flux box item 3. And the reason that flux box item 2 is not actually twice the size of
10:19
flux box item 3 is because we have a width set on our flex box items. So it takes this 200
10:25
pixels and then adds the amount of available remaining space onto that 200 pixels
10:30
If we wanted to override that, we could use what is called the flex basis property, and
10:35
this tells our flex box where to start growing from. So if we change this to zero, our object will imagine that it is zero pixels wide when it
10:44
starts adding additional space to it. And if we did this for both of our items here and saved it, you'll see that now flux box
10:50
item 2 is exactly twice the size of flex box item 3 because it started adding additional space
10:55
onto them in a 2 to 1 proportion, so it added twice as much to flux box 2 as it did to
11:00
flux box 3, but they had no starting point at all. They started at 0, which means that
11:05
flux box 2 here is twice the size of flex box 3. When they started at 200 pixels, it still
11:11
added twice as much space to flux box 2 as flux box 3, but they had a 200 pixel beginning
11:16
size so they weren actually exactly twice the size as the other one For the most part Flex grow flex shrink and the different Justify Content and Align item properties are all you really need in order to create dynamic
11:29
and complex layouts in either a row or a column-based container. But if you needed to override the cross-axis alignment
11:37
of a property, you can do that with the Aligned Self property
11:41
and let's say we wanted our second Fluxbox item to be in the center of the container
11:45
instead of stretching the full height of the container. We can just use that and now you can see that this align self property overrides our line
11:53
content of our other containers. And you can see that it aligns in the center here while these other items are aligning stretch
11:59
And this can be applied to all of our different containers. For example, we could go up to our flex box item one here and make this one flex end and you'll
12:07
see that now this aligns itself at the end of the container instead of stretching, which is the
12:11
default for our line items applied to our flex box container. The very last property that is left to talk about is
12:18
is the order property that can be applied to our flexbox items. This allows us to change the order of our items
12:23
inside of our fluxbox container without actually changing our HTML. So for example, if we want a flux box item one
12:31
to be our third item, we would change the order to three. Flexbox item two, let's say we want to be our first item
12:37
So we change the order here to one. And then we'll change the order of this flux box three
12:42
to be an order of two. And if you say that, you now see that our second item
12:47
is at the beginning of our control. Our third item is the second item in our container, and our first item is the very last item in our container
12:53
And this is because we use the order property to rearrange the order visually of our items
12:58
without changing the order in our actual HTML. This is a property I highly advise not using unless you really need it
13:05
because this actually messes up the flow for people using screen readers
13:09
since the screen reader will still go in the order of the HTML, which means they'll get fuxbox item 1 first, fuxbox item 2, second, and fuxbox item 3
13:17
and flux box item 3 third, even though the order of display is different than that
13:21
This also messes up when you're tabbing through different form items. For example, if this was an input element for a text box, our tab would go to the fluxbox
13:30
item 1 first, and then flex box item 2 second, even though they're displayed in order where
13:35
it should be 2 first and then 3 second. So that's why I highly advise not using the order property unless you really need to rearrange
13:42
the orders visually without actually messing with the HTML of the document
13:46
And that's really all there is to a flux box container. For the most part, you just need to have a container that wraps your different flex items
13:54
You give it a display of flex to say that you're using a flexbox container
13:58
You then use the justify content properties and the align item properties inside of your
14:03
container in order to tell it how you want to align these items inside of the container
14:08
And then lastly, you can use the different flex shrink, grow, and basis properties in order
14:12
to lay out your items individually inside of the flux box container
14:16
to grow or shrink as you need. A shorthand for these different flex shrink, grow, and basis
14:22
properties is just a straight up flex property where the first number is your flex grow
14:27
the second number is your flex shrink, and the last number is your flex basis. This is a great
14:33
shorthand property that you can use in order to apply all three of those different properties
14:37
in one line. You can also leave off the later properties, such as if we only wanted to
14:41
flex grow to be one, we just put flex one, and it will intelligently assign the flex shrink
14:46
and flex basis properties without us having to actually manually set them
14:51
So I hope you guys enjoyed this video and learned something new about Flexbox and how you can
14:55
use Flexbox in order to create dynamic layouts for your site. If you guys did enjoy it, please make sure to leave a like down below, and in the comments
15:02
let me know if there's anything else about Flexbox you want me to talk about in more depth
15:06
in either a future video or in a comment for you guys. Thank you guys very much
15:10
Have a good day