Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html
flex
communitycreator

What is the CSS flex-grow property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The flex-grow property in CSSCascading Style Sheets is used to define the extent to which an item will grow in comparison to the other flex items present in the same container.

Note: There is no effect of this property on non-flexible items.

Syntax


flex-grow: number|initial|inherit;

Property values

  • Number: Its default value is 0. It is used to specify how much the flex item will grow.

  • Initial: It sets the value to its default value.

  • Inherit: It inherits the property from its parent value.

Code

The basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the flex-grow property is as follows:

Explanation

In the above example, we apply the flex-grow property on Box 1 and Box 3, and the size is one; therefore, they are smaller in size. But the flex-grow property is set to be 5 and as a result, its size is more than the other two boxes. We can also set the values according to our choice.

RELATED TAGS

css
html
flex
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring