Up next in 10
CSS Flexbox | CSS Course for Beginners
3K views
Oct 24, 2024
CSS Course for Beginners: CSS Flexbox In this video, learn about CSS Flexbox, display flex, align items, flex direction, align content, justify content, and more. More on flexbox: https://www.tutorialspoint.com/flexbox/index.htm Get Certification in Web Development: https://www.tutorialspoint.com/certification/web-developer-guide-for-2022/index.asp Use coupon ""YOUTUBE12"" to get “FLAT 12%’’ OFF at Checkout. Quality Learning to UPSKILL yourself only at TutorialsPoint. Timestamps: 00:00 Introduction 00:12 display flex 02:01 flex direction 02:50 justify content 03:23 align items 05:43 flex wrap 06:46 align content 07:29 gap property 08:15 flex grow 09:26 align self
View Video Transcript
0:00
Hello and welcome to tutorial's point. My name is Fazz and we are continuing our CSS series
0:05
And in this video, we are going to learn about CSS Flexbox from complete scratch
0:09
So without wasting time, let's get started. So I've already written some HTML code here. We have this parent div as you can see with the class of parent
0:16
And then we have three days or three children inside it. As you can see here in the web browser as well
0:22
If we go to style.cassus, I have already written some pre-styling as you can see
0:26
Now, don't need to focus on it. The main thing is that we are going to learn about flexing. Xbox. Now by default, if we right click here and go to inspect, we go to Chrome developer tools
0:36
What we see is for all these boxes, be it the parent box, all these children, Dave boxes, as you can see by default, they have a display of block
0:44
That is why they are on top of each other. Right. Now, what am I going to do is I'm going to give them a property. I'll write display flex. The first thing we've done is display flex
0:55
and once I save this, as you can see, their position changes
1:01
Now here, once I use the display flex property, basically what happens is this parent container is called as the flex container now
1:09
and the items inside it or we can say these do Box 1 box 2 and box 3 these items inside this flex container are called as flex items let me just quickly show you basically what happens when we
1:21
use display flex so i have i have the screenshot here so that i can show you once we apply the
1:26
property of display flex basically what happens is that this whole container becomes the flex container
1:32
and basically two invisible axes are created first is this axis it is in the horizontal direction
1:38
and this one is called as main axis. And second is the vertical axis
1:44
that goes from something like this and this one is called the cross axis
1:49
Now basically display flex, what it does is it basically positions these flex items along the main axis
1:56
that is in the horizontal direction. So let's go back to browser. Now next up is the flex direction property
2:03
So here the flex direction I'll write row. Now if I save it, nothing will happen
2:07
because by default the flex direction is always row. That means our elements are positioned along the row
2:13
All right. So the main axis is horizontal and the cross axis is vertical
2:18
But if I change this flex direction property to column and save it
2:22
as you can see our elements or our child adives are basically displayed in vertical direction Why is that Because this time the main axis which was horizontal is now vertical
2:35
Alright, so I'll repeat the main axis becomes vertical and the cross axis becomes horizontal
2:40
when we use the flex direction column property here. So I will just remove this and save it
2:47
As you can see, we are back to original. Now the next important property that we are going to talk about
2:52
is the justify content. So I am going to write justify content and this is one of the important properties of Flexbox. Why
2:59
Now if I write this justify content to center and I save it, as you can see, our children or basically our children dives are centered
3:07
And they are basically centered horizontally to be specific. Why is that? Because the justify content property controls the alignment of items on the main axis
3:16
And remember main axis is the one that is the horizontal in direction. Right
3:21
So this is justify content. Another similar property is align items. Okay, so align items and I can set it to center as well
3:28
Now, if I save it, as you can see, our children devs are now centered vertically as well
3:34
So basically the align items property controls alignment of items on the cross or the vertical axis Now if I set to center as you can see our elements are centered horizontally as well as vertically So this also solves a very big question usually asked by developers all the time
3:51
That is how to center a dev. And this is how you center a div as well. Just apply the flex box and then you just use the justify content center
3:58
and align item center. Now here note, we cannot just give it one option
4:03
or basically one value of center or center for this justify content or even align items
4:07
For example, the justify content, which will basically control our layout or our items layout for the horizontal direction
4:14
It cannot be only center. If you can see there are multiple options here, as you can see, it has multiple options
4:20
something like center and and many other flex and flex start that we will talk about shortly
4:26
For example, if I select right and save it, as you can see, our items are aligned to the right
4:30
of the container, right, horizontally. Similarly, for this one, there can be many things
4:35
If we write align items, as you can see, it says end. select the end option and save it as you can see our items are at the end of this container
4:44
vertically so that's how it works now what i am going to do is i'm going to remove these two
4:49
properties and let's just focus on the fundamental once again what if i set the flex direction
4:55
to column what will happen is the main axis will go
#Computers & Electronics
#Web Design & Development