Comment obtenir une en-tête de cartes ou similaire pour avoir la même hauteur avec flex box?

Pas de hacks s’il vous plait

pas de codage dur. L’idée n’est pas de résoudre le problème pour un cas, par exemple le cas où il y a 4 colonnes, mais de le résoudre pour le contenu dynamic et les tailles d’écran réactives.

Le problème pour moi est qu’il ne s’agit pas fondamentalement d’enfants directs, mais de son contenu.

codepen ici:

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

ce que je veux?

les en-têtes bleus doivent toujours avoir la même taille que tous les éléments de la ligne en cours.

une solution solide jQuery convient également … mais elle doit également être infaillible et fonctionner en redimensionnement. Le changement général de structure du code HTML convient également. Mais doit être réactif droit.

donc ceci (réalisé par codage dur et non réactif):

entrez la description de l'image ici

Il y a fondamentalement 2 manières d’accomplir ceci, la manière de CSS,

  • CSS – Comment avoir des enfants de parents différents de la même taille?

et la manière de script, ici en utilisant jQuery.


Le premier exemple de script montre comment définir une hauteur égale sur tous les éléments.

Le deuxième échantillon définit une hauteur égale par ligne. Pour ce faire, vous devez vérifier la valeur supérieure de l’élément (celle-ci change pour une nouvelle ligne) et définir la hauteur pour chaque plage / ligne traitée.

J’ai également ajouté quelques optimisations, des éléments de préchargement, qui ne seront donc pas traités s’il n’y a qu’un seul élément ou une seule colonne.


Code mis à jour 1

Extrait de stack 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

Ici vous avez mon approche avec jQuery. Les choses se compliquent car vous voulez que la hauteur de chaque ligne soit égale mais indépendante du rest.

Ce que j’ai fait est d’utiliser la position supérieure de chaque élément en tant qu’identificateur de ligne, de parcourir tous les en-têtes en les ajoutant à une classe possédant cette position. Ainsi, nous pouvons sélectionner ultérieurement une ligne entière à l’aide de cette classe. Dans chaque boucle, je vérifie la hauteur et enregistre la valeur maximale. Lorsque je détecte que nous sums dans une nouvelle ligne (la position du haut a changé), j’applique la hauteur maximale de la ligne à tous les éléments de la ligne précédente à l’aide de la classe I. ‘ai assigné.

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

J’espère que ça aide