Discover CSS Fundamentals 1

Recently creating a simple page with a flex box layout, I missed some basic concepts of CSS and it goes wrong at the first place.

To get my head around this and learn CSS from the ground, I created some experimental codepens to learn CSS by doing.

I share these here, because I hope it is also useful for you and encourage to make some experiments on your on. In the end there is no magic with CSS, it is based on fundamentals, you should remember during styling.

All tag's fell in one of the two categories inline or block, nothing more. So if you know how these two are handled during layout, you are almost done.

So let's begin with the most simple element, the span.

An inline element like span takes only the space it needs in both directions and is never put on a new line.

A block element like div is always put onto a new line and takes all space horizontally and needed space vertically.

When we nest divs this does not change. The outer div only occupies as much space vertically he needs to layout its children, not more.

You can see the green border becomes bigger for the nested divs sharing a border.

So lets see what happens, when we create a simple flex box layout, centering the children.

It works as expected, the divs are centered horizontally.

No let's try the opposite direction, column mode.

What I want to get is both divs centered in the page, but I get no centering at all.

But why is that, there is enough room to center them?

There are centered, centered in the surrounded container.

And the container only takes the space he needed to layout the divs inside, nothing more. So there are in perfect center.

So to see a centering, we have to give the container more space vertically.

And if we want them in the center of the browser window, we can use the viewport unit, means set the height to 100% of the viewport height, with height: 100vh;.

I hope this helps one or the other coder outside.
Regards.