Skip to main content

flex-basis in CSS – How to Set Flex Item's Initial Length

flex-basis sets the initial length of a flexible item.

Here's an example:

section {
display: flex;
justify-content: flex-start;
background-color: orange;
margin: 10px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}

.flex-item3 {
flex-basis: 100px;
}

Try it on StackBlitz

We used the flex-basis property to set flex-item3's initial length to 100px.

Note the following:

  • auto is flex-basis' default value.
  • A flex-basis' value (other than auto) has higher specificity than width (or height). Therefore, suppose you define both for a flexible item. In that case, browsers will use flex-basis.
  • The flex-basis property sets the content box's initial width. But you can use the box-sizing property to make it set the border box's width instead.
Buy your CSS Flexbox Explained Visually book on Amazon