Flexbox Guide For Beginners

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 { : flex; } display We include 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. display: flex But you probably noticed that the red element is wider than the other two. This is because we applied to this element . Here is the code we used for this. flex-grow: 1 .red { : orangered; flex-grow: ; } background 1 The property sets flex element, which determines how much the element will grow relative to other flex elements (after the distribution of free space). flex-grow the growth rate of the 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 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. flex-grow Adding Content You probably wondered why we simply did not set the width of the red element using the property ? Yes, we could do it, but in that case, I could not show you the following fragment ... width 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 . By adding more content to the blue element, we effectively removed the available free space and the red element had nowhere to grow. after the distribution of free space 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 set the width. still 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 . Our flex elements are flexible and they are happy to adapt to what is happening around them. flexible layout 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 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 #main { : flex; min-height: calc( vh - vh); } display 100 40 Just use display: flex to make a flex container. note that the value is set using the function and set as of the height of the viewport height of the header and footer ( 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. min-height calc () #main 100% minus the 20vh 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 { : ; } #main > nav, #main > aside { : vw; background: beige; } #main > nav { : ; } flex 1 flex 0 0 20 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