All language subtitles for 054 Spacing and Aligning Flex Items.en_US

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.

All right.

So if we set this to center, for example, then you'll

see that our items are being horizontally centered, right?

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 said 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 it 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 it's 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 align self property,

which applies to flex items.

So basically using align 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

overwrite that for one single element.

And so for that, we use the align self property.

So let's, for example, select our very first element here.

So that's E L dash dash one.

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,

and 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 changed 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, a number two and 3, 4, 5, 6, 7, 8,

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 will 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 it 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 justified 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, our center,

and I would say space between or a space around as I showed

you in the first Flexbox 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, 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 off 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.

It can also make maybe the font size here

back to being a bit smaller or a 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 very 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, our 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.