Comment puis-je agrandir une ligne Flexbox spécifique pour remplir l'espace vertical restant ?

Équilibrer l'espace vertical avec Flexbox

Flexbox fournit un mécanisme puissant pour organiser le contenu dans une mise en page. Cependant, il peut parfois être difficile de contrôler la consommation d'espace vertical d'une ligne particulière dans une flexbox à plusieurs lignes.

Par exemple, si vous avez un scénario dans lequel vous souhaitez que la troisième ligne s'étende pour occuper le reste espace vertical, voici comment y parvenir en utilisant flexbox :

Pour commencer, assurez-vous que le conteneur externe, généralement les éléments body et html, ainsi que le conteneur flexbox parent (wrapper), ont leurs hauteurs sont définies à 100 %, héritant ainsi de toute la hauteur de la fenêtre du navigateur.

Ensuite, concentrez-vous sur la troisième ligne (#row3) dans la disposition de votre flexbox. Attribuez une valeur de flexion supérieure à 1 à cette ligne tout en laissant les autres lignes avec une valeur de flexion égale ou inférieure à 1. Cela signalera au navigateur que la troisième ligne doit consommer plus d'espace que les autres.

Pour affiner davantage la mise en page, vous pouvez définir la propriété min-height des colonnes internes (#col1, #col2 et #col3) dans la troisième ligne à 100 %. Cela garantit qu'ils héritent de toute la hauteur de leur conteneur parent (#row3) et ajustent leur hauteur en conséquence.

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

En mettant en œuvre ces ajustements , vous permettez à la troisième ligne d'ajuster dynamiquement sa hauteur, en consommant l'espace vertical restant disponible dans la fenêtre du navigateur. Cela fournit la disposition souhaitée où la troisième rangée s'agrandit pour remplir le vide et accueillir les éléments verticalement, selon les besoins.

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!