Learn Flexbox in 15 Minutes
Web Dev Simplified
youtube· 15:11standard
1.Introduction to Flexbox and Setup
0:00 / 1:40This chapter introduces Flexbox, explaining its purpose in layout and styling. It then guides through the initial setup of an HTML structure with a flexbox container and multiple flexbox items, along with basic CSS to visualize them.
- Flexbox
- flexbox container
- flexbox item
- display: flex
What's inside this course
- 0:00
1. Introduction to Flexbox and Setup
This chapter introduces Flexbox, explaining its purpose in layout and styling. It then guides through the initial setup of an HTML structure with a flexbox container and multiple flexbox items, along with basic CSS to visualize them.
- 1:40
2. Understanding Main and Cross Axes
This section explains the fundamental concepts of the main axis and cross axis in Flexbox. It clarifies how these axes dictate the direction of item layout and how they change based on the flex-direction property.
- 4:10
3. Controlling Flex Direction
This chapter demonstrates how the flex-direction property influences the orientation of the main and cross axes. It shows how changing flex-direction from row to column alters the layout and the behavior of alignment properties.
- 5:30
4. Justify Content for Main Axis Alignment
This chapter focuses on the justify-content property, which controls the alignment of flex items along the main axis. It illustrates various values like flex-start, center, space-between, and space-around.
- 7:10
5. Align Items for Cross Axis Alignment
This chapter explains the align-items property, used for aligning flex items along the cross axis. It demonstrates how to stretch, align to the start, or center items vertically, highlighting its importance for vertical alignment.
- 8:40
6. Flex Wrap and Align Content
This chapter introduces flex-wrap for handling items that exceed container space and align-content for distributing space between multiple lines of flex items. It shows how these properties manage multi-line layouts.
- 10:30
7. Flex Direction and Axis Interaction
This chapter revisits flex-direction, demonstrating how changing it to 'column' flips the main and cross axes. It then shows how justify-content and align-items behave differently in a column layout.
- 11:50
8. Flex Item Properties: Shrink, Grow, Basis
This chapter delves into properties applied directly to flex items: flex-shrink, flex-grow, and flex-basis. It explains how these control the individual sizing and responsiveness of items within the container.
- 13:30
9. Align Self and Order Property
This chapter covers align-self, which allows individual flex items to override the container's align-items property. It also introduces the order property for visually reordering items, with a strong caution about accessibility implications.
- 14:30
10. Flex Shorthand and Conclusion
This final chapter introduces the flex shorthand property, combining flex-grow, flex-shrink, and flex-basis into a single declaration. It summarizes the key Flexbox concepts and encourages further exploration.
Every chapter ends with a checkpoint (quiz, flashcards, retell, diagram, or prediction) and the course closes with a final boss-fight. More courses →
Transcript (468 segments)
0:00Hello everybody. In this video, we're
0:02going to dive into the different parts
0:04of flexbox starting with what flexbox is
0:06and how flexbox works and then we're
0:08going to dive into the different
0:09properties that we can apply to flexbox
0:11in order to layout and style our
0:13elements as we want. So to get started,
0:15let's add a div inside of our body here
0:18and we'll give it a class of flexbox
0:19container since this will be the
0:21container that all our flexbox items
0:23will reside inside. Then inside of this
0:26container, we'll add another div, give
0:28it a class, and we'll call this one
0:29flexbox item.
0:31And we'll also give it a class of
0:33flexbox
0:34item one that way we know which item
0:37we're referring to when we style them
0:38individually. And if you save that,
0:40you'll see that we have a gray box show
0:42up on the right here and that's because
0:43I've already applied some styles to
0:45these flexbox items so that we can
0:46distinguish them and see them.
0:49Now let's copy this and add in two more
0:51flexbox items and save that and you'll
0:53see that we have now three flexbox items
0:55inside of our flexbox container, but we
0:57don't have any styling to actually make
0:59this a flex container.
1:01So to get started with creating a flex
1:02container, let's go into our styles
1:04here. We have our flexbox container
1:06selector and we can just say display and
1:08set it to flex and this is how we create
1:10a flexbox container.
1:12Now if I save that, you'll see that all
1:14of our items are now the same height and
1:16they all show up in one row. You'll also
1:18notice that if I shrink our browser,
1:20you'll see that these items will scale
1:21their size to fit within the browser and
1:24as I make it wide enough for them to all
1:26fit, you'll it'll just show up on the
1:27left side of the screen and this is
1:29really the main thing that flexbox has
1:31going for it. It allows you to style the
1:34flexibility and sizing of different
1:36elements in the container
1:38from the actual container selector here,
1:40this flexbox container, without ever
1:42having to style the actual flexbox
1:43items.
1:45So inside of the container for flexbox,
1:47you can do things such as laying out
1:49your different elements across the
1:50different rows and columns as well as
1:52aligning them inside of that layout. And
1:54then the the
1:56you can specify how you want them to
1:58flexibly grow inside of the container or
2:00how you want them to shrink inside of
2:02the container. To make this easier to
2:03see, I've created some background styles
2:05here.
2:06And if we save this, you'll see that we
2:08now have our flexbox container, which is
2:10this yellow background item, and then
2:12our different flexbox items with their
2:13numbers in the corner as these grayish
2:15colored with a border that is a little
2:17bit darker gray. This is where we can
2:19see when we shrink our browser, you can
2:21see that these items shrink together,
2:22and as we increase it, they'll grow
2:24again.
2:25Now, before we get started with actually
2:26laying out and styling our different
2:28elements inside of our container, we
2:29first need to understand the concept of
2:31the main axis and the cross axis inside
2:34of a flexbox container.
2:36I have these styles here that will show
2:37us the main axis and cross axis for our
2:39flexbox container. And as you can see,
2:41this main axis goes horizontally across
2:44the entire flexbox container, while the
2:46cross axis goes vertically. This is
2:48because our flexbox container is laid
2:50out in a row as opposed to a column.
2:53Flexbox gives us a property on the
2:54container called the flex direction,
2:56where we can set if we want our flexbox
2:58to be a row or column based layout. And
3:01depending on this, these main axis and
3:03cross axis will actually flip. So, in a
3:06column based layout, the cross axis will
3:08go horizontally, and the main axis will
3:10go vertically.
3:11All you really need to remember is that
3:13this main axis will go the same
3:14direction as your layout. So, in a row
3:16layout, it'll be horizontal. In a column
3:18layout, it'll be vertical.
3:20And in order to style the layout of
3:22these elements, you style them based on
3:24the axes, so the main axis or the cross
3:26axis, and not based on vertical or
3:29horizontal. So, if we wanted to style
3:31our elements on the main axis,
3:33we would use the justify-content
3:35property inside of our flexbox
3:37container. Right now, our main axis has
3:39a flex-start attribute applied to which
3:42means that all the elements will align
3:44at the start of the main axis.
3:46If, for example, we wanted to center
3:48these items inside of this main axis, we
3:50We change this from flex-start
3:52to center. And if you save that, you see
3:54that now all of our flex box items are
3:56in the center of our container. Another
3:58thing that we could do is if we wanted
3:59to lay out our elements with space
4:01between them, we could use the space
4:03between property here. And now all of
4:05the extra space inside of our flex
4:07container will be put evenly between all
4:09of the different items inside of our
4:11container.
4:12And if we wanted to have space on the
4:14outside of our container as well, we
4:15could use space around, which puts an
4:17even amount of space on all sides of the
4:20flex items and not just in between them.
4:23This makes laying out items in a
4:24horizontal manner very easy inside of
4:27flex box due to this justify content
4:29property. But if we wanted to, for
4:30example, lay out things on this cross
4:32axis, we would use the align items
4:35property. And right now, the default for
4:38this is stretch, which means our items
4:40will stretch to fill the most amount of
4:42space vertically that they can.
4:44That's why some of our items that were
4:45smaller grew to full size. If we wanted
4:48to keep the size of our items, we would
4:49use flex start, and then all of our
4:51items would align themselves at the very
4:53top of our flex box container based on
4:55this cross axis.
4:57We could also use center here in order
4:59to center them vertically, which is one
5:01of the most important things that you
5:02can do with flex box. Before flex box,
5:05aligning items vertically inside of a
5:07container was nearly impossible, but
5:09with flex box is as easy as one line of
5:11CSS and it will perfectly align all of
5:13your items inside of this container. The
5:15last way to align our items inside of
5:17our flex box container is to use the
5:19align content property. And this
5:22property is only for using on multi-line
5:25flex box containers. But as you saw,
5:27when we shrink our browser size, these
5:29items just shrink to take up the amount
5:31of space needed. But if we change our
5:33flex box here to use the flex wrap
5:35property and tell it to wrap, you'll see
5:38that now our items will wrap onto
5:40different lines
5:41instead of shrinking their size, as you
5:43can see here. And this align content
5:45property tells it how much space to put
5:47between the lines.
5:49For example, if we use flex start, all
5:51of our items will line up at the top of
5:53the container, while flex end will line
5:55them all up at the bottom of the
5:56container.
5:57An easy way to see this is if we add a
5:59height property to our flex box
6:01container. So, if we put height here,
6:03and we just make it, let's say, 700
6:05pixels,
6:06now you can see that flex end for our
6:08line content has made our flex box items
6:10all line at the bottom of our container,
6:13while flex start will make them align at
6:15the start. And this has very similar
6:16properties to justify content. For
6:18example, we could put space between
6:20here, and now we have spacing between
6:22our flex box item rows. And if we shrink
6:25this even further, you'll see that
6:27there's now even space between them as
6:28well, which is great. But, align content
6:31is something that I don't really use
6:33that often, and really justify content
6:35and align items are the properties I use
6:37most, since they align your individual
6:40rows along the main and cross axis. Now,
6:43let's revert that height back to be
6:45default, get rid of our align content,
6:47justify content, align items, and wrap,
6:50so we just have a normal flex box
6:51container here.
6:53We'll increase that size a little bit,
6:55and we'll also remove these axes, since
6:57we no longer actually need them.
6:59Now, if we go back into our styles here,
7:01and let's say we want a column layout
7:03instead, we'll just use our flex
7:05direction, change it to column, and now
7:07you'll see that our different flex box
7:08items show up in a column as opposed to
7:11the different row. And if we use justify
7:14content, and we say center, for example,
7:16you'll notice that they don't center
7:18horizontally, and that's because they're
7:19centering inside of the column
7:21vertically. And if we put that height
7:23back onto our flex container, let's make
7:25it 800 pixels,
7:29save that, you'll see that now they're
7:30centered vertically, and that's because
7:32justify content is using the main axis,
7:35which in this case is column as opposed
7:37to row.
7:38If we use align items, we can put center
7:41in here and save it, You'll see that now
7:43our items are centering horizontally
7:45because the cross axis is horizontal
7:48inside of a column-based flex box
7:50container.
7:51Now we can revert all that back to
7:53normal, so we just have our standard
7:54flex box container here, and we can
7:56start to talk about the different
7:57properties that we can apply to our
7:59different flex box items as opposed to
8:01the flex box container.
8:02As I mentioned, the container is really
8:04only for laying out spacing between your
8:06items as well as the positioning of your
8:08items inside of the container.
8:10The actual flex box item properties are
8:13meant to either override those
8:14positioning and layout properties or to
8:17apply different flexible sizing to these
8:19elements.
8:20As you can see, by default, when we
8:23decrease the size of our browser, our
8:24items shrink in size. But if we wanted
8:26to prevent that on, let's say, only our
8:28first item, we could go in here, use the
8:31flex shrink property, and set it to zero
8:33to say we don't want it to shrink at
8:34all. And if we save that, you now see
8:37our first item does not shrink no matter
8:39how small our browser gets, but these
8:40other two items shrink together.
8:43We could also use the flex grow property
8:45if we wanted to tell our items to grow
8:47bigger. So if we increase our size here,
8:49we have all this extra space. Let's say
8:51we wanted our third flex box item to
8:53fill that space. All we would do is set
8:56flex grow to be one, and now that item
8:58takes up all of the extra space no
9:00matter what size our browser is.
9:04We can also use flex grow on multiple
9:06items. So let's say we want our second
9:07item to also grow, we can just apply it
9:09to here, and as we increase our browser
9:11size, you'll see that they'll both grow
9:13proportionally to one another. So that
9:15way this item, the flex box item two and
9:17flex box item three, are the same exact
9:19size since they have the same exact flex
9:22grow number.
9:23If we, for example, change this to be
9:25two
9:26and increase the size of our browser,
9:28you now see that our flex box item two
9:31is about twice the size of our flex box
9:33item three. You will notice, however,
9:35that flex box item two is not exactly
9:37twice the size of flexbox item three as
9:39you would think by making flex grow
9:41twice as big. But all the flex grow
9:43property actually does is take all of
9:45the leftover space. So, if we remove
9:47these flex grows here, you see we have
9:49all this leftover space and it divides
9:51it between all the different flex grows.
9:54So, if we have a flex grow
9:55of two
9:57here
9:59and we have a flex grow of one
10:00on the third item
10:03flexbox item two will get twice the
10:05amount of available space that flexbox
10:07item three gets. So, if we save that
10:10you'll see that this flexbox item two
10:12has gained twice of the available space
10:13that was left over as flexbox item
10:15three.
10:16And the reason that flexbox item two is
10:18not actually twice the size of flexbox
10:20item three is because we have a width
10:23set on our flexbox items. So, it takes
10:25this 200 pixels and then adds the amount
10:27of available remaining space onto that
10:29200 pixels.
10:31If we wanted to override that, we could
10:33use what is called the flex basis
10:34property.
10:35And this tells our flexbox where to
10:37start growing from. So, if we change
10:39this to zero, our object will imagine
10:42that it is zero pixels wide when it
10:44starts adding additional space to it.
10:46And if we did this for both of our items
10:48here and saved it, you'll see that now
10:50flexbox item two is exactly twice the
10:52size of flexbox item three
10:54because it started adding additional
10:55space onto them in a two to one
10:57proportion. So, it added twice as much
10:59to flexbox two as it did to flexbox
11:01three. But they had no starting point at
11:03all. They started at zero, which means
11:05that flexbox two here is twice the size
11:07of flexbox three.
11:09When they started at 200 pixels, it
11:11still added twice as much space to
11:12flexbox two as flexbox three, but they
11:15had a 200 pixel beginning size. So, they
11:18weren't actually exactly twice the size
11:20as the other one. For the most part,
11:22flex grow, flex shrink, and the
11:24different justify content and align item
11:26properties are all you really need in
11:28order to create dynamic and complex
11:30layouts in either a row or a
11:32column-based container.
11:34But, if you needed to override the cross
11:36axis alignment of a property, you can do
11:39that with the align-self property. And
11:41let's say we wanted our second flexbox
11:43item to be in the center of the
11:45container instead of stretching the full
11:47height of the container,
11:48we can just use that. And now you can
11:50see that this align-self property
11:52overrides our align content of our other
11:54containers, and you can see that it
11:56aligns in the center here, while these
11:58other items are aligning stretch. And
12:00this can be applied to all of our
12:01different containers. For example, we
12:03could go up to our flexbox item one here
12:05and make this one flex-end, and you'll
12:07see that now this aligns itself at the
12:09end of the container instead of
12:10stretching, which is the default for our
12:12align items applied to our flexbox
12:14container.
12:16The very last property that is left to
12:17talk about is the order property that
12:19can be applied to our flexbox items.
12:22This allows us to change the order of
12:23our items inside of our flexbox
12:25container without actually changing our
12:27HTML.
12:28So, for example, if we want our flexbox
12:30item one to be our third item, we would
12:33change the order to three.
12:35Flexbox item two, let's say we want to
12:36be our first item, so we change the
12:38order here to one.
12:40And then we'll change the order of this
12:41flexbox three
12:43to be in order of two.
12:45And if you save that, you now see that
12:46our second item is at the beginning of
12:48our container, our third item is the
12:50second item in our container, and our
12:51first item is the very last item in our
12:53container.
12:54And this is because we use the order
12:55property to rearrange the order visually
12:58of our items without changing the order
13:00in our actual HTML.
13:02This is a property I highly advise not
13:04using unless you really need it, because
13:06this actually messes up the flow for
13:08people using screen readers, since the
13:10screen reader will still go in the order
13:12of the HTML, which means they'll get a
13:14flexbox item one first, flexbox item two
13:16second, and flexbox item three third,
13:19even though the order of display is
13:21different than that. This also messes up
13:23when you're tabbing through different
13:24form items. For example, if this was an
13:26input element for a text box, our tab
13:29would go to the flex box item one first
13:31and then flex box item two second, even
13:34though they're displayed in order where
13:35it should be two first and then three
13:37second.
13:38So, that's why I highly advise not using
13:40the order property unless you really
13:41need to rearrange the orders visually
13:43without actually messing with the HTML
13:45of the document.
13:47And that's really all there is to a flex
13:48box container.
13:49For the most part, you just need to have
13:51a container that wraps your different
13:53flex items. You give it a display of
13:55flex to say that you're using a flex box
13:57container.
13:58You then use the justify properties and
14:01the align item properties
14:03inside of your container in order to
14:05tell it how you want to line these items
14:07inside of the container. And then
14:08lastly, you can use the different flex
14:10shrink, grow, and basis properties in
14:13order to lay out your items individually
14:15inside of the flex box container to grow
14:17or shrink as you need.
14:19A shorthand for these different flex
14:21shrink, grow, and basis properties is
14:24just the straight-up flex property where
14:25the first number is your flex grow, the
14:28second number is your flex shrink, and
14:30the last number is your flex basis. This
14:33is a great shorthand property that you
14:34can use in order to apply all three of
14:36those different properties in one line.
14:38You can also leave off the later
14:40properties such as if we only wanted a
14:42flex grow to be one, we just put flex
14:43one and it will intelligently assign the
14:46flex shrink and flex basis properties
14:48without us having to actually manually
14:50set them.
14:51So, I hope you guys enjoyed this video
14:53and learned something new about flex box
14:55and how you can use flex box in order to
14:57create dynamic layouts for your site. If
14:59you guys did enjoy it, please make sure
15:00to leave a like down below. And in the
15:02comments, let me know if there's
15:03anything else about flex box you want me
15:05to talk about in more depth in either a
15:07future video or in a comment for you
15:09guys.
15:09Thank you guys very much. Have a good
15:11day.