css 响应式布局 - 如何避免第二行出现单个项目？

Question

我有这个 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;
}

当我在浏览器中移动时 window 在某些情况下，第二行只剩下一个项目。我想在第二行至少保留两项。我该怎么做？

例如：

不正确：

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

• 项目 6 <-- 单个项目

正确：

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

• 项目 5 • 项目 6 <-- 这里至少有两个项目

Answer 1

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>

css代码 需要在 li 标签上 width:25%

 *{
    box-sizing:border-box;
  }
    .portfolio-menu {
   display: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;
  width:25%;
  padding:15px;
}
.portfolio-menu li a{
    background:red;
    padding:20%;
    display:block;
}

css 响应式布局 - 如何避免第二行出现单个项目？

css responsive layout - how to avoid a single item in the second row?

css

responsive