-: Let's now define what exactly Flexbox is
and when and why we need it,
and also talk about some important terminology
around Flexbox.
And finally also get an overview
of all the properties that are part
of the Flexbox specification.
So a one line definition of Flexbox is
that it is a set of related CSS properties
that we can use to build one dimensional layouts.
Now, when Flex Box was developed a couple of years ago,
the main idea behind it
was to basically allow browsers
to automatically divide empty space
inside some container element, by its child elements.
And by doing that, the browser takes away a lot of work
that previously the web developers had to do
so by defining manually with
and stuff like that.
So a bit like we did in our last coding challenge.
So with Flex Box, all of that would happen automatically.
Now, Flex Box also makes it extremely easy
to automatically align items to one another
inside a certain parent container.
And that is true both horizontally and vertically.
And in fact, we already saw that working a little bit
in the previous lecture, right?
And so with this Flexbox solves a couple
of very common problems in CSS development
such as vertical centering
and also creating equal height columns.
So these used to be hard problems
before Flex Box came along.
But now with modern css, these are very, very simple
to solve.
And so since you are learning CSS only now
with these modern technologies already in place
you will never know how difficult this used to be.
So consider yourself very lucky by that.
So basically what I just said is that Flex Box is perfect
for replacing the old school floats,
and by that it allows us to write fewer
and also cleaner HTML NCSS codes
which of course is very easy to maintain websites
over the long run and to write less bucks.
Okay, so now that we know what Flex Box is exactly
and what problems it helps us solve,
let's talk a little bit about some important terminology.
And actually there are not many concepts behind
Flexbox that you need to understand
in order to start using it.
But here is what you do need to know.
So first of all, the element
on which we want to use Flexbox
is called the Flex container.
So just as I mentioned in the last lecture as well.
And all we have to do in order to create a flex container
is to set its display property to flex, and that's it.
That's how we get started with Flexbox.
So if we do this, then all the direct children
of that flex container
will become the so-called flex items.
And this is actually important to know and to keep in mind
because we will use different properties
on the flex container and on the flex items.
Now, the direction in which these flex items are laid out
is called the main axis.
Which is represented with this arrow here.
Then the other perpendicular axis is simply
called the cross axis,
and it's important to know about these names
because we can actually change the direction of
the main access,
and so therefore also of the cross axis.
Plus we can align elements along the main axis
and along the cross axis in different ways.
And therefore we always need to know which axis
we are dealing with.
So try to keep these concepts in mind
so that you can fully understand how the different Flexbox
related properties work.
And actually that's what we're gonna talk about next.
So in this slide,
before we actually move to the practice part.
I want to show you an overview of all the CSS properties
that are part of the Flexbox specification,
both for the flex container and for the flex items.
So for the flex container
the most important ones are the gap,
the justify content, and the aligned items properties.
And in fact, we already talked about two of them
in the last lecture, right?
Now, I'm not going to go over all the details here.
Just know that the first value that is in bold
is the default value.
And then the other ones are the possible options
that we can specify.
And then also you have a very short description
of each of the properties.
And so my hope is that you can use this slide
kind of as a cheat sheet
to print out
or to create a print screen image
that you can always have handy
when you are working with Flexbox.
I actually did this in the very beginning
when I started learning Flexbox,
and it was really, really helpful
because it is in fact impossible to know all
of these properties by heart at all times
and also know exactly what they do.
So again, I think it would be a great idea
to print out the slide
and keep it as a cheat sheet
close to your keyboard
or whatever you use on your working space.
But anyway, there are 3 other properties
that we can apply on the flex container element
which are flex direction, flex wrap, and aligned content.
And actually, some of these,
especially number 5 and 6,
are used for pretty advanced Flexbox techniques
that we will not study in this course
because I think they are a bit too confusing for beginners.
So in this course, which is more of a beginner CSS course
my goal is just that you really understand the fundamentals
of Flexbox and are able to use them on your own.
And with these fundamentals,
trust me you can solve 99%
of all the most common scenarios.
But now moving on a bit to properties that we can apply
on the flex items themselves.
One of them is Align auto
which is pretty important
because this can basically override
the aligned items property.
Then we have these other ones, which are flex grow
flex shrink, flex bases, and D 3 together.
So 2, 3, and 4 form the flex property.
So as you can see below number 5 there
Flex is the recommended shorthand
for flex grow, flex shrink and flex bases.
Okay? And again, we will go
over them a little bit later in the section
once we actually can start using them in practice.
Finally, there is also the order property
which we can use to basically change the order
of the flex items visually on the page
without changing their order in the source code.
Okay, but enough talking now, let's now move back to code
and start learning many of these properties 1 by 1.