A flex layout

1.1 Overview of flex

The flex layout is a newer CSS box model. In the flex layout model, the arrangement of the child elements of the flex container The cloth can be more flexible and can automatically expand or contract according to the size of the container. It can also be located in a certain position of the container more flexibly. So there are many application scenarios of flex. For example, when we encounter application scenarios that require elements to be centered, flex layout becomes very useful. For more information about flex, please see here.

Example of the second project

2.1 Project overview

I am writing a todolist project recently, and the left navigation bar is widely used in the flex layout, here is Take this as an example to talk about some basic concepts of flex layout.

In our daily development, we must also often encounter this requirement. In a row, different label elements should be centered horizontally and vertically. And one is on the left and one is on the left, and the elements in the label element should be centered horizontally and vertically. Sometimes it’s better to center it horizontally, but it may be difficult to center it vertically. Let’s look at how to solve these problems with flex layout.
Look at the html part first

 

 
 
 
 < br /> 
 
 
 Three things every day
 

 

 3
 

We want the div with the class name list-today-title and the div with the class name list-today-count to be displayed on the same line, and let them both All are centered vertically and horizontally in the parent container of list-today. In addition, span.list-icon and span.list-name should be centered horizontally and vertically in div.list-today.title. And arranged in the same line.
The complete css style is as follows (scss is used here)

div.list-today{
 margin-bottom: 10px;
 height: 40px;
 display : flex;
 flex-direction: row;
 justify-content: flex-start;
 div.list-today-title{
 flex-grow: 10;
 display: flex;
 height: 40px;
 align-items: center;
 span.list-icon {
 width: 24px;
 height: 24px;< br /> i{
 font-size: 0;
 }
 }
 span.list-name {
 margin-left:10px;
} 
 }
 div.list-today-count{
 flex-grow: 1;
 display: flex;
 align-items: center;
} 
 }

2.2 flex

Let’s analyze the above css. First of all, we must first let list-today-title and list-today-count achieve horizontal and vertical centering.

div.list-today{
 display:flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items : center;
 div.list-today-title{
 flex-grow:10
 }
 div.list-today-count{
 flex-grow:1 
 }
}

Description:
(1)display:flex: Make this element a flex container, and the child elements inside can apply various flex functions.
(2)flex-direction: define the direction of the main axis
(3)justify-content: the arrangement of the child elements in the main axis direction, the value here is flex-start, which means the arrangement from the beginning.
(4) align-items: The arrangement of child elements in the lateral axis direction. The value here is center, which means that the child elements are centered on the lateral axis. This can be used for vertical centering.
(5) flex-grow: indicates the proportion of child elements that will be stretched when there is excess space in the parent container.
A picture is worth a thousand words. You will understand after reading this picture.

2.3 Summary

Flex layout is a relatively new layout method, which can solve some traditional layout Problems that are not easy to solve, such as the vertical centering of sub-elements. So it is very necessary to learn to use flex layout. To learn more about flex layout, please click here.