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

Editor to share with you how to use the flex-grow attribute in CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Use the flex-grow property to specify the width of the frame width when the frame width in the Flexbox is greater than the unnecessary width.

Syntax:

Flex-grow: (quantity)

Code example:

Flex-grow.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-grow.css

.container {

Display:flex

}

.frameA {

Border:1pxsolid#e9006b

Flex-grow:5

}

.frameB {

Border:1pxsolid#ff6a00

Flex-grow:4

}

.frameC {

Border:1pxsolid#d0b106

Flex-grow:3

}

.frameD {

Border:1pxsolid#4aae20

Flex-grow:2

}

.frameE {

Border:1pxsolid#01b9b3

Flex-grow:1

}

Description:

We set frame-Aflex-grow to 5 frame frame Bflexgrowto 4 frame C flexray grow3 frame Dflexray 2 to frame Eflexgrow1. With this setting, the width of the frame is further enlarged even if the width of the frame becomes wider than that required to display the text. In this case, the extension of the frame, the ratio expansion of the frameA:frameB:frameC:frameD:frameE=5:4:3:2:1

Use a Web browser to display the above HTML file. The screen shown below is displayed. When the window width is narrow, each frame is displayed with the same width.

Increase the window width. When you need to wrap to display text in a frame, the width of the frame is still displayed at the same width.

Displays the same width when the text in the box displays an unwanted width.

If you widen the window size beyond the width required to display the frame without wrapping the text, the size of each frame increases. The increase in frame size is the frameA:frameB:frameC:frameD:frameE=5:4:3:2:1 ratio.

Set the flex-grow property in only one box

Change the CSS code to the following and set only one flex-grow property.

Flex-grow.css

.container {

Display:flex

}

.frameA {

Border:1pxsolid#e9006b

Flex-grow:1

}

.frameB {

Border:1pxsolid#ff6a00

}

.frameC {

Border:1pxsolid#d0b106

}

.frameD {

Border:1pxsolid#4aae20

}

.frameE {

Border:1pxsolid#01b9b3

}

Use a Web browser to display the page. When the window width is narrow, the frame width displayed is the same as the previous case.

Increase the width of the Web browser window. When the display requires line wrapping, the width of each frame is the same.

Further increase the window size. Displays the width of the text without breaking in the middle.

Further widen the window width. Frame-A with the flex-grow attribute further increases the width, but the width of other borders that do not specify the flex-grow attribute remains the same.

Even if you further widen the window width, only frameA has a wider width.

The above is all the content of the article "how to use the flex-grow attribute 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.