So this is our theory project which will guide us through this module. As you can see,
it's basically quite a simple project,
we have our div right here, the div with the class flex container,
that's what I just showed you on the slide,
this is basically this wrapping element and inside this container, we have six different divs. Each div has
an own class, so from item 1 to item 6,
so we basically have six so-called flex items in the end and each item has different content.
This is simply a div,
this has a width of 250 pixels, as you can see, I'm using box sizing border box so we have 250 pixels right
here as the entire width of the element
and then we have an item with a height of 250 pixels.
Then we have an item with a width and a height of 300 pixels and we have two items with an equal width of
350 pixels.
You will see throughout this module why this information is important,
therefore I added it right here. If we have a look at our code, you can of course find the same code
right here in the index.html
file and we have a CSS file which has some basic styling applied.
As I said, we have border box for example,
we have some background color for the HTML
and for the body elements and then we have the flex container and our different flex items.
Now the great thing is for the moment that the first part of this module will solely focus onto this
flex container right here because that's as you saw, the first core concept of flexbox, we will create
a so-called flex container and then apply different properties to it.
Now the code to this can of course be found attached to this video,
so make sure to use this code to get started right now with our flexbox project.
So what does it take now to create such a flex container?
Well as you also saw on the slide, we simply have to add our display property,
once again, this one right here and now we will simply write display flex, like that. If we now save that
and go back to our page and not reload it
but now have a look at the default behavior we have,
so this is the normal behavior see for block level elements, as you can see, we can change the size or
the width and it will decrease the width until it hits the defined width right here
and that's actually everything we know so far,
so no surprises right here.
If we now reload the page, we can see a lot of interesting things.
The first thing and the most obvious one is that our elements are now displayed in one row,
so not according to the typical block level element behavior that we saw so far
and we also see that the elements, except for the third one, use the entire height available in the parent
element.
The height is then actually defined by this third element right here, as you can see with the 300 pixels height
and all the other elements follow this value because we didn't define a height for the rest except for
this third item right here,
so this only has a height of 250 pixels.
Another thing we see is that if we decrease the width right here, we can see that the width of the elements
decreases, as you can see, up to here, up to the point where the content,
this one right here or that one needs the space inside the element.
If we increase the width, we can see that the parent element increases and basically behaves like a normal
block level element.
So that's the first thing we did
and very important,
with applying display flex,
we also turned our flex container class right here into such.
So this is now a flex container
and all the items inside this container, so the six items are now flex items.
This automatically happened just because we added display flex to the parent.
Now let's go back and let's see if we have another value because we do, we also have inline flex,
this one right here, not inline block but inline flex.
If we apply that and reload the page, you can immediately see what happens right now
because in contrast to the display flex declaration, we now basically cannot change the size of
our elements because the size is now simply predefined by the actual width that was defined and also
the parent element doesn't change its size anymore,
it just uses the space that is required to display all the content,
so basically, it behaves like an inline element. What is still interesting though is that the height, this
one right here, is still used according to the definition of the fourth item right here.
We'll dive deeper into the reasons for that later throughout this module
but the important thing to keep in mind for now is that we basically can apply display flex or display
inline flex to our parent element,
this will then become the flex container and the elements inside this flex container will become the
flex items.
However, let's change back the value to flex for now because we will probably use that throughout this module.
So if we reload now, we can see that the block level behavior is back again and in the next lecture, we'll
now have a look at two additional properties because by applying display flex or display
inline flex, we automatically apply these two additional properties.