title: Flex Basis
Flex-basis
To determine the initial width or height of a flex element along the main axis, we can use flex-basis:
instead of width:
or height:
. flex-basis:
is dynamic, so it can shrink or grow to fit inside the flex container.flex-basis:
can be set as a value, e.g. 200px;
20vw;
50vh;
or auto
. Auto will assess the contents of the flex item and expand or contract with them. Example 1 shows a nested div with flex-basis: 20vw;
, while the second and third use flex-basis: auto;
.
Example 1:
.container {
display: flex;
flex-direction: row;
justify-content: center;
background-color: yellow;
}
.box {
background-color: brown;
flex-basis: 20vw;
height: 200px;
box-sizing: border-box;
border: solid 1px black;
color: white;
}
<div class="container">
<div class="box">Box 1</div>
</div>

Examples 2 and 3:
.box {
background-color: brown;
flex-basis: auto;
height: 200px;
box-sizing: border-box;
border: solid 1px black;
color: white;
}

