Как адаптировать размер произвольных блоков под размер экрана?

Question

[zeni1agent]

У меня есть блок с произвольным количеством блоков от 0 до 5

<div class='block'>
<div class='art artickle1'></div>
<div class='art artickle2'></div>
<div class='art artickle3'></div>
<div class='art artickle4'></div>
<div class='art artickle5'></div>
</div>

Мне нужно что бы все блоки с классом art имели одинаковую высоту и ширину. И уменьшались ровно пропорционально когда уменьшается экран. а в случае если блоков меньше пяти то оставались на одном и том же месте и не заполняли весь block
Я смог с помощью flex и

function timeout() {
var f4 = document.querySelector('.art').scrollWidth;
$('.art').css('height', f4);	
}
setInterval(timeout, 1000);

Уменьшать див ровно пропорционально.
Но когда дивов меньше 5 то пустое место они полностью заполняют
А мне бы хотелось что бы они оставались на том же месте.
Можно ли реализовать задумку на чистом css ?
Но можно и с использованием js, jqury.

Comments

[Rustam Bainazarov]

/

[zeni1agent]

Рустам Байназаров, А можно ли сделать так же но с учетом произвольного свойства margin?

[Rustam Bainazarov]

zeni1agent, что такое произвольный margin и зачем он вообще нужен?

[zeni1agent]

Рустам Байназаров,
Свойство margin

.art{
margin:10px;
}

внешний отступ
Просто когда я его использую див уходит за кроя
https://codepen.io/zeni-agentt/pen/NVKbwK

[Rustam Bainazarov]

zeni1agent, вычитайте его с помощью calc().