<div class="block">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<br>    
<div class="block">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.block {
  display: flex;
}
.item {
  flex-grow: 1;
}


// оформление
.block {border: 10px solid magenta;}
.item {
  height: 50px;
  &:nth-child(1) {background:red}
  &:nth-child(2) {background:green}
  &:nth-child(3) {background:blue}
  &:nth-child(4) {background:yellow}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.