flex-basis refers to width/height?


flex-basis refers to width/height?

Read on dev.to logo
About this post

This week I realized again something about flexbox and flex-basis in particular which I tend to forget while working on other CSS styles.

It is about the flex-basis property:

An absolute <length>, a <percentage> of the parent flex container's main size property, or the keyword auto.

What is referred here as "main size" is the size along the main axis of the flexbox.

Thus, this means flex-basis refers to:

  • width in case of flex-direction: row
  • height in case of flex-direction: column

My misconception here was that flex-basis ALWAYS refers to the width.