如何限制flexbox中显示的项目数量？答案

【问题标题】：How to limit number of displayed items in flexbox?如何限制flexbox中显示的项目数量？
【发布时间】：2020-12-09 00:24:10
【问题描述】：

我只想在一行中有 6 个项目，我不想在下一行再有 6 个。所以计划是在一行中显示 6 个项目，然后按 see more 或将用户带到另一个页面，其中将显示所有项目。这是我的代码：

   <div class="flex-div">            
        <c:forEach var="book" items="${bookList}">
            <div><img src="Images/book${book.imageId}.png" alt="book"
                  height="190px" width="150px"/></div>
            <div id="book-title">${book.title}</div>
            <div id="book-price">${book.price}$</div> 
        </c:forEach>           
    </div>

和css：

.flex-div{
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;

}

我该怎么办？

【问题讨论】：

您可以在c:forEach 下添加varStatus="loop"，然后使用<c:if test="${loop.index gt 5}"> //Your divs which you need to show </c:if> 然后在c:foreach 之外添加<a href="linktopage"> View More </a>。另请查看this 帖子。
@Swati 我只是在c:forEach 中添加了begin="0" end="5"：D 完全忘记了这个功能。

标签： java html css jsp

【解决方案1】：

flexbox 不会自己停在某个数上，这个问题需要你用其他语言解决，看来你用的是我不熟悉的 JSP，但是你必须提供 flexbox 只有 6 个项目，然后做和（if-else）在 flexbox 之后检查您的项目数是否高于 6，然后您显示“显示更多”除此之外，css 无法执行这样的逻辑。

【讨论】：

我使用 java 作为后端。好的，我明白你的意思，是否有可能停止 flexbox 的 css 选项，或者我应该在 java 中做所有事情？ :D
是的，你必须在 java 中进行，因为如果你试图从 CSS 中隐藏它，它仍然会在你可以在检查器中看到的 DOM 中，这不是你真正应该做的它。