Hello everyone and welcome back to our bootstrap course and this lecture we're going to be exploring
how to build a layout using Bootstrap FLEX FLEX is from flex box and it allows you to create layouts
that are easily responsive and put things into nice grid formatting using flex.
So let's go ahead and delete all the code we have from the previous lecture where we learned different
display properties because we don't need that for this lecture.
So just go ahead and feel free to take everything from a body and we have it all saved for you in the
source code file so you can delete it for our practice purposes.
Okay great.
So now we have an empty body here.
Let's go ahead and start demonstrating how we can build Web site layouts using flex.
The best way to understand this is to see it in action.
So how are we to do it.
Start by building a div.
And I'm going to give it the class D flex and this will give it that display value of flex.
And then we're going to make a flex row which means that it's going to take this div and make it into
a row of items and everything inside of the div will be treated as a column within the row.
We can also add some background color to this div or we can give colors to each of the individual elements.
It's up to you.
Okay great.
And let's go ahead and close off this div right here.
So now we have a row and every element we put inside will be treated as a column.
So if we scroll out right now we won't see thing in the output because we have nothing inside.
So let's put some elements inside and make a divide and put in a nother div inside of this flex row
give we can give us a color using BJP primary which is a bootstrap class.
And this will make a blue color as the background of this div and we can also close off that tag with
a closing div tag.
And of course we can add more bootstrap classes as needed.
But for now let's just put in some text like item 1.
So this creates a block on the screen and you can see the text is a bit too much to the corners.
So let's go ahead and add a padding with the bootstrap class P2 which will put some padding immediately
onto that item and we can also change the text color to text white just like that as well.
OK great.
So now we have an item.
Let's go ahead and see how this is a column by adding another column.
So whenever we add another div into our row div we're making another column even though we didn't say
that it was a column specifically flex will treat it as a column.
So let's go ahead open up another div.
This is going to be of class we have to add another culture it's we can use g dark which will make a
dark color that way we can differentiate it without even needing to see borders we can differentiate
each block each item with a different color.
OK.
We're going to give it background dark and we're gonna put it in here.
Item two as you can see here we have another item right there who's going to add padding to it and then
text white as well.
OK.
Great.
So now we have two items and as you can see there are created side by side.
If I stretch it out if I switched in there's still side by side as columns.
OK.
So I'm going to add in one more.
So you can see div class.
Swans can have the big primary again back recall primary so as the padding of and the text white to
close offered div and put in item three OK and that creates a third item.
And similarly to making a row you can also make a column.
So if I go ahead and change this from flex row to flex column you'll notice they'll all jump into their
own rows instead.
Why.
Well because the container div is no longer a row it's now a column which means that everything inside
of it will now be treated as a row.
OK great.
So now you know how to make a flex row and a flex column on top of this.
There are more properties that you can add.
So let's go ahead and look at that.
Let's put them back into a row and what we can do is justify where the items are placed.
So right now they're all placed side by side with no space in between as the default.
But we can add what's known as he justified content property to add spacing between them in different
ways.
So let's go ahead and test this out first.
Let's go ahead and add the justify content start so by adding this class nothing has changed right now
because this is the default.
So they're all justified to the start of our div here.
As you can see.
OK.
The other one you can do is justify end.
So you might see now if I stretch out the screen they'll be stuck to the end of the screen instead of
to the start with justified start.
And if I completely remove justified content start this is the default which is start OK.
Let's put back start and let's put back end and right now this is on a row which is why you're being
stuck to the right side.
But if they were a column then it would be stuck to the bottom.
So it's always going to be the cross axis here.
If it's a row then it's going to be to the y axis.
Whereas if it's a column it's going to be to the x axis improve this by making this a flex column.
And now you can see we're just fine a content end.
But in order to see this be stuck to the bottom of the div or the end of the div we would have to give
a height to the div so we can go ahead and do that as well.
You can immediately place the height can do it with either customs CSX just for testing purposes by
setting the height like this or we can set it with bootstrap height as well.
OK.
So as you can see now they are being put to this portion we can change this to start and now they'll
be moved down like that.
OK.
Great.
So let's put this back to justify and and let's just delete the height for now and let's look at some
more properties of justified content.
So we have that right now justify content end and they're in a row.
We can also put justified content center and this will always keep the items in the center of the screen
as you can see.
Another one is around which will have this effect where it places them evenly on the screen so evenly
spaced with also even margins on either side.
The final justified content value you can use is between.
This is similar to justify content around but now you can see that there is a smaller margin on the
right and left hand sides of all of them.
And instead there is a larger margin in between all the items.
So depending on how you want your website to be laid out you will choose one of these justified content
values for your containing div.
OK.
So that was justified content and it's important to remember that it works on the cross axis.
The next one is on line items and let's go ahead and try that out.
It's going to be a line items is the property name and you can set again one of five values which are
going to be start and center baseline and stretch.
So let's test them all out first.
We'll begin with a line item start and you'll notice we won't see any difference from when we didn't
have any align items.
It's all going to be the same.
And that's because on line items works on the cross axis again so we have to we have to set the height
of the div here in order to do that.
You can use.
Style equals height one hundred pixels and now we're going to see this in action.
So we're going to go ahead and try.
And and I could see they move down on the page.
And the best way to see this is to give the entire div a background color.
So I'm going to go ahead and do that as well.
I can give it the background color of something like primary or secondary which will be a light gray.
OK I'll give it light gray.
So as you can see now we have this light gray color and that is the coloring on the entire div.
And then each of these items they are now aligned to the end of the div which means they're aligned
to the bottom because this is a row.
So in this case it's going to be on the same axis.
A row is put on the x axis.
And so the items would be aligned to the x axis.
Now if this was a column and we aligned it to the end you'll notice how all the items are aligned to
the end of the y axis because a column is made on the y axis.
Okay.
Let's go back to row first and we can look at all of the different alignments for row and then we can
look at all the alignments for column after.
So we have a line items end right now for Flex row also do center as you can see it centers them on
the x axis of the entire height of this div.
So that's why you will only see this in effect if you have a height on the containing div which we set
to 100 pixels because otherwise the containing div would be the same size as the items itself.
And so there would be nothing to align to because items would only be by themselves by providing a larger
div to put them inside.
Now they can move around.
OK.
We have a line item center.
There is also stretch and in this case they're going to stretch to fill the entire y axis here and then
we can also use baseline.
And this will align them to the base line which be the starting position of this div which in here is
0 0 0 from the top and 0 from the left.
OK.
Let's look at this from a flex column perspective so now we put them into a flex column and this is
what it looks like when you line to the baseline again to the top and to the leftmost corner.
You can also do a line item start which won't change anything because the start is the default and we'll
move them to the end of the y axis baseline.
We really looked at and stretch stretch will fill the column to take up the entire axis that it's on.
So it's going across the entire y axis and for a row was going on the entire x axis.
Okay great.
So as you can see having the ability to align and justify and fill and even space out your items in
different ways it's extremely valuable to use as a developer because if you had an image here and it
looks like this in the small screen then on the large screen it suddenly is aligned to the start.
It's important to know how to use the proper alignment and justifying and or justifying to make sure
that an item will fill the entire screen instead of a portion of the screen when it's on a large screen.
There are many different kinds of things you have to consider when developing such as this including
the size of the items and their alignment and placing on the large screen versus a small screen and
how they are in relation to one another.
So now that you have the ability to align items and justify them using flex I highly recommend that
you try out using all these different alignment and justifying values because you will need to use them
in different ways and choose different ones depending on your Web site's layout.
But as you can see flex is extremely useful for making a layout and before the respects people relied
on tables and CSX.
So you had to do it all yourself with CSX and flex makes it much more convenient and especially with
being in bootstrap you now don't have to put the flex in CSX you can put the flex in bootstrap classes
which makes it much more convenient and efficient to build.
Other than that.
Thank you all for watching and we will see you in the next lecture.