5 Flexbox Techniques You Should Know About

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

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

1. Creating columns with the same height

At first, this may not seem like a difficult task, but to make columns that have the same height can sometimes be made very "hemorrhoids." min-height in this case will not be practical to use, since as the amount of content in the block increases, its length will also increase.

Flexbox doesn't see this as a problem. All we need to do is initialize a flexible model. Be sure to ensure that flex-direction and align-items are set to "default."

.container{
   display: flex;
   flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/
   align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/
}

Example

2. Reorder

Some time ago, if I had to dynamically reorder some elements, I would probably try some CSS hacks, but then I would give up this venture and in frustration would do it with javascript. With flexbox, this task boils down to applying 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 determines the position of the element - lower numbers mean higher priority.

...
...
...

.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 issues that make us ask ourselves: How is such a trivial thing still so hard to do? And this is actually so. If you look at Google vertical centering of CSS, then the search will pop up 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.

...

.container{
   display: flex;
   /*Центр по главной оси*/
   justify-content: center;
   /*Центр по вспомогательной оси*/
   align-items: center;
}

Example

4. Creating a fully responsive grid (Responsive Grids)

Most developers rely on ready-made CSS frameworks when creating responsive sites. Bootstrap is the most popular, but there are hundreds of other frameworks to help you do this. They usually 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 framework frames, then Flexbox is for you!

A flexbox grid string is a simple container with display: block ;. There can be any number of elements inside a horizontal column, the size of which is set using Flex. The flexible model adapts to the size of the browser window, so this scheme should look great on all devices. Nevertheless, if there is still not enough horizontal screen space, then we can solve this problem using a media query.

...
...
...

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

5. Creating the perfect Sticky Footer

Flexbox has a simple solution to this problem. Display application: flex; to the body tag allows you to build our entire page layout, based on Flex properties. Why am I saying everything, yes I'm saying? Let's take a better look in practice.

...

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, then I recommend that you try it.

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

Waiting for your comments on this.