Wie bekomme ich Header von Karten oder ähnlichem um die gleiche Höhe mit der Flex Box zu haben?

Keine Hacks bitte

keine harte Codierung. Die Idee triggers es nicht für einen Fall, zB für den Fall, dass es 4 Spalten gibt, sondern für dynamischen Inhalt und für responsive Bildschirmgrößen.

Das Problem für mich ist, dass es im Grunde keine direkten Kinder sind, sondern deren Inhalt

hier Codepen:

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

was will ich?

Die blauen Header haben immer die gleiche Größe wie alle Elemente in der aktuellen Zeile.

Eine solide jQuery-Lösung ist auch in Ordnung … aber es muss narrensicher sein und auch an der Größe arbeiten. Allgemeine Änderung der Struktur von HTML ist auch in Ordnung. Aber muss richtig reagieren.

so das (erreicht durch harte Codierung und nicht ansprechend):

Bildbeschreibung hier eingeben

   

Es gibt grundsätzlich zwei Möglichkeiten, dies zu erreichen, der CSS-Weg,

  • CSS – Wie haben Kinder in verschiedenen Eltern die gleiche Größe?

und das Skript Weg, hier mit jQuery.


Das erste Skriptbeispiel zeigt, wie Sie die gleiche Höhe für alle Elemente festlegen.

Im zweiten Beispiel wird die gleiche Höhe pro Zeile festgelegt, und die Art und Weise, wie diese Arbeit ausgeführt wird, besteht darin, den obersten Wert des Elements zu überprüfen (ändert sich für eine neue Zeile) und die Höhe für jeden verarbeiteten Bereich / Zeile festzulegen.

Ich habe auch ein paar Optimierungen hinzugefügt, Elemente vorgeladen und es wird sie nicht verarbeiten, wenn es nur 1 Element oder Spalte gibt.


Aktualisierter Codepen 1

Stapelschnipsel 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

Hier haben Sie meinen Ansatz mit jQuery. Die Dinge werden komplizierter, weil Sie wollen, dass die Höhe jeder Reihe gleich ist, aber unabhängig von den anderen.

Was ich getan habe, ist die obere Position jedes Elements als Zeilenbezeichner zu verwenden, eine Schleife durch alle Header zu machen und ihnen eine class hinzuzufügen, die diese Position hat, so dass wir später eine ganze Zeile mit dieser class auswählen können. In jeder Schleife überprüfe ich die Höhe und speichere den Maximalwert, und wenn ich feststelle, dass wir uns in einer neuen Zeile befinden (die oberste Position hat sich geändert), verwende ich die maximale Zeilenhöhe für alle Elemente der vorherigen Zeile mit der class I habe zugewiesen.

Hier ist der Code …

 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(); 

Ich hoffe, es hilft