Flexbox in CSS & HTML (Tutorial) - develop responsive layouts

This is what you can expect in the Flexbox in CSS and HTML course.

What is flexbox layout and why should you use it at all?

This is where the project is set up in which work will then continue.

Here I present the example structure and the debugging options integrated in VS Code with the MS Edge tools. In addition, the flexbox layout is activated for the first time in this video and the direction is set.

How can the space be divided evenly or in certain proportions in the flexbox layout?

A little exercise that requires a little (simple) math.

Here I present a horizontal layout with two sidebars that adapts responsively to the width.

Child elements can be aligned by the flex container along the transverse axis. Here I show how this can be set.

The alignment of all child elements can be adjusted not only for the container, but also for the individual elements using align-self.

A small exercise for individual alignment with a cube.

Not only can you align along the transverse axis in a flex container, you can also adjust the alignment along the main axis ;-)

A small example of how aligning along the main axis can be used very well for a frequent layout.

If you want to be flexible, you also need to be able to specify the size of the child elements regardless of the specific width or height. Fortunately, there is the flex-basis property, with which you can achieve exactly this. If you change the flex-direction, a width becomes a height and vice versa.

How much should an element grow if there is more space available than the flex-base specifies? This can be specifically set with flex-grow.

How much should an element shrink if there is less space than the flex-basis specifies? This can be specifically set with flex-shrink.

Child elements can not only shrink if there is less space, but can also be wrapped by the container. I show you how to control this with flex-wrap in this video.

flex-direction and flex-wrap can be combined in the flex-flow property. This even makes sense if you only want to set flex-direction, as flex-flow is shorter ;-)

A task for flex-wrap.

Spacing is sometimes necessary to avoid making it unnecessarily uncomfortable for the human eye. Fortunately, gap is a CSS property that does exactly this for the child elements of a flex container.

Order is a must, especially for web interfaces, because they should be easy to use. The order sometimes also needs to be defined individually without moving elements in the DOM. The CSS property order is very well suited for this, as it allows you to easily change the visible order of the elements.

Let's test whether you have understood the sequence. There's even a second way to achieve the same result, but you'll surely figure it out too.

It happens very often that you want to center elements and especially text horizontally and vertically (!). What was a cramp before Flexbox is a child's birthday party with Flexbox.

Who doesn't know the 3-splitter? If it adapts to the available space, there's not much left to responsive design.

Are there websites without forms? If so, there are not many. That's why it's very important to arrange them in an appealing way, which fortunately is no problem with Flexbox.

Very often you have to deal with nested layouts, but with Flex-Layout even these are no longer a big challenge.

Nowadays, web chat clients are a dime a dozen, and AI chatbots have been added to the list. But how can you implement a chat with Flexbox? I'll show you in this video.

Since Web 2.0 at the latest, you can find a gallery on almost every website. In this video, I describe how such a layout can be wonderfully implemented with Flexbox, for example.

Now everything should be clear as far as the Flex layout is concerned. Finally, I'll describe what you should have learned, what else you can do and what other beautiful CSS layout options are available.