CSS Flexbox - flex-grow Property
CSS flex-grow property determines how much extra space a flex item should take up in the flex container along its main axis.
Excess space in a flex container, when larger than the combined sizes of flex items, is distributed based on each item's growth factor as a proportion of the sum total of all items' flex grow factors.
Possible Values
-
<number> - Any valid positive number. Negative values are not valid.
Applies to
Flex items, including in-flow pseudo-elements
Syntax
flex-grow: <number>;
CSS flex-grow - <number>
The following example demonstrates that flex-grow: 3 property grows the first flex item three times as much as the other items −
<html> <head> <style> .flex-container { display: flex; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } .flex-item1 { flex-grow: 3; } </style> </head> <body> <div class="flex-container"> <div class="flex-item1">Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google