5 Flexbox methods you should be aware of

Flexbox is a CSS standard optimized for user interface design. Using the various properties of Flexbox, we can build our page from small blocks, which then we can easily move and resize as we like. Responsive websites and applications are in great demand in the current web industry.



In this article I want to show you five flexbox methods for solving layout problems during layout. I will also give practical examples for demonstrations in which these methods are applied.

1. Creating columns with the same height

At first, this may not seem like a difficult task, but making columns that have the same height can sometimes be very “hemorrhoid”. In this case, min-height will not be practical to use, since with an increase in the amount of content in the block, its length will also increase.

')

Flexbox does not see this as a problem. All we need is to initialize the flexible model. Be sure to ensure that flex-direction and align-items are “default” values.

<div class="container"> <div></div> <div></div> <div></div> </div> 

 .container{ display: flex; flex-direction: row; /*     */ align-items: stretch; /*       */ } 

Example

2. Reorder

Some time ago, if I had to dynamically change the order of some elements, I probably would have tried some CSS hacks, but then would have thrown this idea and in frustration would have done it with javascript. With flexbox, this task comes down to the application of just one CSS property.



This property is called order . It allows me to change any number of flex elements and change their sequence in which they appear on the screen. This parameter is an integer that identifies the position of the element — lower numbers mean higher priority.

 <div class="container"> <div class="blue">...</div> <div class="red">...</div> <div class="green">...</div> </div> 

 .conteiner{ display: flex; } /*  */ .blue{ order: 3; } .red{ order: 2; } .green{ order: 1; } 

3. Horizontal and vertical centering.

Vertical centering in CSS is one of those problems that lead us to ask ourselves: How is such a trivial thing so difficult to do? And this is actually the case. If you look at vertical CSS centering in Google, then a search results in an infinite number of different methods, most of which will include tables and transformations. which are intended for the manufacture of the layout.



Flexbox offers a simpler solution to this problem. Each flexible layout has two directions on the axis (X, Y) and two separate properties for their alignment. We can position any element right in the middle of the parent container.

 <div class="container"> <div>...</div> </div> 

 .container{ display: flex; /*   */ justify-content: center; /*   */ align-items: center; } 

Example

4. Creating a fully responsive mesh (Responsive Grids)

Most developers rely on ready-made CSS frameworks for creating responsive websites. Bootstrap is the most popular, but there are hundreds of other frameworks that can help you with this task. As a rule, they work well and have many options, but tend to be quite heavy. If you want to do everything with your own hands and you do not need bulky framewalls, then the Flexbox is for you!



The flexbox grid line is a simple container with display: block ;. Inside the horizontal column there can be any number of elements, the size of which is set using Flex . The flexible model adapts to the size of the browser window, so this layout should look great on all devices. However, if all the same there is not enough space on the screen horizontally, then we will be able to solve this problem with the help of a media query.

 <div class="container"> <!--    25%   --> <div class="col-1">...</div> <!--    50%   --> <div class="col-2">...</div> <!--    25%   --> <div class="col-1">...</div> </div> 

 .container{ display: flex; } .col-1{ flex: 1; } .col-2{ flex: 2; } @media (max-width: 800px){ .container{ flex-direction: column; } } 

5. Making the perfect sticky footer (sticky footer)

Flexbox has a simple solution to this problem. Display: flex; The body tag allows you to build our entire page layout, based on Flex properties. Yes, what I say, yes I say? Let's take a better look at the practice.

 <body> <div class="main">...</div> <!--    --> <footer>...</footer> </body> 

 html{ height: 100%; } body{ display: flex; flex-direction: column; height: 100%; } .main{ /*        */ flex: 1 0 auto; } footer{ /*      ,        */ flex: 0 0 auto; } 

Conclusion

All browsers ( except IE 9 ) now support Flexbox mode. If you have not used Flexbox before this point, I recommend you to try.



I hope that my CSS tips were helpful to you and that they will help you create better and more adaptive layouts.



Waiting for your comments on this.