css响应布局-如何避免第二行中的单个项目？

我有一个响应菜单的css代码：

.portfolio-menu {
   display:inline-flex;      
   width:100%;
   justify-content: center;
   flex-wrap:wrap;
   background:grey;
   margin:0 auto;
   padding:0;
   padding-right:10%;
}

.portfolio-menu li {
  display:inline-block;
  margin-left:30px;
}

在某些情况下，当我在浏览器窗口中移动时，第二行只剩下一项。我想在第二排至少留两件东西。我该怎么做

例如：

不正确：

•项目1•项目2•项目3•项目4•项目5

•第6项html代码

<ul class="portfolio-menu">
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
</ul>

html代码

<ul class="portfolio-menu">
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
    <li><a>link</a></li>
</ul>