Flex Basis – CSS


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>
text alt

Examples 2 and 3:

.box { background-color: brown; flex-basis: auto; height: 200px; box-sizing: border-box; border: solid 1px black; color: white; }
text alt
text alt

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.