Comment faire en sorte qu'une ligne Flexbox remplisse l'espace vertical restant ?

Atteindre une utilisation verticale de l'espace à 100 % dans une mise en page Flexbox

Flexbox est un système de mise en page puissant qui permet aux développeurs de créer des mises en page réactives et dynamiques. Un scénario courant consiste à disposer d’une ligne de présentation flexbox qui consomme automatiquement l’espace vertical restant dans une fenêtre de navigateur. Cet article explique comment y parvenir à l'aide des propriétés Flexbox.

Le défi :

Considérez une disposition flexbox à trois rangées, les deux premières rangées ayant des hauteurs fixes. Le défi est de faire grandir la troisième ligne verticalement pour remplir l'espace restant de la fenêtre du navigateur, permettant ainsi à son contenu de s'étendre en conséquence.

La solution :

La clé Pour obtenir ce comportement, il suffit de définir la propriété "flex" de la troisième ligne sur une valeur supérieure à 1. Cela demande à la flexbox d'agrandir la ligne au-delà de sa taille intrinsèque et de répartir l'espace restant entre ses enfants. Cependant, définir un attribut de hauteur sur 100 % ne fonctionnera pas car le contenu de la ligne ne remplit pas naturellement la fenêtre du navigateur.

Mise en œuvre de la solution :

Pour implémenter correctement cette mise en page, assurez-vous que les principes suivants sont appliqués :

• Définissez la hauteur du code HTML, du corps et du div parent. (emballage) à 100 %. Cet héritage permet à la troisième ligne d'hériter de toute la hauteur de la fenêtre du navigateur.
• Définissez la propriété flex de la troisième ligne sur une valeur supérieure à 1 (par exemple, flex : 2). Cela force la ligne à s'agrandir verticalement et à utiliser l'espace restant.
• Envisagez d'ajouter une hauteur minimale de 100 % aux colonnes de la troisième ligne. Bien qu'il ne soit pas nécessaire dans la plupart des navigateurs modernes, il peut assurer une compatibilité entre navigateurs.

Exemple de code :

.wrapper, html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

#row1 {
    background-color: red;
}

#row2 {
    background-color: blue;
}

#row3 {
    background-color: green;
    flex: 2;
    display: flex;
}

#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;
}

Conclusion :

En suivant ces directives, vous pouvez facilement créer une disposition flexbox qui consomme automatiquement l'espace vertical restant dans un navigateur. fenêtre. Cette technique est particulièrement utile pour les conceptions réactives où la hauteur du contenu peut varier considérablement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!