When specifying flex: 150px, the elements in the container are stretched to fill the entire width of the parent. But it is necessary that when transferring these elements, their width on the new line should be equal to the width of the elements on the previous one. For example, there are 10 elements: 6 on one line and 4 on another. Each element on the first line has a width of 165px, and the second one needs the same, however, it is larger due to the smaller number of elements.
.container { display: flex; flex-wrap: wrap; } .container > .item { flex: 150px; } There is another option to position elements using justify-content: space-between, with a fixed width but different indents. However, then it is necessary that the elements on the last row should be positioned along the left edge.
.container { display: flex; flex-wrap: wrap; justify-content: space-between; } .container > .item { width: 150px; } In general, I need a solution for at least one of these cases.
