CSS Course | Flexbox in CSS in One Video | Easy

Tutorial | Complete Web Development Tutorial 24

00:00
Hey what's up guys, I am Anuj here and welcome to the complete web development course
And today we are going to talk about the flex property Today we will see how flexbox
works inside CSS and how you will make layout with the help of that With the help of
this you can make a great responsive and flexible layout Before this we have seen position,
float and clear properties And with the help of those we made many layouts But that was
the proper method proper method we will learn today How flex work help us In the modern
development flex you will use To use flex, we need a container

00:30
We need some children inside that We will have two type of properties, Flex container
properties and another is flex children We will talk about both but first make a html file
Here I have a flexbox folder and inside there are two files, index.html and style.css First
learn the basic of flex Before we make some advance layout, we need to know the basic
properties And what other properties come with these properties And what are their use
cases

01:00
For that I will make some boxes within the container container and let's say I will make
8 boxes here like that Now I have 8 boxes here in one container Here you can write 1, 2
like that or it would be better if you can do this with the help of emmet Do you know how?
You will write box 8 and what will be the content inside that Here I will write dollar, then
1,2,3,4 will come in the box automatically

01:30
If you want to write something else other than 1.2.3.4 then Box and dollar then press enter
Then with the help of emmet box 1,2,3,4 will come on it's own this is a great tool and with
the help of emmet ou can do this quickly We have a container and many boxes here I have
connected a style sheet with it I will minimise this I will now give style to container and
boxes I will come inside the container

1 / 13
02:00
I will give height of 400 pixel and border of 2 pixel solid and red Along with that, I will
give styling to the boxes now For styling it, I will give simple border of 2 pixel, solid and
green Now let's see, how our layout is looking like So it is looking like this, we have a main
container, this red box and inside that there are many boxes

02:30
Inside this boxes we can give margin or padding Let's give margin and leave padding now
Margin from top and bottom of 10 pixel and zero for left and right You can see the margin
from top and bottom So like this, it is a normal flow If you want this to behave like a flex,
then we can display the container or the parent Display flex, we have seen previously that
we have options of inline, block, inline block and none in display

03:00
Other than this we have display flex also With the help of this our container will become
like flexbox All children will become the children of flex And all the children of flex came
in one line This is the default behaviour of flex Because of this all the children of flex
come in one line From this slide we will learn some new thing about flex I have made a
box here, at the moment see the figure now Do not have to see these, just see this figure

03:30
These doted thing is our container This is a children inside the container see the horizontal
line along with the children This is the main axis This vertical axis is called the cross axis
This horizontal is the main axis and vertical is the cross axis One thing you have to keep
in mind that, whenever you will make flex of anything, that will be around main axis That
will not be around cross axis Now the layout on which I made flex, All the boxes came
around the main axis

04:00
If you want to flex them around cross axis or that you have to change the main axis to cross
axis Than you have to change the flex direction So we will come here and there is flex
direction property, I can make it column This is by default row, like that If I will do this
row, there will be no difference If I will make it column, then you can see, this is vertically
making flex here Now the main axis has become vertical Because you have changed the
row direction from row to column

2 / 13
04:30
Let's see the values of the container inside the flex What are the properties are there Let's
see the property of the children of flex Now I will add the properties inside the container I
will add the properties inside the children of flex later So, these are some of the properties
of flex container First flex direction, which we have seen. Other than this, there are other
things except row and column We have row reverse If we do, row reverse, the item of the
flex will start filling from right

05:00
So at first box 1 will fill then below that box 2 comes then box 3 and so on Other than that,
we have column reverse We know what will happen, this will fill like column but from
down direction So first box 1 will fill, then box 2 and then box 3, box 4 and so on So this
was our flex direction property We have flex wrap property To use flex wrap First I will
give width of 100 pixel to these boxes

05:30
I think 100 pixel is more big I will run this and see, I will do inspect here I will comment
and remove that flex direction which is in column reverse now Now you can see, how the
boxes are visible here If you squeeze that, you will see all the boxes are getting shrink all
the boxes are getting shrink and when they will shrink much, the content inside that will
also start getting shrink like that

06:00
Our elements are getting shrink When all our elements get the total width taken, like here
it is 100, then it will not get shrink more You can make it smaller, let's say I will make it,
80 pixel Now it is smaller, you can see when we are sqeezing it, it is becoming smaller If
you want it not to be smaller but to come one after another on it's own For that you can
define flex wrap This will start wrap by this It's by default property was no wrap

06:30
But if you want, you can make it wrap By wrapping when it will squeeze and it will get
less than the max width, it will automatically start wrapping below Now box 5 will come
down like that These all elements are wrapping on their own like that One thing I will do
here, so there should be no confusion I will change the box sizing to border box for all
elements so that they will behave properly Because I had defined border of 2 pixel

3 / 13
07:00
But border of 2 pixel will make problem later So I will define box sizing as border box so
that the border will include in the complete container size Now the 2 pixel border will also
include in the complete container size, which is 80 pixel width There will be no difference
now also our elements are getting wrapped in a same way here, like that We have another
value in flex wrap, that is wrap reverse

07:30
Here also the elements will wrap but in reverse format It means, when this box 8 will not
get place here it will go up, then box 7 will go up Then box 6 will go up So the wrap is
happening but in reverse format so box 1 and box 2 is at the bottom And box 7 and box 8
are at the top May be if you use it, but mainly people don't use that I use mainly wrap or
no wrap I will add margin here as all the boxes are sticking together

08:00
So if we want, we can add margin here 10 pixel margin from each side so boxes are spaced
out like this The boxers have come a long way, but they have also come a long way from
the red line. right? May be if you want that margin will not come beside this red box You
want the margin will only come between two elements For that we have another property
and you will not define margin in that case

08:30
You will define gap This gap property is also defined in container You can define gap
like this, let's say of 10 pixel Now what will happen, there will be gap in between all the
elements we have here The first element you can see is glued to the parent body But it is far
from the second child Gap define gap between the child You can see that, this is defining
gap between the children It is defining gap from the child above and the child which is in
it's right side both

09:00
So the gap which I have defined, that is actually a shorthand property for gap row and gap
column So what we have defined 10 pixel, that it defined in between gap row and gap
column here You can write here like that You have not defined gap but row gap you have
defined 10 pixel So the gap will come in between the rows Here no gap is coming but when
there will be one more row, then you can see two rows and the gap in between

4 / 13
09:30
If you want the gap in between the columns also, which was made for that you have to define
column gap and 20 pixel Then there will be gap in between the columns also So the previous
property gap, is actually a shorthand property for row gap and col gap Lets understand
another shorthand property, which is, flex flow flex flow is the shorthand property of flex
direction and flex wrap So you can define both in flex flow

10:00
You don't write gflex direction and flex wrap You can define flex flow wrap and row like
that So, it will wrap and the direction will be row You can see that, it is wrapping and in
the direction of row This is a shorthand property for these two properties After that I will
talk about justify content with the help of justify content you will mostly work on the child
around the main axis

10:30
If you want to align the child around the main axis to left, right or center you can use justify
content Now I will see more values Here it is written that, if you want to align items around
the main axis you can use justify content Here it is written that, we use justify content to
align items on the main axis which in this case is the inline axis riunning horizontally

11:00
But if you want to justify content on the axis, vertically for that you know what you have to
do You have to change the direction from row to column, right? Now let's see, how justify
content will work I will keep flex flow like that and below that I will define justify content
Please keep in mind, whatever we are talking about now, that is our container's property
We have till not seen the children's property We are now talking about container specific
property I can add many values within justify content

11:30
First I will mention space around, what it does? It gives space around your content whatever
space was left other than content, it will be come around the content You can see, there is
space around my content. In right also and in left also You can understand like that, when
the boxes were there and suppose I remove the gap and you have removed the space around
also from justify content then our elements will stick to each other

5 / 13
12:00
There is lot of space left If you want this space to be distributed equally in the left and right
side of these elements the space should come at right and left both and for that we can
define space around here When I will define space around, you can see, what will happen
The space came in the right and left side of box 1 and as well as box 2 and so on It is
different from margin And you can see that, space around will get change When we are
sqeezing it, our space is becoming smaller and not our contents

12:30
When there will be no space after sqeezing then you have defined flex wrap Then your
elements will start wrapping on their own So, in this way you can see that, there is a
reactive layout is getting created which is called responsive layout, right? It is called flex
because you can make flexible layouts with that You can see that, how easily it has become
responsive if you want to make a library or gallery type app, you can make it very easily

13:00
If you want no space to come at the right and left side Then you can use space between
instead of space around I will do copy this and comment this but if you write it below
without comment also it will overwrite I will take space between instead of space around
You can see there is no space at the right and left side The space was distributed in the rest
on it's own when you will squeeze it, it will behave same like before First space will be
lesser and when there will be no space left

13:30
then it will start to wrap as we have defined wrap, like that And about wrap also you can see
that, when there is two elements Then box 7 and box 8 also are satisfying this property Here
also they have space in between If I will get the third element also, the space in between is
coming Other than this, we have flex start and flex end Let's see flex start flex start basically
align all the elements from left, like that

14:00
This is a by default property of flex You can define flex end by that all elements will come
at the right side like that By Flex end it will come at the right side But you have to keep
in mind that, it will work around main axis only It is coming start or end position around
main axis You can define this So this was flex end after that we can write center Like that
all our children will come at the center

6 / 13
14:30
And if you want gap in between them, then you will define gap here Let's say gap of 10
pixel All our elements will come at the center and there will be gap also in between them
Till now we have seen how we can align the children left right and center around main axis
But if you want to align the children left right and center around cross axis For that we will
use another property, which is align items With the help of align items property, you can
align the children around cross axis You have noticed one thing that, I have not defined
height for these boxes 1,2,3 and all these children

15:00
I have defined only width and not height inside the boxes How it has taken the height of the
parent on their own? When you are writing here properties align items and define center
You will see that all elements will become smaller It has become smaller and has taken the
height of the content So you can understand that, there should be a default value of aligned
item

15:30
and for that these all elements were stretched like that Yes, the property is stretch and this
is the default value of the align items And for that all elements were stretched like that so
we can see all elements as stretched But you can change it's property You can take center
like what we have seen You can define flex start, other than center With flex start property,
all elements will come vertically around the start of the cross axis

16:00
You can do flex end also like that With flex end, all elements will come vertically around
the end of the cross axis If you want, you can again define center here Mostly if you want
to make one div center inside another div You will make the parent container as display
flex and will define two properties inside Justify content center and align content center
By that, any children inside the div will come exactly at the center In this way we can add
one div at the center inside another div

16:30
This is one of the way so you can understand that, align items is used to align items around
the cross axis If I want to align items around the cross axis, I will use align items And If I
have to align items around the main axis, I will use justify content Another Flex container
property is left, which is align content With the help of align content, the rows, which are
built here If we squeeze it, you can see that, two rows are created

7 / 13
17:00
The gap in between those also you can change and you can set this You can use align
content also So, I will come here and define align content I will write flex start, then you
will see our rows will be created at the top All the rows are created at the top I can define
space between here space will come in between these two rows

17:30
I can define space evenly here So, space will come evenly around the top and bottom of
these two rows People may get confused here that, I have said so many keywords here Flex
direction, column reverse, wrap, Flex space around and this that So do we have to do all
together? So I will tell what you need to memorize You have remember this first that, when
you add display property in flex, it will become container flex

18:00
Sometimes we forget this and add flex here I will write Flex here. Now why it is not
becoming flex? Flex will not be created as you have to add Flex in display After that you
need to remember justify content and align items You have to memorize the values of justify
content and align items which are flex start, flex end, space around and space between,
space evenly and then center You have to remember these values It is not important that,
you should know the flex flow flex flow is the mixture of flex wrap and flex direction

18:30
This is a shorthand property, you don't have to memorize it You can remember flex wrap
and flex direction separately As much as you will make the layouts and will use flex inside
layouts, it will automatically be in the memory In this way we learn flex No need to take
tension, we will learn flex slowly We will use flex and it will be in our memory These all
were container properties Let's now talk about child properties The children of flex also
have some properties

19:00
These properties you can define only to the children You can make the individual children
behave separately If you want one child to behave something and the other child to behave
something else You don't want to make all of them, same You can give different property
to different children First property, I will talk about is order Now I will write the properties
not in the container but inside the box Or we can do one more thing that, if we want, we
can give different Ids to different divs

8 / 13
19:30
I can write here Id equals to box 1 If I will write in this way I have to give many Ids then
box 2 , box 3 Instead of doing this I can use emmet again I will mention dot container then
inside that I will mention dot box And I will give Id to that #box and for giving Id, I will
write dollar here

20:00
Then these all will get Id I want to define some value inside this For that I will write box
hyphen dollar then they will get values And after that, I need 8 like this Now you can see
that, the Id has come here to box 1 till box 8 This is the style of emmet, if you are not
understanding how this emmet is working You can follow the chit shoot of emmet Rest,
when you will start trying emmet, you will understand it on your own Don't take tension
about emmet as you can define Ids separately also

20:30
I have Ids created here With the help of these Ids I can access different child You have a
pseudo selector also to access the child which is annex child but we will see that later First
I will mention box 1 like that I want to give some other property to box 1 First I will talk
about order, right? I will write order 1, by default order value is 0 When I will give this
border 1, order of all the boxes are zero

21:00
As I have given order 1 to box 1, so, you will see box 1 will go to the end Box 1 roamed
from here but box 2 to box 8 are lying as it is but box 1 changed it's order to 1 and moved
to end Because it's order is the biggest So it will come at last right? If you want to take
any element to move after box 1 then you have to make the order bigger for that box than
box 1 Suppose you want to bigger the order of box 3

21:30
I want to see box 3 after box 1 I have changed it's order from 1 to 2 So, what will happen,
my box 3 will be visible after box 1 Order of Box 2 to box 8 are zero Order of box 1
is bigger than that and box 2 is bigger than box 1 So you can define the position of the
elements according to their order in left or right You have to do it with handle with care
You are defining order like this Usually we don't define order like this Usually inside html
we change the order of the elements

9 / 13
22:00
Because our screen reader sometimes written visually impaired within the users screen
reader read things from top to bottom in this order It doesn't know what is the order
mentioned within CSS It doesn't know how it is visually represented It will see box 1 is
written first and after that box 2 is there and so on So you have to handle this with care as
how you want to define this I will mention order here then our box 1 will show at the last
on it's own

22:30
Next property is flex grow This is a very important property You can ask any particular
child to grow by flex grow property And you grow in a different way Suppose I want my
box 1 which has come to the right side, I will mention flex grow for that Flex grow of
let's say 7 You will see box 1 taken whatever space was left after all the boxes came to the
center

23:00
That left space was taken by box 1 Because I had mention grow for box 1 It will grow on it's
own like that When it will come to the growth of it's container or what we had mentioned
80 pixel right? when it will become less than 80 pixel it will start wrapping Now also box
1 has grown up Here we have set up the grow property of box 1 Other than this you can
set up grow property for some other also

23:30
Suppose you have define flex grow let's say 2 Now what will happen, box 1 and box 3 both
will grow but box 3 will grow in double speed of box 1 You can see box 1 has grown but
box 3 has grown much than box 1 When you will make it small it will get small but when
you will make it big box 3 will grow faster Actually it is not getting exact double growth
as there are some spacing also

24:00
So it is not properly double But it is growing like this I will see now on flex basis by which
it can grow twice But here it is growing like this, as box 1 is growing lesser and box 3 is
growing more Like flex grow we have another property flex shrink This will take care of
the shrinking property If we want to see the property, we have to do some work first I will
remove the wrap of the flex flow so that all the elements will not wrap

10 / 13
24:30
All the elements will come into one line, like that Let's define flex shrink in the box 1 By
default property of flex shrink is 1 You have to remember this that, by default property of
flex grow is 0 By default property of flex shrink is 1 If you want to shrink more you have
to define the value more than 1 I have defined 2 What will happen, when all elements will
become smaller, this box 1 will shrink very fast You can see that box 1 is getting smaller
first

25:00
In this way our box 1 had shrank In this way we can define which element we want to shrink
first In this way you can define which element you want to shrink first and which element
you want to grow first Similarly inside the flex shrink you can use for the other elements
also Suppose I like box 4 also to get flex shrink with box 1 If I want to make it shrink more
rapidly, I will define a bigger number here

25:30
So Box 1 and box 4 both will shrink but box 4 will shrink a bit faster than box 1 You have
seen that, box 4 has already started shrinking Box 1 also shrank but you can see that, box
4 had already shrank more Now if we sqeeze more, box 1 will shrink and other elements
will also start shrinking So, this was our flex grow and flex shrink Next property is flex
basis You can define the initial width around the main axis with the help of flex basis

26:00
I will repeat again If you have to define the initial width of the elements around the main
axis you can do that with the help of flex basis I will write in box 3, at the moment I will
remove grow from here You have understood grow by now, I will remove grow and order
from here now I will remove flex shrink also from here Here it is written normally

26:30
If you want box 1 to come with a by default width than inside that you can add flex basis
of let's say 100 pixel Other boxes are of 80 pixel so box 1 will come with a bit bigger width
You can see that box 1 is a bit bigger, though Can't tell by looking at it, I will make it 200
pixel so box 1 will come with a bigger width In this way you can define the flex basis Flex
basis define the initial width in the direction of the main axis for a particular child

11 / 13
27:00
In this way you can define the width of a child initially And you will use flex basis mostly
in this way suppose you want these boxes to come in two lines right from the beginning
You want these eight boxes to come within these two lines And whatever width is there,
should equally distributed within these boxes on their own So what you will do, you will
not define width for them It will not matter if you define the width also

27:30
If you will write here flex basis and let's say if you have defined the flex basis as 25% Then
what will happen, by default all will get the width of 25% They should come in two lines
but here they are not coming in two lines Because we have not defined their wrap We will
come inside flex row and we will define wrap row We know, flex row is a property which
is a combination of flex wrap and flex direction We did flex wrap, but now also it s coming
in this way Because we had defined gap here which I will remove now

28:00
Now you can see, each these elements have taken 25% width If 25% width is not coming
for you May be you have not defined, border box in box sizing If I will remove that from
here then you can see that these elements are coming in three lines again Why this is
happening because the border of these boxes are 2 pixel right? All elements have border
of 2 pixels which is also getting counted here and so that the fourth element is not getting
place to come here right?

28:30
If you want that border to calculate within our total width Then you have to make the
box sizing as border box Your 4 elements will show in this way You can understand the
significance of the box sizing, right? Now the width is 25% of all elements Flex basis had
set the width here If you want to set the height for that, you know, what we have to do Here
you have to define column instead of row

29:00
If we make it column, the main axis will change for the flex basis Now It will set the height
I have set the height of 25% First these elements will come here then these elements will
come here This was flex basis, next property is flex Flex is a shorthand property for flex
grow, flex shrink and flex basis If you want to define these three properties altogether for
any flex children, you can define flex You don't have to write these three separately

12 / 13
29:30
But again you don't have to memorize that, you can write flex grow, flex shrink and flex
basis But some advance developers are there, who write flex directly Then we will define
grow, shrink and basis For example, I will do one thing that, first I will make it row I want
that in box 3 It will not grow, shrink and It's initial width should be 200 pixel In this way,
I will write flex directly and the first property is flex grow, second is flex shrink and third
is flex basis

30:00
So these properties should come within our element which is box 3 But I have defined the
basis of others as 25% which I will remove Here you can see that all other boxes have taken
the width of 80% But our box 3 has taken the width of 200 pixel Other than this it will not
shrink but other elements will shrink If we remove wrap from here

30:30
you will see that other elements are shrinking but box 3 will say I will not shrink a bit
Because my flex shrink you have defines as zero So you can see that it is not at all shrinking
Other elements are shrinking but the width of box 3 is still set Why? because you have
defined the shrink as zero The by default value of shrink is 1 If you will make it's value 1,
then it will shrink like others And if you will make it 2, then it will shrink than others in
double speed

31:00
I think you have understood flex shrink again After that we will talk about align self If you
want any children to align itself around the cross axis It will separately align itself on it's
own Then for that you can define align self So for that we will write align self of let's say
we can define flex start So what will happen by that, only box 3 will go up here So if you
have to align any children top or bottom with flex start, flex end, center or stretch

31:30
Then you can define align self to any particular element And after that It will align on it's
own, like here If I mention strech, then particular box 3 will strech Other elements will not
stretch here So with that, we have seen all the properties of Flex child and parent And now
with the help of these flex properties, we will make some layout in my next video

13 / 13