In this section, the target

  1. Learn the use of flex-shrink, which is similar to flex-grow.
  2. Understand the formula for flex-shrink (difficult point).

Content in this paper,

This article describes the flex-shrink attribute. If flow-grow is used for scaling, flex-grow shrinks. The shrink rule is similar to that of Flex-grow.

The reading time is about 6 to 10 minutes, with lots of text, but mostly examples.

The flex – the shrink

In the previous section, you learned about flex-grow. If you understand it, then flex-shrink in this section is easy.

If flex-grow is used for scaling up, flex-shrink is used for scaling up. If flex-grow is used for scaling up, flex-shrink is used for scaling up.

Zoom in because there is free space, zoom out because the item is bigger than the container, and one of them is out of space, so zoom out.

Out of space calculation method:

Total size of all items minus container sizeCopy the code

See the following example:

Remember the last example from the Flex-basis chapter?

The container is 450px wide, and the three items are 200px each. When the total width exceeds the container, it automatically shrinks. It’s not hard to calculate that the extra space is 200px * 3-450px = 150px.

Syntax format:

.item {
	/* >=0. The default value is 1 */
	flex-shrink: <number>; 
}
Copy the code

Among them:

1. The default value is 1, indicating that all items are scaled down equally. 2. If the value is 0, the value is not narrowed.Copy the code

The calculation method of reduced size is similar to that of flew Grow, involving two formulas:

1) Calculate how much excess space is used to compress.

Formula: exceed space * (sum of flex-shrink for all projects >= 1? 1: the sum of Flex-shrink for all projects).Copy the code

If it’s not out of space, then it’s compressed; If the excess space is 150px and the sum of flex-shrink for all projects is 0.6, then 90px is used for compression.

2) Calculate how much space each project reduces.

Formula: Space to compress * (sum of flex-shrink for a single project/Flex-shrink for all projects)Copy the code

In short, it is done according to the Flex-shrink ratio.

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

Example 1, set flex-shrink to 0 for the project:

Following the example, I have a div (container, 450px) that contains three div (project, Flex-basis, 200px).

.item {
	/* The flex-basis attribute defines the main size of the project. * /
	flex-basis: 200px;
	
	/* The flex-shrink attribute defines the shrink factor for the project */
	flex-shrink: 0;
}
Copy the code

Among them:

A flex-shrink value of 0 indicates that the project is not compressed.Copy the code

Operation effect:

You can see that the item item3 goes beyond the container.

Example 2: Set flex-shrink for items 1, 2, and 3 to 0, 1, and 2, respectively:

Formula calculation:

1) Calculate how much excess space is used to compress.

Space to be compressed = total excess space * (sum of flex-shrink for all projects >= 1? 1: the sum of Flex-shrink for all projects). = 150px * ( 3 >= 1 ? 1 : 3) = 150pxCopy the code

2) Calculate how much space each project reduces.

Compressed space for Project 1 = 150px * (0/3) = 0 Compressed space for Project 2 = 150px * (1/3) = 50px Compressed space for Project 3 = 150px * (2/3) = 100pxCopy the code

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

Write the code to see what it looks like:

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

.item2 {
	flex-shrink: 1;
}

.item3 {
	flex-shrink: 2;
}
Copy the code

Operation effect:

Observe the operation effect and meet the expectation.

Example 3: Set flex-shrink for projects 1, 2, and 3 to 0.1, 0.2, and 0.3, respectively:

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 how much excess space is used to compress.

Space to be compressed = total excess space * (sum of flex-shrink for all projects >= 1? 1: the sum of Flex-shrink for all projects). = 150px * (0.6 >= 1? 1:0.6) = 90pxCopy the code

2) Calculate how much space each project reduces.

Compressed space for Project 1 = 90px * (0.1/0.6) = 15px Compressed space for Project 2 = 90px * (0.2/0.6) = 30px Compressed space for Project 3 = 90px * (0.3/0.6) = 45pxCopy the code

So finally: Project 1 is 185x wide, Project 2 is 170px wide, and Project 3 is 155px wide.

The style code is as follows:

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

.item1 {
	flex-shrink:.1;
}

.item2 {
	flex-shrink:.2;
}

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

The running effect is as follows:

As expected.

This section summarizes

  1. The total size of the item out of the container portion becomes out of space.

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

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

1) Calculate how much excess space is used to compress.

Formula: Total excess space * (sum of flex-shrink for all projects >= 1? 1: the sum of Flex-shrink for all projects).Copy the code

2) Calculate how much space each project reduces.

Formula: Space to compress * (sum of flex-shrink for a single project/Flex-shrink for all projects)Copy the code