web-dev-qa-db-fra.com

css flexbox: même hauteur pour tous les éléments?

En utilisant CSS et flexbox, je ne comprends pas comment donner la même hauteur aux div "a" et "b". J'ai besoin que b devienne plus grand pour correspondre à la taille de a. En d'autres termes, la case grise devrait être aussi haute que la case rouge.

D'après ce que j'avais compris, il suffisait de définir flex:1 à la fois a et b, pour qu'ils aient la même hauteur. Mais ce n'est pas le cas.

J'ai essayé de définir flex-basis:0 à la fois "a" et "b", mais le contenu est tronqué. Je ne peux pas tronquer a, j'ai besoin de b pour être agrandi.

#cont1{
    display:flex;
    flex-direction:column;
}

#a{
    background-color:red;
    flex:1;
}

#b{
    background-color:grey;
    flex:1;
}
<div id="cont1">
    <div id="a">
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
    </div>
    <div id="b">
        short text
    </div>
</div>

Version JSFiddle

htmlcsscss3flexbox
6
seguso

Si vous pouvez survivre sans flex, le positionnement peut le faire.

#cont1{
}

#a{
    background-color:red;
    position: relative;
}

#b{
    background-color:grey;
    position: absolute;
    left: 0; top: 100%;
    width: 100%;
    height: 100%;
}
<div id="cont1">
    <div id="a">
      <h1> title </h1>
      <h1> title </h1>
      <h1> title title title title title title title title title</h1>
      <div id="b">
        short text
      </div>
    </div>
</div>

3
LGSon

Spécifiez une hauteur pour le conteneur Flex.

Essaye ça:

#cont { 
     display: flex;
     flex-direction: column;
     height: 400px;
}

Vous devez créer un espace défini pour la distribution des éléments flexibles.

UPDATE(basé sur les commentaires)

à droite ... voici ce que je dois réaliser: http://www.jsfiddle.net/s2b0v4ph (regardez sur grand écran car il y a un point d'arrêt)

et voici le problème: si la case n ° 2 devient plus grande, l’alignement est cassé entre les cases n ° 2 et 5: http://www.jsfiddle.net/s2b0v4ph/1

La mise en page fonctionne parfaitement, comme codé. Les éléments flex du conteneur flex principal (.flex-md) étirent toute la hauteur du conteneur. Quelle que soit la quantité de contenu que vous ajoutez à la case n ° 1 ou à la case n ° 2, la colonne contenant les cases n ° 5 et n ° 6 aura la même hauteur.

 enter image description here

Toutes les colonnes du conteneur Flex principal (<div class="row flex-md" id="row-quadrati">) ont la même hauteur, quelle que soit la quantité de contenu. http://jsfiddle.net/s2b0v4ph/1/

La raison pour laquelle la case n ° 5 ne s'aligne pas sur la case n ° 2 lors de l'ajout de contenu est que chacune de ces cases existe dans un contexte de formatage différent pour flex . En d'autres termes, les boîtes existent dans différents conteneurs flexibles.

Plus précisément, les cases n ° 1, n ° 2 et n ° 3 sont des éléments flexibles de #quadr-col-1 et les cases n ° 4, n ° 5 et n ° 6 sont des éléments flexibles de #quadr-col-2. #quadr-col-1 et #quadr-col-2 sont tous deux des éléments flexibles du conteneur flex principal, doublant ainsi les conteneurs flex (imbriqués).

Étant donné que ces boîtes existent dans des conteneurs flexibles distincts, il n’ya aucune raison de les partager à hauteur égale. Si vous souhaitez que la fonction flex égale hauteur s'applique, mettez-les tous dans le même conteneur flex.

2
Michael_B

J'ai résolu le problème en javascript comme suit, mais je suis toujours intéressé par une solution CSS:

function computeMaxHeight(els) {
    var ht = 0;
    els.forEach(function (el) {
        var elht = el.height();
        if (elht > ht) {
            ht = elht;
        }
    });
    return ht;
}

function setMinMeight(els) {
    var maxht = computeMaxHeight(els);
    //console.log("here resize. maxht = " + maxht);

    els.forEach(function (el) {
        el.css('min-height', maxht);
    });

}

$(document).ready(function () {

    var els = [$("#non-porre-limiti"), $("#we-love-pagi"), $("#vuoto"), $("#pagiletter"), $("#pagi-focus")];

    $(window).on('resize', function () {
        setMinMeight(els);

    });

    setMinMeight(els);

});

violon: http://jsfiddle.net/s2b0v4ph/3/

0
seguso