<div class="flex-container">
<div class="flex">1
</div>
<div class="flex">2
</div>
<div class="flex">3
</div>
<div class="flex">4
</div>
<div class="flex">5
</div>
<div class="flex">6
</div>
</div>
.flex-container {
flex:1;
display: inline-flex;
display: inline-flex;
background-color: blue;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-around;
margin: 10px;
}
.flex {
flex: 1;
min-width: 50px;
max-width: 50px;
height: 50px;
background-color: red;
margin: 10px;
}
.dummy {
background-color : blue;
}
$(document).ready(function(){
let cur_width = 0; // Текущая ширина контейнера
let col_counts = 0; // Количество столбцов в контейнере
const COL_WIDTH = 70; // Ширина 1 столбца (можно высчитать, а не вручную)
let boxes = $(".flex-container").children().length; // Количество элементов в контейнере
cur_width = $(".flex-container").css("width");
col_counts = parseInt(parseInt(cur_width)/COL_WIDTH);
if (boxes%col_counts) {
for (let i=0; (boxes+i)%col_counts; i++) {
$(".flex-container").append('<div class="flex dummy"></div>');
}}
$( window ).resize(function() { // При ресайзе считаем полные ли строки
cur_width = $(".flex-container").css("width");
col_counts = parseInt(parseInt(cur_width)/COL_WIDTH);
$(".dummy").remove();
if (boxes%col_counts) {
for (let i=0; (boxes+i)%col_counts; i++) { // Если неполные, то добавляем элементы-болванки
$(".flex-container").append('<div class="flex dummy"></div>');
}
}
});
});
This Pen doesn't use any external CSS resources.