flex-basis: number|auto|initial|inherit;
|
Value
|
Description
|
number
|
It can be a length unit, or percentage which is specifying the initial length of the flexible item
|
auto
|
The length is equal to the length of the flexible item, and this is the default value.
|
initial
|
Set this property to its default value.
|
inherit
|
Inherits this property from its parent element.
|
<style>
.container { border: 1px solid black; padding: 0.5rem; width: 300px; display: flex; flex-direction: row; } .item { width: 200px; font-size: 2rem; color: white; text-align: center; } .one { background: blue; } .two { background: red; flex-basis: 500px; } .three { background: green; } </style> <div class="container"> <div class="item one">1</div> <div class="item two">2</div> <div class="item three">3</div> </div> |