Cześć, listuje itemy jako divy o ustalonej szerokości i wysokości. Main container ma szerokość 1100px a itemy listowane wewnątrz niego po 200px szerokości i wysokości oraz 25px marginesu. Chcę je mieć po cztery w rzędzie - 4*200=800px + marginesy po 25px z każdej strony, tj. 4*50 = 200px. Czyli 4 boxy o szerokości 200 i marginesach 25 px zajmują 1000px a szerokość mam 1100px, więc powinno być ok.
Używam flex aby wyświetlić divy obok siebie, ale pcha mi wszystkie boxy w jeden wiersz, ściskając je (zmniejsza im szerokość). Jak wymusić w css, aby były po 4 boxy w linijce, aby ich nie zwężało?
Dzięki.

[HTML] pobierz, plaintext 
<div id="middle">
 
	<div class="product_box">
		<input type="checkbox" name="product_check" value="1" />
	</div>
 
	<div class="product_box">
		<input type="checkbox" name="product_check" value="2" />
	</div>
 
	<div class="product_box">
		<input type="checkbox" name="product_check" value="3" />
	</div>
 
	<div class="product_box">
		<input type="checkbox" name="product_check" value="4" />
	</div>
 
	<div class="product_box">
		<input type="checkbox" name="product_check" value="5" />
	</div>
 
	<div class="product_box">
		<input type="checkbox" name="product_check" value="6" />
	</div>
 
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#middle{
	display: flex;
	justify-content: space-around;
}
 
 
.product_box{
	width: 200px;
	height: 200px;
	border:2px solid black;
	margin: 25px;
	padding: 5px;
}
[CSS] pobierz, plaintext 

https://stackoverflow.com/questions/2954655...4-items-per-row

Czyli dodanie flex-wrap: wrap; do main-containera załatwia sprawę.
Dzięki!