Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "what is the use of flex-shrink attributes in css", the content is simple and clear, and I hope it can help you solve your doubts, so let me lead you to study and learn "what is the use of flex-shrink attributes in css" this article.

Use the flex-shrink property to specify the extent of the frame width when the frame width in Flexbox is less than unnecessary width.

Syntax:

Flex-shrink: (quantity)

Code example:

Flex-shrink.html

The first content php Chinese website php Chinese website

The second content php Chinese website

The third content php Chinese website php Chinese website

The fourth content php Chinese website php Chinese website

The fifth content php Chinese website php Chinese website

Flex-shrink.css

.container {

Display:flex

}

.frameA {

Border:1pxsolid#e9006b

Flex-shrink:1

}

.frameB {

Border:1pxsolid#ff6a00

Flex-shrink:2

}

.frameC {

Border:1pxsolid#d0b106

Flex-shrink:3

}

.frameD {

Border:1pxsolid#4aae20

Flex-shrink:4

}

.frameE {

Border:1pxsolid#01b9b3

Flex-shrink:5

}

Description:

We set frameAflex-shrink to 1, frame frame, flek, shrink, 2, and frame, flex, shrink, 3, frame, flex, shrink, 4, frame, frame, shrink, 5. If the width of the frame becomes narrower than the width required for text display, this setting allows you to specify the extent to which the width of the frame is reduced. The reduction of the frame narrows at the ratio of frameA:frameB:frameC:frameD:frameE=1:2:3:4:5. FrameE shrinks much more than frameA. )

The effect is as follows:

Use a Web browser to display the above code results. The page shown below is displayed.

360 screenshot 20181108171915428.jpg

Reduce the window width. The width of each frame is still the width that allows the content to be displayed unnecessarily when it does not have to be scaled out.

360 screenshot 20181108171953581.jpg

If you further reduce the window width, the internal text will be wrapped and the frame width will be reduced.

360 screenshot 20181108171823300.jpg

Further reduce the width of the frame. From the "first content" framework, we can see that the width of the "fifth content" framework has shrunk sharply.

360 screenshot 20181108172112435.jpg

By further reducing the width, you can clearly see the extent of the change.

360 screenshot 20181108172215780.jpg

It can be confirmed that the narrowing width of the frame narrows at the ratio of frameA:frameB:frameC:frameD:frameE=1:2:3:4:5.

Operation when flex-shrink is specified in only one frame

Change CSS to the following and specify flex-shrink in only one frame.

Flex-shrink.css

.container {

Display:flex

}

.frameA {

Border:1pxsolid#e9006b

Flex-shrink:5

}

.frameB {

Border:1pxsolid#ff6a00

}

.frameC {

Border:1pxsolid#d0b106

}

.frameD {

Border:1pxsolid#4aae20

}

.frameE {

Border:1pxsolid#01b9b3

}

The above is all the content of the article "what is the use of flex-shrink attributes in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.