Как расположить только 3 блока на строке, с переносом остальных

Не могу сделать так чтобы остальные блоки(начиная с текста 4) перенеслись на другую строку. Вот код:

.catalog{
width: 80%;
border: 1px solid;
display: flex;
flex-direction: column;
align-items: center;
}
.catalog ul{
width: 30%
}
.serialy{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.cartocki{
width: 30%;
height: 25vh;
border: 2px solid;
margin-right: 1%;
}
.cartocki img{  
height: 100%;
width: 100%;
}

.cartocki создаются с помощью js в блок serialy.

<div class="catalog">
      
       <ul>
       <li><a href="#1">&#8249</a></li>
        <li><a href="#1">1</a></li>
        <li><a href="#1">2</a></li>
        <li><a href="#1">3</a></li>
        <li><a href="#1">4</a></li>
        <li><a href="#1">5</a></li>
        <li><a href="#1">&#8250</a></li>
       </ul>
       <div class="serialy" id="serialy"></div>
       
        
    </div>