Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html
community creator

What is the CSS flex-basis 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-basis property in CSSCascade Style Sheets is used to define the initial main size of flexible items.

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

Syntax


flex-basis: number|auto|initial|inherit;

Property values

  • number: It is used to define the percentage, or the unit of the length to set the initial length of flexible items.

  • auto: It is the default value. If there is no specified length then the length depends on the content.

  • initial: sets the value to its default value.

  • inherit: inherits the property from its parent value.

Code

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

In this example, we can see that we have set the value of flex-basis as 200px. We can see that the size of the box with the flex-basis value defined is smaller than the size of the other boxes. We can also set the value depending upon the requirements.

RELATED TAGS

css
html
community creator

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