<figure class="d-container">
<ul class="d-flex d-ex1">
<li>2 / 0 / 100px;</li>
<li>0 / 0 / 150px;</li>
<li>2 / 0 / 100px;</li>
</ul>
</figure>
* {
margin: 0;
padding: 0
}
li {
list-style: none
}
* {
box-sizing: border-box
}
body {
font-size: 100%;
line-height: 1.6
}
.d-container:first-child {
margin-top: 0
}
.d-container {
background: #f7f7f7;
border-bottom: 1px solid #eee;
margin: 2em auto;
padding: 2em 5%;
width: 100%
}
.d-container:after {
clear: both;
content: "";
display: table
}
.d-container>h1 {
color: #333;
font-size: 2em;
line-height: 1.2;
margin: 0 0 .5em;
text-align: center
}
.d-flex {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
box-sizing: border-box;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.d-flex,.d-flex li {
display: -webkit-box
}
.d-flex li {
color: #fff;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 1em
}
.d-flex li:nth-of-type(1) {
background: #484281
}
.d-flex li:nth-of-type(2) {
background: #5248af
}
.d-flex li:nth-of-type(3) {
background: #786bfa
}
.d-flex li:nth-of-type(4) {
background: #aba3f9
}
.d-flex li:nth-of-type(5) {
background: #a303cb
}
.d-ex1{
max-width: 600px
}
.d-ex1 li:nth-of-type(1) {
-webkit-box-flex: 2;
-webkit-flex: 2 0 100px;
-ms-flex: 2 0 100px;
flex: 2 0 100px
}
.d-ex1 li:nth-of-type(2) {
-webkit-box-flex: 0;
-webkit-flex: 0 0 150px;
-ms-flex: 0 0 150px;
flex: 0 0 150px
}
.d-ex1 li:nth-of-type(3){
-webkit-box-flex: 2;
-webkit-flex: 2 0 100px;
-ms-flex: 2 0 100px;
flex: 2 0 100px
}
This Pen doesn't use any external CSS resources.