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:

CSS

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;
}

HTML

<section>
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
  <div class="flex-item4">4</div>
</section>

Try Editing It

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.