CSS flex-basis

Previous Next

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

Click the property values below to see the result:

flex-basis: 50px;
flex-basis: 100px;
flex-basis: 200px;
flex-basis: auto;

Change the flex-basis property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-basis property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-basis property of the BLUE div:

red div
blue div
yellow div
pink div

Change the flex-basis 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 ❯