Original subtitles

Welcome back.

So I've been mentioning Flexbox many times now,

but now it's finally time to start using it

for the very first time.

Now before I actually explain you what Flexbox actually is

and how exactly it works,

I want to start by actually

using it a little bit in practice

and to learn the very basics of Flexbox,

actually the context of a project like this

is not ideal.

And so we will learn it a little bit in isolation.

So actually you need some files now

from the starter files of this section.

So let's come here,

which remember is this folder

that I downloaded from GitHub

and in here in the starter files for this section.

So CSS layouts,

grab this Flexbox.HTML

and the CSSgrid.HTML,

and then copy them into the folder

that you're currently working in.

And so in my case,

that is here on the desktop, this one.

So let's place them there

and make sure that it really is inside of the folder

that you're currently working in VS Code.

So otherwise everything else I show you will not work.

And now if we go here to our sidebar,

then indeed, here we now have Flexbox.HTML.

And so this is kind of a starter file,

so we can quickly learn just the very basics

of Flexbox in isolation.

Now okay.

So now in order to access them

here in our browser,

let's actually go back to Index.HTML,

which is this page here, right?

And then up here in our navigation,

maybe you remember it

that we actually set some links there.

So this one that says Flexbox and CSS Grid.

And so here I will now actually connect these HTML files.

So right now this link points to nowhere,

but now I actually want it to go to Flexbox.HTML.

And then the same thing here for CSS Grid.

All right.

And so now if we come here to our page

and click on Flexbox,

it will go to that Flexbox.HTML file

that we specified.

So it is still at this URL here

and then slash Flexbox.HTML.

All right.

And so that is, again, this file right here.

So here I have some starter code.

So basically this container element,

which contains these eight elements in there.

And so all of them have a different background color

as I defined up here.

All right.

And so now let's come here

to this element called container

and let's start using Flexbox.

And it's actually very simple.

So all we have to do in order to get started

with Flexbox is to use the display property

and set it to flex on some container element.

And with container element,

I simply mean any element

that has a couple of child elements.

So just like this one.

But of course, it could have any other class name here.

So we already knew the display property,

but now we got a new value.

And so again, the one that we want

is to set it to Flex.

So give it a save

and let's see what happens.

And immediately it looks different, right?

So all these elements are now immediately side-by-side

without having to use any floats

or anything like that.

And these elements here, we call them the flex items

because they are the child element of the flex container.

So again, this element here is the flex container

and these eight child elements are the flex items.

All right.

Now here, each of these elements occupies

exactly the space that it needs for its content.

And so you'll see that actually,

we don't have enough space here,

so let's give us actually some more space.

So something like this

or maybe to make it easier

we could just make the text a little bit smaller.

And so now you can see that each

of the flex items needs a lot less space.

And by the way, this gray space that you see here

after the last flex item

is simply the background color

of the rest of the empty container.

So that's this color here.

All right.

So let's see if now have enough space.

And yeah, that looks nice.

Can increase that a little bit more again,

even 34 and yeah.

So now we're good to go.

Now again, horizontally, each of these elements

takes up exactly the space

that is necessary for its text content.

However, vertically, things are a bit different.

So vertically by default,

all the flex items are as tall as the tallest element,

which in this case has 150 pixels

because we set this third one,

so the green element with the height

of 150 pixel,

and if we change this line to 250,

then you would see

that all of them grow taller.

And if this wasn't present here at all,

then in the end,

all of them would simply also

have the height to occupy only the space

that's necessary for the content.

But let's actually put this back

because this can be helpful

to demonstrate a couple of different things.

So in order to demonstrate

just how powerful Flexbox can be,

let me show you one of its most useful applications,

which is vertical centering.

So to basically center all these items vertically,

all we have to do is to say align-items

and then simply center.

And let's see what happens.

And indeed they are now vertically aligned

just as expected.

So the flex container still takes the height

of the highest element,

which is still this one of 150 pixels,

but now all the other ones

simply take the space that they need

for the text or in general for the content.

And then they get vertically aligned in the center.

Let's try another one here.

So to put them at the very start,

we use flex-start like this,

and to put them at the bottom we use flex-end.

All right.

And by default, the value of align-items is stretch.

And so now we will see exactly the result

that we had at the beginning.

So stretch essentially means

that all the elements will automatically stretch

as tall as the tallest element.

All right.

But let's actually put it back to center

because this is one

of the most important applications of Flexbox.

Just imagine how hard it would be

to do this without Flexbox.

So we would have to manually select

all of these elements except for the green one

and then kind of try to guess some margin at the top

so that they then looked aligned in the center.

But here it all happens automatically.

And of course. we can also center them horizontally.

So basically center all of these items

inside of the flex container.

So we do that with justify-content

and set it to center.

And you see that now the space here

is the same on this side

and on this side.

And so that means that they are now centered

inside of the container.

But actually there is property here.

So justified-content that is part

of the Flexbox specification,

gives us a couple of other really helpful

and nice options here.

So for example, we can also say

space-between and watch what happens then.

So you see that basically the remaining space

is now distributed evenly between

all of these elements.

So basically they will have now this space,

which is the same between all of them.

So you see here and here and here,

and it's really all the same

in all the places now, right?

And we will actually go a lot deeper

into all of these properties

and there are of course a lot more,

but for now, I just wanted to give you a very quick overview

of how we can get started using Flexbox.

So maybe and hopefully you start seeing

how powerful this is.

And so now that we know the basics,

let's get a high level overview

of all the properties

that are part of the Flexbox specification

in the next lecture.