What does flex-basis do?

CSSJunior~1 min read

flex-basis sets the initial size of a flex item along the main axis, before flex-grow and flex-shrink are applied.

That is, it is the "base width" (or height, if flex-direction: column), from which the element starts in calculations.

Examples:

css

.item {
  flex-basis: 200px; /* the element initially takes up 200px */
}

If flex-direction: row → flex-basis works as width. If flex-direction: column → flex-basis works as height.

Special cases:

javascript

flex-basis: auto;   /* the size is taken from width/height or the content (default behavior) */
flex-basis: 0;      /* ignore the content and divide the free space only by flex-grow */

In short: flex-basis is the starting size of a flex item before free space distribution.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.