Instructor: 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 then here in the starter files for this section.
So CSS layouts,
grab this flexbox.html
and the css-grid.html
and then copy them
into the folder that you are 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.
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 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 /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 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 we now have enough space.
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 this element 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 like 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 aligned 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 element
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 this property here,
so justify-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 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, all 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.