Как выровнять элементы по высоте?

Question

[alexeeey_kuznetsov]

На картинке синим выделены карточки - внутри которых красным прямоугольником разного объема заголовка и красная линия, которая действительно является линией, но располагается в карточках на одном уровне. Черными прямоугольниками показано описание карточки, которое также может иметь разный объем, но находится на одном уровне. По картинке плохо понятно, но у всех карточек одинаковые padding по всем сторонам.
Вопрос в том, как раскидать заголовок(красный) и линию с описанием(чёрный) по всей площади и к тому же, например у первой карточки может не быть описания, так что вариант привязывать линию к заголовку отпадает.
Заранее спасибо за помощь!

Comments

[Сергей delphinpro]

Если красные и черные блоки имеют неопределенную высоту, то скорее всего, никак.

[alexeeey_kuznetsov]

Сергей delphinpro, А если черные блоки будут с изначальной min-height?
Карточки изначально имеют min-height. Но я думаю её надо убрать и как-то по-другому задать.

[Сергей delphinpro]

в общем случае - flex-direction: column и для линии margin-top:auto

[Сергей delphinpro]

Пилите на флексах без выравнивания (приемлемо для отображения) и через директиву support прогрессивное улучшение на гридах (у них достаточно хорошая поддержка, чтобы так сделать)

Answer 1

[Надим]

Просто сделайте 8 флексблоков по четыре на строку. Отрегулируйте стили так, чтобы два вертикально стоящих флексблока казались одной единой карточкой.

Comments

[alexeeey_kuznetsov]

Думал над этим решением, но у карточки background есть для каждой уникальный. Поделить size и position сместить можно, конечно, но могут возникнуть другие проблемы.

[Надим]

alexeeey_kuznetsov, бэкграунд вы можете наложить на копии карточек (4 шт) - это копии потом наложите позади на слой ниже посредством абсолютного позиционирования и манипуляции зет индексом. Думаю очевидно, что копии будут не 8x1, а вполне себе 4x1 чтобы ваш фон нормально масштабировался.

Answer 2

[Дядя Толя]

https://jsfiddle.net/sh4rov/0v76zrc8/

если сделать min-height черным блокам, то всё робит таким вот образом, если я вас понял верно.