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.
