How to adjust the amount of flex-items per row

Amount of flex-items per row

@mixin max-width($width) {
	@media screen and (max-width: $width) {
		@content;
	}
}

.container {
	position: relative;
	display: flex;
	flex-flow: row wrap;
}
.item {
	background-color: tomato;
	box-sizing: border-box;
	padding: 20px;
	outline: 2px solid blue;
	flex: 1;
}

@include max-width(992px) {
	.item {
		flex-basis: 25%;
		background-color: red;
	}
}

@include max-width(640px) {
	.item {
		flex-basis: 50%;
		background-color: green;
	}
}

markup

<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

This will work as long as the item are with equal flex-basis. If they are variable, then we need a different approach (which I am searching at the moment).