Learn CSS Flexbox in This Crash Course

Understanding CSS Flexbox is super helpful if you want to make your websites responsive.

Flexbox is a powerful responsive web design tool that's built right into CSS itself.

And we just published a CSS Flexbox crash course on the freeCodeCamp.org YouTube channel.

James Maxwell created this course. Not only did he create the course but he also created some amazing PDF cheat sheets to go along with it.

The flex layout model allows responsive elements within a container to be automatically arranged depending upon the size of the screen.

You will learn about properties such as display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, and more.

You can watch the full course below or on the freeCodeCamp.org YouTube channel (35-minute watch).

Transcript

(autogenerated)

Understanding CSS Flexbox is important if you want to make responsive websites, James Maxwell created this course, along with some amazing PDF cheat sheets to go along with it.

Flexbox is going to change your perspective about web designing.

And again, for the power of course, I have created two beautiful PDF cheat sheets, which you can download.

These cheat sheets have got every single property that we're about to learn now.

One is exclusive for the parent container properties, and the others exclusive for the child properties.

You can use this cheat sheet for your future reference, I highly encourage everyone to follow the video now, and then later use the cheat sheets.

So let's dive into the concept of Flexbox.

Without any further delay, we are going to create a separate file for this learning purpose so that you can refer the file along with the cheat sheets in the future.

Let's quickly set up a head Sumo file using the Emmet function.

Now, I'm going to teach you guys another embed function to create a container and the children inside it.

So we need a div tag with a class container.

And then inside a greater than symbol to create a few children inside the container.

Let's give the Child Element a class called items.

So again, we'll have to enter a dart and just type items.

And we also want every child element to have a unique number to it.

So insert a hyphen, then insert $1 symbol times five.

This Emmet function will create a container with five items numbered within it.

We also want the items to have one unified Alias Name to them.

And we're going to call it as item.

So again, insert a dart and just type item.

Now hit enter.

How simple was that? This might look a little intimidating at the beginning.

But once you get used to it out of practice, you won't be able to create head Sumo containers without these beautiful image functions.

To learn more about these mn functions, you can visit Doc's dot me.io.

Now before moving to our CSS file, we'll have to fill in the numbers inside a div tag.

Let's quickly create a CSS file and link to the HTML file.

Let's begin with the basic reset using the universal selector.

So we're going to set the margin to zero padding to zero and box sizing border box.

Next, we're going to style the container and the child elements to implement the Flexbox properties.

So we're going to target the container now.

And give it a background color of hash Ca Ca NCAA, which is a light gray color.

And then give it a padding of 10 pixels.

Then a margin of 50 pixels.

Next, we're going to talk at the item selector.

And we're gonna give them a background color of hash, ff 0037, which is a nice red color.

And then for the font and so the item, they're gonna give them a white color.

Font Size of 35 pixels, padding of 20 pixels and a margin of 10 pixels.

If you see here, we haven't implemented any Flexbox yet, but we have a gray color container and red color items inside the container.

The items could be anything in a real website.

It could be the navbar of the website, or few majors paragraphs or whatever.

This video is all about the Flexbox container properties.

To enable Flexbox we'll have to set the display property to flex inside the container.

So let's set the display property to flex inside a container.

You can already see the magic Flexbox has produced a work a lot as you can see, to create this kind of layout using the float property position property and the margin properties, it would have been a tedious process, I would never take that risk personally, just by setting the display property to flex in the parent container, the child elements have become the flex items.

Now, let's talk about the flex direction property.

The flex direction property is used to find the direction of the flex items within the container.

By default, the flex direction is set a row.

When the flex direction is set a row, you see nothing happens.

Apart from row, there are a few other direction values that will change the direction of the children inside the container.

Let's see them one by one.

When we change the flex direction column, you can see the children items are arranged vertically in a column.

That's the superpower Flexbox.

By setting the direction to column, we have changed the axis itself.

There are two different axes according to Flexbox, the main axis and the cross axis, the axis differs for different directions.

For the flex direction set row, the main axis would be the x axis.

For the flex direction set of column, the main axis would be the y axis.

This concept is nothing related to the Flexbox, our web development, this basic math, to invert the direction of the flex items in either column or row, we can use the column reverse or the row voice values.

When the direction is set a column reverse.

You can see the direction of the items are inverted in the y axis.

So the main axis here goes from the bottom to top there before it was going from the top to bottom.

And of course, the numbers are in the reverse order fires in the top and one isn't the bottom.

The same rule applies for reverse, you can pick the right word that one would do.

So when I said the flex reaction to reverse? Exactly, it stacks the items in the reverse order.

Here, the main axes most from right to left.

And the numbers are also in the reverse order, you should always be aware of the main axis.

That's really important.

Since we've experimented all the possible values for flex reaction property, let's set it back to row which is the default value.

We haven't explored much about Flexbox yet, but I'm sure you could understand how much Flexbox is going to help us in the making of a responsive design.

Probably when designing for a smaller screen, we can simply set the flex direction to column, which will stack the items one on top of the other.

So that's all about the flex direction.

Next up, I want to discuss about the justify content property.

So remember that the justify content properly defines how the flex items should be stacked along the main axis.

Let's start with the center value here.

Now automatically, all the flex items are stacked in the center here.

Let me zoom in a little bit so you can see things clearly.

Right, you can always use the dev tools to inspect the elements.

The browser has understood that this div tag is using Flexbox.

When you hover over the justify content property, you can see how beautifully Flexbox had calculated the distances and align the items in the center.

Just imagine if we didn't have Flexbox.

To create this very simple layout.

Well, we should have used a float property that would have been a real nightmare for us.

So the center value aligns the flex items right in the center of the container.

But it does not do anything with the space in between the items.

The space between the items is because of the margin value we give for item selector.

So if the comment is value, you can see a flex items are tightly packed.

Let's quickly uncomment this margin and experiment the next value which is space between so let's change the justify content space between then we said the justify content space between you can see that the space between our flex items are evenly distributed.

We didn't have to specify any number here, but Flexbox automatically calculates the distance and distribute the items according to the space available.

The best part here is the other side.

Have a browser, the space between items also adjust.

That makes it really handy to create a responsive layout.

Let's now come on the margin property inside the item selector again, because we're going to explore another value which is similar to the space between called the space around changing the justify content space around you can see the space around value had created equal amount of space on both the left and the right side of the flex items.

The space between these two items is twice the amount of space on the left side of this item.

Next up, we're going to see the space evenly value.

So changing the ship icon or space evenly.

When I started using the flex box, I initially didn't understand the difference between these values, that's totally normal.

You'll start understanding these values once you start using them in your projects.

So setting the value to space evenly, you can see that the space between the flex items is evenly distributed on both sides.

The space between flex item one and flex item two is the same as the rest.

So while space II will ensure that the space between the items is always the same on both the sides, the space around nature that the space around each item is the same on the left and the right side.

Definitely not a big difference, but the usages differ completely.

There are two more values for the justify content property, the flex start and the flex end values and the justify content they serve flex start.

Well, it is the default value.

Let's uncomment the margin value to ensure that yes, it is the default value.

Now, if he said the justify content, a flex end.

Here a very complete attention.

People often confused between raw reverse and the flex in values.

Reverse will invert the order of the flex items.

But the flex in value when you move the flex items to the end of the container, maintaining the margin if provided.

Alright, the last property we're going to discuss in this video is the Align items.

To justify content property aligns the flex items along the main axis, but the Align items property aligns the flex items along the cross axis.

In order to make the Align items property work, we're now going to make one of the flex items bigger than the rest.

Because every flex item is having an unified hide.

So it will be difficult to demonstrate the Align items property to kind of pick the third item and set its height to 150 pixels.

Let's also change the justify content center.

And here it is.

I'm just noticing an error with my nomenclature.

I've included numbers for items, which should have been four item that's totally fine.

Here, you can see that all of flex items are now having a height of 150 pixels and not just the flex item three.

That's not a bug, but it happens because the default value for our line items is scratch.

When the line item is to stretch, this is what happens.

So let's also add the Align items to center.

All right, we can visualize how align items property align or flex items along the cross axis.

Here we have one flex item that is bigger than the rest.

And with the Align items property service center, we center the smaller flex items relative to the bigger one in the vertical fashion.

If we now set the Align items to flex start all the items will start at the top along the top of the bigger flex item.

The opposite will happen if we say the Align items to flex end.

So the flex items align equally at the bottom.

So far we saw center flex start flexing and the stretch values for the Align items property.

The stretch value Prices stretch the height of all flex items to match the height of the tallest flex item.

There is one last value for the Align items property, it is called the baseline.

It lies the baseline value will first have to increase the font size of one of the item.

So let's select item number four, and increase its font size to sound pixels.

If we now set the Align items to baseline, you can see that it aligns all the flex items along the text inside the item number four on an imaginary line.

I'm not going to reset a line items center and get rid of items number four, and items.

Number three selectors here.

All right, we're coming to the end of this video.

So flex direction, justify content, and the Align items are the most important and the frequently use properties.

Of course, there are a few other properties, but we will see them in another video.

Before we end this video, I want to answer to one of the highest rated question, what will happen to justify content and the Align items property and the flex direction instead of column? Well, let's check that out.

Great.

If you notice, the main axis had changed now.

It is no longer going from left to right.

But it is going from top to bottom.

Everything is fine.

But why is that the items are aligned to the center yet? Well, that's due to align items, they said the center and the flex direction the set of column.

When the flex direction is set a column, the main axis would be the y axis and the cross axis would be the x axis.

We know that the Align items property affects the cross axis.

And that's why our items are aligned at the center vertically.

So if we now set the Align items to flex end, and you can see that the items are aligned at the end of the container vertically.

The opposite of this will happen if we said the Align items to flex start.

And yes, the items are stacked at the beginning of the container.

So I would again emphasize you guys to always keep a track of the main axis and the cross axis in order to use justify content and align items in the right way.

Now for your better understanding.

I'll also experiment with the justify content when the flexor action is a call.

For that, we should first set a height value for the container.

So maybe let's set it to 1400 pixels.

And then I'll decrease the size of my viewport.

Now that said justify content space between here if I hover over the justify content on my dev tools, you can see that the space between the items are distributed just as we saw earlier, but in the vertical direction.

All right, let's end this video here.

I know I'm leaving most of you with a skeptical mind.

But that's totally normal for any beginner.

I felt the same when I learned Flexbox for the first time.

And that's why I made those beautiful cheat sheets for the reference purpose.

I feel it would have been better if someone gave me those cheat sheets when I started learning Flexbox you can now rewatch this video along with the cheat sheet so that you get a better clarity about these concepts.

Let's quickly set the flex direction row, remove the height and set justify content in align items center and end this video.

Great.

Let's meet back in the next lecture to learn more about the Flexbox concepts.

The last lecture, we learned three important Flexbox container properties.

There are a few more but we'll see them later.

Now in this video, let's learn about the Flexbox child properties.

So this is where we left in our last video.

The first property we're going to learn in this lecture is the Align self property.

The lens of property is similar to the Align items property.

With the help of align items property, we were able to collectively change the alignment of a flex item Along the cross axis, but the Allen self property will align one single flex item along the cross axis.

And it can also override the Align items property.

I know it sounds like gobbledygook, let's see them in action to understand how it works.

to experiment the outlines of property, let's again create the item three selector and give it a height of 150 pixels.

You're going to use item three as a reference point.

So let's try applying a lens off to item number four.

Right after item number three, you're going to create item number four selector and creating a lens of property here.

Let's set this to flex start.

Well, you can see that when the item number four is aligned at the start of the flex container, and all of the flex items are aligned to the center of item three along the cross axis, align self property accepts every single value that align items property accepts.

But as I told you earlier, we use a lens of property only to align an individual item.

Now, let's change this to flex and and see what happens.

So the item had moved to the bottom of the flex container.

Now, when Allen's office said a stretch.

Well, the item stretches to match the height of the tallest item, which is item three in our case.

Now, I'll leave this to you guys.

Go ahead and experiment the other possible values like center space between space evenly spaced around and try to analyze the use cases.

Next up, we're going to play with the order of a flex items.

The auto property is used to change the portion of flex items within the container to experiment this property to going to create selectors for all of flex items and change the order the initial value of order zero.

So according to Flexbox, the flex item one is in the zero portion.

Let's set order property to every flex item and change the potions.

So we're going to move item one to push in three.

Then item two, to potion for item three, to question zero item for position one.

item five to question two.

So after saving the file, you can see our items are relocated.

want you guys to understand that these values are give here are just experimental values.

You can go ahead and arrange the items as you wish.

But again, I would encourage everyone to follow the order I'm giving here so that we continue on the same track.

If you see here, one is a third question to set forth version three is add zero to question four is that first question and phi is that second portion.

The auto property will be handy for us to relocate the portion of the elements when it comes to responsive design.

You can see some people using negative values to change the order.

But I never encourage anyone to use negative values that will confuse us when we look at our code in the future.

That's all about the auto property.

We're now going to see the last three properties associated with the flex box child items.

The flex grow flex ring and the flex basis and remove the auto properties from all of flex items.

The first going to see the flex grow property now.

The flex group property enables a flex item to grow.

To grow a flex item.

All we do is specify an integer, just a number like how we assigned to the auto property.

to experiment this property.

Let's apply generally in the item selector.

So I'm going to create a flex group property and set it to one.

Well, all of flex items have become larger in size.

So here all the flex items are occupying the empty space that they can fit into the container.

In other words, the occupying the maximum space available inside the container we can visualize is better if we again come in the margin property.

You can see they're touching each other now, and occupying all the space that they can, that's about the flex grow property that we uncover this margin property now.

So even if you change this one 200, they're not going to get any bigger than this.

That's because the value only matters in relation to the rest.

Let's reset this value to one and try to understand how the value matters.

In relation with the other flex grow values.

Let's add a flex group property to item four and give it three.

So here, item number four is three times bigger than the rest of the flex items.

By this I'm sure you can understand how the flex group property works relatively.

When I change this three to five, it's going to become five times bigger than the other flex items.

That's all about the flex group property.

Let's remove the flex group property from item number four and discuss about a short end property.

So the last few properties we are learning have a shortened property to them, we can directly call them using the flex keyword.

So with the flex keyword, we can declare three different values.

The first value will be for a flex grow property, the second will be for flex ring.

And the last will be for flex basis, then we simply give one is the first value, it will automatically understand that we're declaring the flex grow value.

So if remember the grow keyword from here, every flex item is still occupying the maximum space.

This method is going to be extremely handy when it comes to real world projects.

And in most cases, we'll be using the shorthand property in a project.

Maybe we want one of our flex items to grow larger than the rest.

For example, let's try growing the last item.

Now setting flex five to item number five, you can see that it is occupying the maximum space and the rest are relatively occupying the available space.

This is all about the flex grow property.

Next up, we're going to see the flex basis property.

Flex basis property will set the width of a flex item.

Instead of using the width property, we can use the flex basis using the flex basis property or the width property would mean the same.

That's always a personal choice.

But in my opinion, I would say it is always good to practice to use the flex basis property so that we'll be able to differentiate the flex item and the nominal item.

Now for our example, I'm going to change this to flex basis and said this is 75 percentage.

When we're using the flex basis property, we should declare a percentage based value or a pixel based value.

Now, the item number five is occupying 75 percentage of the container and the rest are altered to occupy the remaining 25 percentage space by setting the flex basis to auto in the background.

Do not worry if you're not able to understand the difference between these properties.

You're going to use them a lot in our course.

So you'll eventually understand them out of practice.

The very last property we're going to see in this video is flex shrink.

So to show you guys what the fracturing property does, let me change this percentage value to pixel based value.

Maybe let me change this to 700 pixels.

Right.

Let me also minimize my browser window to demonstrate this property.

Now, if I increase the viewport width, just see what happens.

So you can see that our item number five shrinks at a certain breakpoint.

In spite of setting its flex basis to 700 pixels, it shrinks at a certain point.

To avoid this, we declare the flex string property and set it to zero.

The only two values to the flex string property one and zero.

So it works as a binary property.

By default it is set to one which means it will shrink the flex item at a point.

Let's try setting the flex string property to zero and see what happens.

But before that, let me expand my browser window size Going to my text editor.

I'm going to set a flat string property to item number five and set it to zero.

Now, if I try to decrease my browser window size Well, you can see that after setting flexion to zero, no matter how much size we take off from the viewport, the item number five is not shrinking.

But the rest of the items are overflowing the viewport.

In most case, people ignore to understand that they using the flex ring property.

In real time we use a flex keyword where we can consecutively declare all three properties flex grow flex ring, and the flex basis that we want to target the flex basis, aka the width property to set the flex items with.

And that's how we'll be implementing in our course too.

After watching this video, I highly encourage everyone to open up the cheat sheet and practice until this point.

In the next video, we're going to learn the rest of the flex container properties and in this section.

Before we end this section, I would like to teach you guys how to handle a lot of flex items into the flex container.

So right now we have five flex items.

Let's simply add another five flex items to our container and receive the class names.

So you can see that all these flex items are closely packed to fit into the container, and some are overflowing the flex container at zoom a browser to 150 percent is for the demonstration purpose.

If you don't find these items overflowing, simply zoom your browser window as I've said.

Now coming back to the point, we have this one last video for this section.

Because they've got a solution if you find a flex items getting cramped up like this.

So we can use the flex wrap property to overcome this issue.

The default value for flex wrap is no wrap.

And that's why our flex items are overflowing the container.

But if we create a flex wrap property into the container selector and set it a wrap.

Then this will create a new line like this to fit all the flex items inside the container.

In case we are a selector for Item Number 10 and said the flex to one.

You can see Item Number 10 is occupying its maximum space in the line.

Now if you shrink the browser size, then the flex wrap property will wrap the flex items more and more to ensure that all the flex items fit into the container.

And once again, this is going to be extremely useful for the responsive design, then we have less amount of space in the screen.

Now let me increase the height of the container here and show you guys what will happen.

And we let's set this to 600 pixels and see what happens.

So here we still have two rows.

But why do we have this empty space in between.

That's because of the Align content property which we haven't discussed yet.

That's again a flex container property.

So let's create it align content property into the container selector and set it to flex start.

Now as you can see, every row in a flex container is at the top of the container.

Therefore the Align content property aligns the row in the cross axis into the container.

Again, we can use the same values for the alencon in property as we use for the island items and the islands of property.

Here, I want you guys to pause the video and analyze the difference between the Align items align itself in the LM content properties.

Now let's set the LM content center.

So as you can see, a rows are aligned at the center of the container.

We can also change the flex end.

And yes, the rows are at the end of the container.

Then let's see the space around On space between and finally the space evenly.

So the old walk in the same logic, as you see, these properties will take some time for you to memorize.

But you don't have to really worry about it because From now on, the only going to use the Flexbox in our main project.

Kudos to everyone.

We have mastered the concept of Flexbox.

Let's not waste any more time.

We have got a beautiful app to be constructed inside our website.

So it mitigates in the next section, where we'll be reconstructing a navbar and the hero section, and then we'll move on to our app.