¿Cómo obtener un encabezado de tarjetas o similar para tener la misma altura con flex box?

No hacks por favor

sin encoding dura. La idea no es resolverlo para un caso, por ejemplo, para el caso de que haya 4 columnas, sino para resolver el contenido dynamic y los tamaños de pantalla receptivos.

El problema para mí es que básicamente no son niños directos, pero el contenido del mismo

codepen aquí:

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; } 

¿Qué quiero?

los encabezados azules siempre tienen el mismo tamaño que todos los elementos en la fila actual.

una solución sólida de jquery también está bien … pero debe ser a prueba de tontos y también trabajar en el cambio de tamaño. El cambio general de estructura de html también está bien. Pero debe ser receptivo correcto.

así que esto (logrado mediante una encoding difícil y no receptiva):

enter image description here

Básicamente hay 2 formas de lograr esto, la forma de CSS,

  • CSS – ¿Cómo tener hijos en diferentes padres de la misma altura?

y la forma de script, aquí usando jQuery.


La primera muestra de script muestra cómo establecer la misma altura en todos los elementos.

La segunda muestra establece la misma altura por fila, y la forma de hacerlo funcionar es verificar el valor superior del elemento (cambia para una nueva fila) y establecer la altura para cada rango / fila procesada.

También agregué un par de optimizaciones, elementos de precarga y por lo tanto no los procesará si solo hay 1 elemento o columna.


Codepen actualizado 1

Stack snippet 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

Aquí tienes mi enfoque con jQuery. Las cosas se complican más porque desea que la altura de cada fila sea igual, pero independiente del rest.

Lo que he hecho es usar la posición superior de cada elemento como un identificador de fila, recorrer todos los encabezados y agregarles una clase que tenga esta posición, para luego poder seleccionar una fila completa usando esa clase. En cada ciclo, controlo la altura y guardo el valor máximo, y cuando detecto que estamos en una nueva fila (la posición superior ha cambiado), aplico la altura máxima de la fila a todos los elementos de la fila anterior usando la clase I ha asignado.

Aquí está el 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 ayude