<div class="flex-container">
  <div class="box box-1">Item 1</div>
  <div class="box box-2">Item 2</div> 
  <div class="box box-3">Item 3</div> 
  <div class="box box-4">Item 4</div> 
</div>
body {
  margin: 20px;
  font-sixe:24px;
  line-height:30px;
  color:#fff;
}


.flex-container {
  border: 1px solid #000;
  display: flex;
  min-height:100px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.box {
  text-align: center;
  width: 100px;
  margin: 5px;
  flex-grow: 1;
}
.box-1 {
  flex-grow: 1;
  width:50px;
  background: #ff0000;
}
.box-2 {
  flex-grow: 2;
  width:70px;
  background: #da2cab;
}
.box-3 {
  flex-grow: 3;
  width:90px;
  background: #008000;
}
.box-4 {
  flex-grow: 4;
  background: #0000ff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.