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

Question

I want to have only 6 items in one row, i don't want another 6 in next row. So the plan is to show 6 items in one row and button see more or something that will take user to another page where all items will be displayed. This is my code:

   <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>

and css:

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

}

What should i do?

Answer 1

flexbox will not stop at a certain number by itself, this problem needs a solution by your other language, it seems you are using JSP which im not familiar with, but you have to provide the flexbox only 6 items, and then do and (if-else) after flexbox to check if your items count is above 6, then you show "show more" other than that, css can't do logic like that.