In this section, the target

  1. Learn how to use Flex-Grow.
  2. Master the calculation formula of Flex-grow enlargement (difficult point).
  3. Learn how to write a navigation bar.

Content in this paper,

This article describes the project property flex-Grow, which defines the project’s expansion factor and is used to allocate the remaining space of the container.

The reading time is about 10 to 15 minutes. There are lots of words, but most of them are examples.

The flex – turns up

The Flex-grow property defines the expansion factor for the project, which is used to allocate the remaining space of the container. What is the remaining space?

In fact, it is very simple, the remaining space calculation method is:

The container size minus the total size of all itemsCopy the code

See the following example:

Among them:

1. The width of each item should be 50px and the width of three items should be 150px. 2. The remaining space is 450px - 150px = 300px.Copy the code

Syntax format:

.item {
	/* >= number of 0, default is 0 */
	flex-grow: <number>; 
}
Copy the code

Among them:

1. The value is 0 by default. If the container has free space, it is not enlarged. 2. Flex-grow can only be a number >=0. The project will be enlarged according to the set coefficient.Copy the code

So here’s the question:

How does the project allocate the remaining space according to the set coefficients?Copy the code

There are two key formulas involved:

1) Calculate how much free space to allocate.

Formula: Free space * (sum of flex-grow for all projects >= 1? 1: sum of flex-Grow for all projects).Copy the code

Here we use a ternary expression, which is easy to understand. The formula means:

If the sum of flex-grow for all projects is greater than or equal to 1, then all of the remaining space is allocated, otherwise the remaining space to be allocated is multiplied by the coefficient.

2) Calculate how much remaining space is allocated to each project.

Formula: Remaining space to be allocated * (sum of flex-grow for single project/flex-Grow for all projects)Copy the code

In simple terms, the allocation is based on the flex-grow ratio.

Now let’s combine examples to illustrate, to understand the calculation formula here.

Example 1, set the project’s flex-grow to 1:

In the following example, I have a div (container, 450px) that contains three div (items, 50px each).

.item {
	/* The flex-basis attribute defines the main size of the project. * /
	/* Set this to 50px */
	flex-basis: 50px;
	
	/* The flex-grow property defines the expansion factor for the project */
	/* Set this to 1 */
	flex-grow: 1;
}
Copy the code

Operation effect:

We can see that the width of the three items has changed to 150px, and you can see that the items have been enlarged.

Now apply the formula to see what happens:

1) Calculate the total amount of free space to allocate.

Free space to allocate = free space * (sum of flex-Grow for all projects >= 1? 1: Sum of all flex-grow projects) = 300px * (3 >= 1? 1 : 3) = 300px * 1 = 300pxCopy the code

2) Calculate how much remaining space is allocated to each project.

Because flex-Grow is 1 for each project, the amount of remaining space allocated is the same for each project.

Free space allocated for each project = Free space to be allocated * (sum of flex-Grow for single project/flex-Grow for all projects) = 300px * (1/3) = 100pxCopy the code

Assign an extra 100px to each project and add your own flex-basis to make each project 150px wide.

Example 2, set project 1’s Flex-grow to 1, project 2’s Flex-grow to 2, and project 3’s Flex-grow to 3:

We directly apply the formula to calculate:

1) Calculate the total amount of free space to allocate.

Free space to allocate = free space * (sum of flex-Grow for all projects >= 1? 1: Sum of all flex-grow projects) = 300px * (6 >= 1? 1 : 6) = 300px * 1 = 300pxCopy the code

2) Calculate how much remaining space is allocated to each project.

Because each project flex-grow is different, the amount of remaining space allocated for each project is calculated separately.

Remaining space allocated for Project 1 = Remaining space to be allocated * (Project 1Flex-Grow/Sum of Flex-Grow for all projects) = 300px * (1/6) = 50px Remaining space allocated for Project 2 = Remaining space to be allocated * ( Item 2 Flex-Grow/Sum of Flex-Grow for all items) = 300px * (2/6) = 100px Remaining space allocated for Item 3 = Remaining space to be allocated * (Item 3 Flex-Grow/Sum of Flex-Grow for all items)  = 300px * ( 3 / 6) = 150pxCopy the code

So finally: Project 1 is 100px wide, Project 2 is 150px wide, and Project 3 is 200px wide.

Write the code to see what it looks like:

.item {
	/* The flex-basis attribute defines the main size of the project. * /
	/* Set this to 50px */
	flex-basis: 50px;
}
.item1 {
	flex-grow: 1;
}

.item2 {
	flex-grow: 2;
}

.item3 {
	flex-grow: 3;
}
Copy the code

Operation effect:

Observe the operation effect and meet the expectation.

Example 3: Set flex-grow for project 1 to 0.1, project 2 to 0.2, and Project 3 to 0.3:

This example is similar to the previous one, except that the numbers are decimals and the sum is not greater than 1.

Let’s use the formula to calculate:

1) Calculate the total amount of free space to allocate.

Free space to allocate = free space * (sum of flex-Grow for all projects >= 1? 1: Total flex-grow of all projects) = 300px * (0.6 >= 1? 1:0.6) = 300px * 0.6 = 180pxCopy the code

2) Calculate how much remaining space is allocated to each project.

Because each project flex-grow is different, the amount of remaining space allocated for each project is calculated separately.

Free space allocated for Project 1 = Free space to be allocated * (Project 1Flex-Grow/Sum of Flex-Grow for all projects) = 180px * (0.1/0.6) = 30px Free space allocated for Project 2 = Free space to be allocated * ( Item 2 Flex-Grow/Sum of Flex-Grow for all items) = 180px * (0.2/0.6) = 60px Remaining space allocated for Item 3 = Remaining space to be allocated * (Item 3Flex-Grow / Total flex-Grow for all projects) = 180px * (0.3/0.6) = 90pxCopy the code

So finally: Project 1 is 80px wide, Project 2 is 110px wide, and Project 3 is 140px wide.

The style code is as follows:

.item {
	/* The flex-basis attribute defines the main size of the project. * /
	flex-basis: 50px;
}

.item1 {
	/* The flex-grow property defines the size of the project */
	flex-grow: 0.1;
}

.item2 {
	/* The flex-grow property defines the size of the project */
	flex-grow: 0.2;
}

.item3 {
	/* The flex-grow property defines the size of the project */
	flex-grow: 0.3;
}
Copy the code

The running effect is as follows:

As expected.

The flow – turns up application

The flow-grow property is used in many projects, such as page layout, navigation bars, pagination, and so on.

Example 1: Use flex elastic layout to achieve the following effect:

This is actually the Tencent home page navigation bar, we simulate the implementation, the steps are divided into 4 steps:

1) Write an HTML tag first. The tag is very simple. A nav contains several A tags:

<nav class="container">
	<a class="item" href="#">news</a>
	<a class="item" href="#">video</a>
	<a class="item" href="#">The picture</a>
	<a class="item" href="#">military</a>
	<a class="item" href="#">sports</a>
	<a class="item" href="#">NBA</a>
	<a class="item" href="#">entertainment</a>
	<a class="item" href="#">Finance and economics,</a>
	<a class="item" href="#">Science and technology</a>
</nav>
Copy the code

2) Set the basic style, background, color, border rounded corners and so on:

.container {
	height: 44px;
	background-color: #1479d7;
	border-radius: 3px;
}

.item {
	color: white;
	text-align: center;
	text-decoration: none;
}
Copy the code

Operation effect:

3) Set the container layout to Flex and project flex-grow to 1 to split the remaining space:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
}

.item {
	/* Set the project magnification factor */
	flex-grow: 1;
}
Copy the code

Operation effect:

4) Flex flex layout sets the container property align-items to Center:

.container {
	/* Center items on the cross axis */
	align-items: center;
}
Copy the code

Operation effect:

This completes the example.

If we try to change the size of the container instead of using float, we’ll see that the items change as well. As shown below:

This section summarizes

  1. The space in a container that is not occupied is called the remaining space.

  2. Flex-grow is used to set the magnification factor for a project.

  3. The calculation of project enlargement size includes two formulas:

1) Calculate how much free space to allocate.

Formula: Free space * (sum of flex-grow for all projects >= 1? 1: sum of flex-Grow for all projects).Copy the code

2) Calculate how much remaining space is allocated to each project.

Formula: Remaining space to be allocated * (sum of flex-grow for single project/flex-Grow for all projects)Copy the code
  1. Flex-grow is not set to a specific size and is widely used in flexible layouts.