About the Flex-shrink property of the Telescopic box Flexbox

Note: Today, when using Swiper.js to do the product carousel, encountered in the use of Flexbox under the premise of the child element set flex:1; All child elements are squeezed in the first phase (not executed to swipe);

The reason is because there is no setting:flex-shrink property.

Flex-shrink:<number>

Default value : 1

applies to : Flex subkey

Inheritance : None

Animation : Yes

Calculated value : Specify a value

Value:

<number>: defines the shrinkage ratio using numerical values. Do not allow negative

Description Sets or retrieves the shrink ratio of the elastic box.

• Shrinks the space according to the contraction factor set by the elastic box element as a ratio.

  <ulclass= "Flex">    <Li>A</Li>    <Li>B</Li>    <Li>C</Li></ul>. Flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}. Flex li{width:200px;}. Flex Li:nth-child (3) {flex-shrink:3;}

  The default value of Flex-shrink is 1, and if no display defines the property, the ratio is automatically calculated as the default value of 1 after all the factors are summed to make space shrinkage. In this example, C explicitly defines that FLEX-SHRINK,A,B is not explicitly defined, but will be calculated according to the default value, you can see a total of the remaining space is divided into 5 parts, of which A is 1, B is 1, C is 3, that is 1:1:3 we can see the parent container is defined as 400px, The subkey is defined as 200px, which is 600px after the addition, beyond the parent container 200px. So the 200px needs to be a,b,c digested through the contraction factor, so the weighted synthesis can be 200*1+200*1+200*3=1000px; so we can calculate how much of the overflow a,b,c will be removed: A is removed overflow: (200*1/1000) * 200, that is approximately equal to 40PXB removed overflow amount: (200*1/1000) *200, that is, approximately equal to 40PXC removed overflow amount: (200*3/1000) *200, that is approximately equal to 120px the actual width of the last A,b,c is: 200-40=160px, 200-40=160px, 200-120=80px

  • The corresponding script attribute is flexgrow.

About the Flex-shrink property of the Telescopic box Flexbox