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
- HTML
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;
}
<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>
We used the flex-basis
property to set flex-item3
's initial length to 100px
.
Note the following:
auto
isflex-basis
' default value.- A
flex-basis
' value (other thanauto
) has higher specificity thanwidth
(orheight
). Therefore, suppose you define both for a flexible item. In that case, browsers will useflex-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.