Как создать 4 контейнера Flex Box в каждом ряду ⇐ CSS

[Anonymous]

Я просто хочу переместить 8 имеющихся у меня элементов гибкого поля (имя: Products-Box) на 4 в каждой строке. Вот что у меня есть на данный момент:

Код: Выделить всё

*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
min-height: 100vh;
}
header{
height: 80px;
display: flex;
background-color: lightblue;
}
.products-container{
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
.products-box{
width: 200px;
height: 200px;
background-color: lightpink;
color: white;
font-size: 20px;
text-align: center;
line-height: 200px;
}
.main-container{
display: flex;
min-height: 100vh;
}
.nav-sidebar{
min-width: 150px;
background-color: lightgray;
}
.inner-text{
font-weight: 600;
font-size: 24px;
margin: auto;
}

Код: Выделить всё

Header



Sidebar



Item1

Item2

Item3

Item4

Item5

Item6

Item7

Item8

Я пытаюсь получить флексбокс с меткой продуктов-box должно быть 4 в каждой строке, а если нет.

Подробнее здесь: https://stackoverflow.com/questions/784 ... rs-per-row