Instructor: So now that we know a little bit more
about Flexbox let's now keep using it in practice.
And in this lecture we will learn a little bit more
about aligning flex items
and also how to create space between them.
And hopefully you printed out that cheat sheet
from the last lecture,
but in any way, let's now get started.
So in our very first lecture about Flexbox
we already talked about these two properties here.
So align items and justify content
which are both properties that apply to the flex container.
And now after the last lecture
we also know that justify content is basically
to align items along the main axis.
And so that's this one here, right?
And so by default that is horizontally, right?
So if we set this to center, for example, then you see
that our items are being horizontally centered, right?
And so again, by default, that is the main axis.
So along this way where I'm moving my mouse right now
then we have align items, which aligns items
along the cross axis, which by default is vertically.
And that's why if we set center
then these elements here are vertically centered.
And for example, if we set it to flex start
then they all move to the top.
And so again, it's all about vertical alignment by default.
Now I mentioned that we could switch the direction
of these axis, but for now let's not get even more confused.
So let's set it here to center,
and here let's actually set it to the default
which is flex start.
So just like this, all right?
So these are two of the most important properties
that apply to the flex container, and another one is gap,
but let's leave that for the end of this lecture.
And now let's keep talking about aligning items,
but now using the aligned self property
which applies to flex items.
So basically using aligned items on the flex container
will make it so that all the flex items
will have the same alignment.
So in this case, all aligned to the center.
However, in many situations we want to override that
for one single element.
And so for that we use the aligned self property.
So let's, for example, select our very first element here.
So that's el--1.
And so here, let's say that we want
this one aligned to the top.
And so we can say align self,
and then here the values are the same,
so flex start, and with that, the element
and only this one moved to the very top.
Let's try another one.
For example, element four, for example,
and let's say align self,
in this one let's say we want to stretch it.
So stretch would be the default if we didn't set it,
let's say globally here on the flex container, right?
And so now this one is also stretched
just like the CSS here.
Well, let's put it on the five
just to add some space between them.
So now it is this one that goes all the way
from top to bottom.
And once again, if we change the height of this one
then of course the height of here the pink one
would be stretched as well to the maximum possible.
But let's put that back.
And yeah, so this is one of the most important
properties that we can use on the flex items.
Let's now just very quickly also talk
about the order property since we're already here anyway.
So changing the order in which flex items are displayed
on the page can be very helpful
when we are adapting a bigger layout
to a small layout for mobile screens.
Now the default value for all elements is always zero.
And so if we want to move an element
to the very first position, all we need is to do,
is to specify a number that is lower than that.
So let's try element number six here, for example.
Missing the six here,
and again, by default the order is zero for all of them.
So you might think that the order is
like one in the first one, then second number two
and three, four, five, six, seven, eight.
But that's not the case.
By default, they're all zero.
And so if we want to move one of them to the first position
we simply need to give them a number that's lower than that
such as minus one.
And so now the languages, which is number six,
as we can see here, now moved to the very front,
here, of the row.
So now it became the very first element.
And the same is true of course
if we want to move an element to the back.
So let's try this one.
And so if we specify a value that is larger than zero,
so larger than all the other ones,
then it'll simply move to the back.
So it will become the last one.
And so this pink one now should become the last
and indeed it is.
And if we then want to make another one the last,
let's say this one,
then we simply need yet another number that is even larger.
So let's say two.
So that is this one.
And so now that one is the last.
Okay, but let's turn that off,
and, yeah, the other ones we can actually
leave them on just for the fun of it.
All right, so that's the fundamentals of aligning.
So here on justify content
there are some more values that you can experiment with.
And again, all of them are on that cheat sheet
that I showed you by the end of the last lecture.
But the most prominent one are center
and I would say space between or space around,
as I showed you in the first flex box lecture of all.
Great, so we know the fundamentals of aligning elements now,
both vertically and horizontally.
And now let's talk a little bit
about adding space between them.
So adding space manually, because we saw already
how we can use Flexbox to automatically create space
between flex items using justified content, right?
But now I'm talking about manually creating space
which is most of the time even more important actually.
So in practice, many times we are in fact interested
in manually defining space between our flex elements.
And so there are two ways currently of doing that.
So the original one was to simply add margins
to the flex items, like this.
So selecting basically all the elements like this,
so that will select all eight of them,
and then let's say we can just add a margin
to the right side of like 40 pixels.
So give it a space, maybe a little less than that.
Okay and well we are still overflowing the container
so actually let's get rid of these last two here
that should help a little bit.
And yeah, that does look a bit better, can also make maybe
the font size here back to being a bit smaller or 32.
And yeah, so with this, we basically created 30 pixels
of space between all of these elements, right?
However, now in order to really get this right,
we would then have to go in and remove the margin right
from the last element, which can be a bit of a pain.
So it's an extra step,
and also it's way nicer to have the definition of a gap
between these elements right here in the container.
So then we have basically all the definitions
of how the flex items look like
right there in the container element.
And again, that is actually a lot nicer.
So maybe that doesn't make sense at this point
but you will see with practice
that it is actually a good practice
or it's actually helpful to have all of this
in the flex container.
And so therefore a new property was added to Flexbox,
which is called Gap.
So we can remove this here
then we are back to the beginning
and then we can very simply add the gap property
and set it to 30 pixels as well.
And there we go.
So we are back to having the same gap basically.
But now it is nicely in the flex container.
And also if we inspect this
we see that none of them has any margins,
and so there's no need to then remove the margin
from the last element there.
All right, and I think that's actually it
for the fundamentals of aligning and creating space
between elements.
And all of this will make more sense of course
once we move from these like abstract boxes here
to some real world example, for example, or project, right?
But for now, we will keep working on this small demo here,
and in the next lecture we will talk about
one of the most important properties
which is the flex property.
So stay tuned for that, and then after that,
we will finally return to our project.