CSS3 flex-Usage and examples of shrink attribute

flex-The shrink CSS attribute specifies the shrinkage method of the flex item relative to other items in the flex container.

The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.

flex-The syntax of shrink usage

The syntax of this attribute is as follows:

flex-shrink: number | initial | inherit

The following examples demonstrate how to use flex-shrink attribute.

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-shrink:　1;　/*　Safari　6.1+　*/
　　　　flex-shrink:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-shrink:　3;　/*　Safari　6.1+　*/
　　　　flex-shrink:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-shrink:　5;　/*　Safari　6.1+　*/
　　　　flex-shrink:　5;
}

Attribute Value

The following table describes the value of this attribute.

Browser Compatibility

flex-Browser compatibility of shrink attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

For further reading

Please refer to the following tutorials:CSS3Multi-column Layout.

Related Attributes:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-wrap,justify-content,min-height,min-width,order.