Things to know in this tutorial that means what we will be learning in this tutorial.
We will be learning about flexbox direction,
flexbox direction Row, flexbox direction column and flexbox direction reverse column.
Now the goals or objectives of this tutorial are - complete knowledge on flex direction
property, knowing the parameters of it and working with proper examples.
Now the technology that has been used here is..
Nothing impossible; a simple text editor such as a
notepad to edit your page and style.
And the second thing is the obvious one - latest or
updated browsers.
We will be needing that for Cross browsing experience.
Now what is this cross Browser platform experience?
That means display of webpage across various browsing
platforms.
Every flexbox elements shows a tendency of circulating around the main axis.
Now we can see that there are two axis; the first one is the main axis and the second
one is the cross axis.
In case of flex-direction row, this main axis Alliance
into the horizontal position, that means in the X- direction, and the cross Axis aligns
into the vertical position that means in to the y axis direction.
And all those elements those practical tend into as I have told you
earlier that they tend to align themselves across the main axis, that is why in case
of Flex direction row, all the flexbox elements
those will be taking up a horizontal alignment.
But in case of flex-direction column, the cross Axis will be taking up the
horizontal x axis direction and the main access will be taking up the vertical y axis
direction, and the flexbox element inside - those will be taking up a vertical alignment.
So this is the thing that we are going to experience into a practical demonstration
of this tutorial.
So stay tuned..
[Music..]
Hello and welcome to another new episode of learning simplified.
In this final episode we are going to learn about the flexbox direction,
that means a flexbox direction Row or column are these sort of things and that is
why we have created previously some block elements here.
This is the first block element and above all, there is a mother-wrapper;
this green box this is practically the mother-wrapper and inside there are two child
divs; the first one is this violet box and the second one is this yellowish box.
Inside the second child div we have created 2 more
additional child divs - first one is the blue box and the second one is this brown
colored box.
All of those things those will be lying side by side, but this one, these two
boxes those will be hanging vertically aligned and they will be equally spaced from
Each other.
And this is the objective of this tutorial.
This is the mother container and inside we have created to child divs; the left block
and the right block.
And the right block in turn is subdivided into right block upper
and right block lower.
And insert those block elements we have created some paragraphs.
One thing we must clarify that whenever we are trying to make some experiments on some
web contents, some web display, then always try to pour some content inside.
Do not just create some kind of blocks like a fixed width
or height and then place It Inside; they won't work well.
So that is why it is always an obvious thing, always try to pour some
contents inside and that will be the best way to judge the display of your web page
and you will know the nature of how will your
block elements look like after pouring some contents inside.
In this stylesheet.CSS we have created this corresponding css styling, such as this Max
width.
I have created this Max-width of the mother-wrapper - that is why it is wrapping
a 1300px wrapper here; it is having a max width of 1300px and another thing, whenever
you are pouring some padding in 2 a particular div or into a particular block element,
we always used this box-sizing.
Else you have to manually calculate how much additional
space you have to make up after you have provided such a padding thing into your block
element.
Now this is the left block, it has followed these certain properties, and this
is the right block; the border- this is the thing that I have provided to discriminate
between the left box and the right box.
So this is the main thing that I have created so far.
Now inside this mother container this is being the parent div.
Now we are producing display flex option.
And I am providing a flex size here which is one in case of left
block and a flex of 1 in case of right box.
Press control + s, get back to our project and reload, now we can see that inside the
mother-container we are now producing two floating block elements.
Inside this right box we have created 2 additional child divs
that makes in turn this right box as a parent element of these child boxes inside.
So that is why we are getting back to right block and inside this right box first of all
let's place a display flex.
We have enabled or display flex option that means both these
boxes inside both this child block elements, they will be taking a horizontal alignment.
But our intention is to place them into a vertical one.
So that is why right under this condition that enables the flex direction
in this particular case.
So I am placing this flex-direction.
But wait a second.
What are we doing?
We want this to appear into our parent div, not inside the child div.
So that is why we need to press Control + x, and
we will be placing It Inside this parent div right block.
Get back to your project and reload and now you can see that both of them
are vertically stacked over each other.
But you have placed display flex option.
Still it is appearing as a vertical alignment.
This is because, all the contents that means both
of these child divs, they are being accelerated through the main axis.
Now as the main axis has now aligned itself into a
vertical position and that is why despite of the fact that you are placing a display
flex still you can see there is a vertical alignment.
Now we have placed the flex-direction column, if we now place column-reverse, what will
be the result?
Reload and you can see that the bottom box, the bottom child element it
is now practically stacking up and the blue box is stacking down itself.
So that means if we place column-reverse, everything, every
element inside every flexbox elements those will be reversed in direction.
Now instead of placing column reverse we are now placing
column, reload, press F12; we can see that this is practically the right box upper, and
this is the right box lower.
Now we are placing row.Now press CTRL + S, get back to your project and reload and you
can see that the same orientation that we have observed in our previous case when We
had provided none of these flex-direction property
here, we can see that the same display event is been occurred here.
Now instead of Flex row if we place row-reverse, observe it closely that the blue box is
appearing at the left hand the brown box is appearing at the right and now if we reload
we can see that the reverse thing is happening; the blue box, here goes the blue box,
the blue box is now in the extreme right position and the brown box is in the left
position.
That means if we use this row reverse condition, we can change the order of div
elements of the child elements those are practically appearing inside a particular parent
div element.
This is the default value that we can observe.
That is why all of these things these are coming side by side.
Now instead of that, no need to use that particular flex direction here; flex basis of 45% that
means right block upper and the right block lower, both of them will be having a flax
basis of 45 percent.
Reload.
A total of 90% is occupied.
At the parent div we are now providing justify content; now if we make here
flex-end, press control+s, get back to your project and reload and you can see that these
things are now practically shifted towards the end position of the div.
And instead of flex-end if we now use center; we know this
drill - still it is a recap and now if we use
both of them - align items; and we are making it center.
We can see that the align item is now in the central position which means
both the blocks are now aligned into the central position.
That is how in case of flexbox elements if we want a content to get
vertically and horizontally align into the middle position, then all we need to do we
need to place a justify-content center and align items into center and in this way we
are going to make every contents entering into
the middle position of a particular parent div
or of a particular div element.
Now instead of this, first of all we are just commenting out and instead of flex
direction row we are using it column.
Press control + s, get back to your project and
reload and now you can see that they are practically in the main mother-wrapper, inside
who is there are two child elements, the first one is this violet box and the second one
is this a yellowish one and the right block that means this yellow box it is now further
subdivided into 2 more blocks; the blue box and the brown box and we are treating this
time this right block as a parent div insert the main parent div of mother container and
we are for the providing this display flex option but despite of providing this display
flex option there, we can still see that all of them are practically vertically stacked
one over another; the flex direction is provided which is set to column; despite of the
fact that you have provided are flex-basis here of 45%, still full hundred percent width
of this block element, this right block element is being used over here.
From the next tutorial we are going to start a new fresh tutorial of JavaScript.
If you guys have liked this tutorial then do not
hesitate to hit the red subscribe button.
Hope to see you guys in or next tutorial.
Till then, bye.
Không có nhận xét nào:
Đăng nhận xét