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.

Creating Flex Boxes

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

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

flex-grow: 1

.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.

Adding Content

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.

Change width

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.

Flexbox website layout

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 

#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

The calculation of min-height was quite simple considering that we applied box-sizing: border-box to all elements. If we did not, then we would need to add the value of padding to the amount to be subtracted.

#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.

Final Thoughts

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/

Theory Without Practice Is Empty

All the best - Dannison Arias