Допустим есть 4 блока и в каждом по картинке: в первых 3 маленькой высоты и в 4 побольше.
Можно ли задать блокам высоту, равную минимальной среди них? Т.е. чтобы последняя картинка уменьшилась до высоты минимальной.
-
Без JS нельзя. Используйте JS или задавайте фиксированную высоту.– NoSkill8 сен 2020 в 13:25
Добавить комментарий
|
2 ответа
js
let flexContainer = document.querySelector('.flex-container');
let flexEl = [...flexContainer.children]
let mHeight = Math.min(...flexEl.map(e => {
return parseInt(e.clientHeight);
}))
flexEl.forEach(e => {
e.style.height = mHeight + 'px'
})
html
<section class="flex-container">
<div class="flex-container__el"></div>
<div class="flex-container__el"></div>
<div class="flex-container__el"></div>
</section>
Думаю в этом случае лучше всего задать фиксированную величину, это можно сделать с помощью свойства flex-basic, в нем, если не ошибаюсь, ты задаешь необходимую ширину, а высота автоматически уменьшится