All language subtitles for 053 A Flexbox Overview.en_US

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 flexbox 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 width and stuff like that.

So a bit like we did in our last coding challenge.

So with flexbox, all of that would happen automatically.

Now flexbox 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 flexbox 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 flexbox

is perfect for replacing the old school floats.

And by that it allows us to write fewer

and also cleaner HTML and CSS code,

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 flexbox 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 axis, 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 going to 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 align-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 three other properties

that we can apply on the flex container element,

which are flex-direction, flex-wrap, and align-content.

And actually some of these, especially number five and six

are used for pretty advanced flexbox techniques

that we will not study in this course,

because I think they're 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 align-items property.

Then we have these other ones which are flex-grow,

flex-shrink, flex-basis, and these three together,

so two, three and four form the flex property.

So as you can see below, number five there,

flex is the recommended shorthand for flex-grow,

flex-shrink and flex-basis.

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, one by one.