<ul class="example-list" style="display: flex;">
  <li class="example-item" style="flex-basis: 80px;">1</li>
  <li class="example-item" style="flex-basis: 80px;">2</li>
  <li class="example-item" style="flex-basis: 80px;">3</li>
  <li class="example-item" style="flex-basis: 80px;">4</li>
  <li class="example-item" style="flex-basis: 80px;">5</li>
  <li class="example-item" style="flex-basis: 80px;">6</li>
</ul>
.example-list {
  width: 100%; 
  list-style: none; 
  margin:0; 
  padding:30px; 
  box-sizing: border-box;
  border: 1px solid #ddd; 
  border-radius: 3px; 
  background-color: #f3f3f3;
  .example-item {
    list-style: none; 
    margin:0; 
    padding:0; 
    color: #ffffff; 
    text-align: center;
  }
}
.example-item:nth-child(1) {background-color:#6200ee;}
.example-item:nth-child(2) {background-color:#3700b3;}
.example-item:nth-child(3) {color: #333333; background-color:#bb86fc;}
.example-item:nth-child(4) {background-color:#0014ee;}
.example-item:nth-child(5) {background-color:#da00ee;}
.example-item:nth-child(6) {background-color:#ee008b;}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.