Можно ли flex-блокам задать высотку самого невысокого элемента

Question

Допустим есть 4 блока и в каждом по картинке: в первых 3 маленькой высоты и в 4 побольше. Можно ли задать блокам высоту, равную минимальной среди них? Т.е. чтобы последняя картинка уменьшилась до высоты минимальной.

Answer 1

Думаю в этом случае лучше всего задать фиксированную величину, это можно сделать с помощью свойства flex-basic, в нем, если не ошибаюсь, ты задаешь необходимую ширину, а высота автоматически уменьшится

Answer 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>

БЛОГ НА HUSL

Можно ли flex-блокам задать высотку самого невысокого элемента

Ответы (2 шт):