<ul> <li class="A">BoxA</li> <li class="B">BoxB</li> <li class="C">BoxC</li> </ul> <ul> <li class="D">BoxD</li> <li class="E">BoxE</li> <li class="F">BoxF</li> </ul> <ul> <li class="G">BoxG</li> <li class="H">BoxH</li> <li class="I">BoxI</li> </ul>
ul { display: flex; list-style-type: none; width: 100%; } ul li { flex-basis : 40%; } ul li.A { background: red; flex-shrink: 0; } ul li.B { background: blue; flex-shrink: 0; } ul li.C { background: green; flex-shrink: 0; } ul li.D { background: red; flex-shrink: 1; } ul li.E { background: blue; flex-shrink: 1; } ul li.F { background: green; flex-shrink: 1; } ul li.G { background: red; flex-shrink: 1; } ul li.H { background: blue; flex-shrink: 2; } ul li.I { background: green; flex-shrink: 3; }