<h4># flex-basis</h4>
<div class="d-flex">
  <div id="bi1" class="box-item">1</div>
  <div id="bi2" class="box-item">2</div>
  <div id="bi3" class="box-item">3</div>
  <div id="bi4" class="box-item">4</div>
  <div id="bi5" class="box-item">5</div>
</div><hr>
*{
  box-sizeing:border-box;
}
.d-flex{
  height:150px;
  background-color:silver;
  display:-webkit-flex;
  display:flex;
}
.box-item{
  width:50px;
  height:50px;
  background-color:lime;
  border:solid 1px;
  text-align:center;
  margin:3px;
  padding-top:25px;
}

#bi2{
  flex-basis:80px;
}
#bi3{
  flex-basis:20px;
}
#bi4{
  flex-basis:250px;
}
#bi5{
  flex-basis:150px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.