Why doesn't the last flex-item keep the width of other flex-items?

Question

css

The code.
Try changing the screen width - the blocks inside the flex container adjust to the width and move to the next row. The problem is that the boxes in the last row of flex items don't keep their 150px width, stretching to fill all the empty space left. How to make sure that flex-items from the last row do not take up all the free space?

Answer 1

In certain cases - you can: codepen.io/anon/pen/mRvdeK
(Certain cases depend on the number of item blocks and the width of the container)

Answer 2

Because you let the items stretch - flex: 1 1 150px;
Replace withflex: 0 1 150px;

Answer 3

This is the behavior of flex items as conceived by the authors.
You can control their size within certain limits by setting a priority and so on. But their width cannot be fixed.

Answer 4

Flex elements cannot be given margins.