Edit in JSFiddle

<ul>
  <li class="A">BoxA</li>
  <li class="B">BoxB</li>
  <li class="C">BoxC</li>
  <li class="D">BoxD</li>
  <li class="E">BoxE</li>
  <li class="F">BoxF</li>
  <li class="G">BoxG</li>
  <li class="H">BoxH</li>
  <li class="I">BoxI</li>
  <li class="J">BoxJ</li>
</ul>

ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  background: gray
}
ul li {
  flex: 0 0 15%;
}
ul li.A {
  background: red;
}
ul li.B {
  background: blue;
}
ul li.C {
  background: green;
}
ul li.D {
  background: yellow;
}
ul li.E {
  background: purple;
}
ul li.F {
  background: silver;
}
ul li.G {
  background: gold;
}
ul li.H {
  background: orange;
}
ul li.I {
  background: ivory;
}
ul li.J {
  background: orchid;
}