Flexboxes gives web developers control over the location of elements, and their alignment inside the container. This allows you to align the elements vertically and horizontally; change the order of their appearance; set the direction in which all the elements are laid out, and much more.

We will create one flex container and insert three flex elements into it. We’ll also see how you can influence the sizes of elements by adding more content to them and playing with some property values.

Let's start with that.

We have a wide red flex element, followed by a small green and a small blue element.

Here is the relevant code from this example.

.container { 
  display: flex;
}

We include 

display: flex

 to declare the outer element a flex container. This is all you need to start using flexbox. Now all the child elements of this flex container automatically become flex elements and, therefore, are placed taking into the flex layout model.

But you probably noticed that the red element is wider than the other two. This is because we applied 

flex-grow: 1

 to this element . Here is the code we used for this.

.red {
  background: orangered;
  flex-grow: 1;
}

The flex-grow property sets the growth rate of the flex element, which determines how much the element will grow relative to other flex elements (after the distribution of free space).

The initial value of this property is zero, therefore, the growth factor of the other two elements is zero (since we did not use the flex-grow property for these elements). This leads to the fact that the red flex element increases as much as necessary to occupy the available space. Two other elements are compressed until their size matches their content, and no more.

You probably wondered why we simply did not set the width of the red element using the width property ? Yes, we could do it, but in that case, I could not show you the following fragment ...

All I did was add some text to the blue element and it expanded to fit the new content. In fact, there is so much text that the red element has completely shrunk to fit its own content, and nothing more.

That's what I had in mind when I said that the growth coefficient determines how much the element will grow after the distribution of free space. By adding more content to the blue element, we effectively removed the available free space and the red element had nowhere to grow.

The height of the blue flex element has also grown to accommodate new content. And importantly, the other two elements also increased their height accordingly. With flexboxes, all this happens by default, which saves us from having to adjust the height and width so that all the blocks look the same.

So, after I showed you that you need not set the width of the flex elements, let's see what happens if we still set the width.

As expected, the width of the blue element can be set. But as the size of the blue element decreased, the red element grew again, but not so much as to occupy the available free space.

So, now we are beginning to understand why this is called flexible layout. Our flex elements are flexible and they are happy to adapt to what is happening around them.

You can probably imagine how easy it is to take the next step and create a basic template for a website layout. So, let's create it right now.

Flexboxes are ideal for creating widely used website layouts, such as a three-column one, the so-called “Holy Grail” layout, where all columns must be full height, regardless of their contents. In this case, in the source code, the main content goes before the navigation, and on the page itself the main content goes after the navigation.

Before the advent of flexboxes, such a layout was quite difficult to get without using any hacks. Developers often had to do things such as adding extra markup, using negative margins, and other tricks to get everything right, regardless of content size or screen size. But, as the above example shows, on flexboxes everything is much simpler.

Here is a summary of the code. In this example, we make the

#main 

element a flex container, and leave the header and footer as block elements. In other words, only the middle part becomes a flexbox. Here is a snippet that makes it a flex container.

#main {
  display: flex;
  min-height: calc(100vh - 40vh);
}

Just use display: flex to make a flex container. note that the min-height value is set using the calc () function and set

#main

as 100% of the height of the viewport minus the height of the header and footer (20vh each). This ensures that the layout will occupy the entire height of the screen, even if there is not enough content in it. As a result, the footer will never rise and leave no empty space under it if the content is less than the height of the screen.

#main > article {
  flex: 1;
}
#main > nav,
#main > aside {
  flex: 0 0 20vw;
  background: beige;
}
#main > nav {
  order: -1;
}

That's all the code that makes the layout work.

In this example, flexboxes are applied only to the central section where the main content is located. If you want to use flexboxes for the entire page, you can add nested flex containers.

That's it for this guide, I hope this is enough to get you practicing.

If you have any doubts don't forget to check out the documentation.

You should also try the very highly recommended famous flex froggy game
https://flexboxfroggy.com/

All the best - Dannison Arias