Como obter o header de cartões ou similar para ter a mesma altura com flex box?

Sem hacks por favor

sem codificação. A ideia não é resolvê-lo para um caso, por exemplo, para o caso de haver 4 colunas, mas para conteúdo dynamic e para tamanhos de canvas responsivos.

O problema para mim é que basicamente não são crianças diretas, mas o conteúdo dela

codepen aqui:

HTML

disclaimer: resize the window. Make the blue headers in a row match height

bippo
some content lala some content lala
bippo
some content lala
bippo
some content lala
bippo
some content lala
bippo
some content lala some content lala some content lala
oh no this header wraps
some content lala

CSS

  body{ padding: 20px; } .item{ height: 100%; padding-right: 20px; padding-top: 20px; display: flex; flex-direction: column } .header{ background-color: cornflowerblue; } .content{ background-color: salmon; flex-grow: 1; } .mycontainer{ max-width: 500px; } 

o que eu quero?

os headers azuis sempre têm o mesmo tamanho como todos os elementos na linha atual.

uma solução sólida de jquery também está bem … mas deve ser à prova de erros e trabalhar no redimensionamento também. Mudança geral de estrutura de html também é bom. Mas deve ser responsivo certo.

então isso (obtido por codificação rígida e não responsivo):

insira a descrição da imagem aqui

Existem basicamente duas maneiras de fazer isso, o caminho CSS,

  • CSS – Como ter filhos de pais diferentes na mesma altura?

e o script, aqui usando o jQuery.


O primeiro exemplo de script mostra como definir a altura igual em todos os itens.

Segundo exemplo, defina a mesma altura por linha, e a maneira de fazer isso é verificar o valor superior do item (ele muda para uma nova linha) e definir a altura para cada intervalo / linha processada.

Também adicionei algumas otimizações, pré-carrego itens e, portanto, não os processará se houver apenas um item ou coluna.


Codepen atualizado 1

Snippet de pilha 1

 (function ($) { // preload object array to gain performance var $headers = $('.header') // run at resize $( window ).resize(function() { $.fn.setHeaderHeight(0); }); $.fn.setHeaderHeight = function(height) { // reset to auto or else we can't check height $($headers).css({ 'height': 'auto' }); // get highest value $($headers).each(function(i, obj) { height = Math.max(height, $(obj).outerHeight()) }); // set the height $($headers).css({ 'height': height + 'px' }); } // run at load $.fn.setHeaderHeight(0); }(jQuery)); 
 body{ padding: 20px; } .item{ height: 100%; padding-right: 20px; padding-top: 20px; display: flex; flex-direction: column } .header{ background-color: cornflowerblue; } .content{ background-color: salmon; flex-grow: 1; } .mycontainer{ max-width: 500px; } 
   
bippo
some content lala some content lala
bippo
some content lala
bippo
some content lala
bippo
some content lala
bippo
some content lala some content lala some content lala
oh no this header wraps
some content lala

Aqui você tem minha abordagem com jQuery. As coisas ficam mais complicadas porque você quer que a altura de cada fila seja igual, mas independente do resto.

O que eu fiz foi usar a primeira posição de cada elemento como um identificador de linha, percorrer todos os headers adicionando-os a uma class que tem essa posição, para depois podermos selecionar uma linha inteira usando essa class. Em cada loop, eu verifico a altura e salvo o valor máximo, e quando detecto estamos em uma nova linha (a posição superior mudou), aplico a altura máxima da linha a todos os elementos da linha anterior usando a class I atribuído.

Aqui está o código …

 function adjustHeaderHeights() { // First reset all heights to just increase if needed. $('div.header').css('height','auto'); var curRow=$('div.header').first().offset().top, curRowMaxHeight=$('div.header').first().height(); var n = $('div.header').length; $('div.header').each(function(index) { // Get header top position as row identifier, and add it as a class. var rowId = $(this).offset().top; $(this).addClass('rowid'+rowId); if (rowId != curRow) { // It's a new row. $('div.header.rowid'+curRow).height(curRowMaxHeight); curRow = rowId; curRowMaxHeight=$(this).height(); } else { curRowMaxHeight = $(this).height() > curRowMaxHeight ? $(this).height() : curRowMaxHeight; // It's the last header element, so we adjust heights of the last row. if (index+1 == n) $('div.header.rowid'+curRow).height(curRowMaxHeight); } }); } $(window).resize(function() { adjustHeaderHeights(); }); adjustHeaderHeights(); 

Espero que ajude