CSS flex-grow

Previous Next

Demo of the different values of the flex-grow property.

Click the property values below to see the result:

flex-grow: 0;
flex-grow: 1;
flex-grow: 2;
flex-grow: 3;
flex-grow: 4;
flex-grow: 5;
flex-grow: 6;
flex-grow: 7;
flex-grow: 8;
flex-grow: 9;
flex-grow: 10;

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-grow property of the BLUE div:

red div
blue div
yellow div
pink div

Play more with the code in our Tryit yourself editor: Try it Yourself ❯