Va au-delà des bases de Flexbox pour maîtriser les modèles de mise en page du monde réel, y compris le layout holy grail, les footers collants, le centrage parfait et les grilles de cartes responsive en utilisant flex-grow, flex-shrink et flex-basis.
Le raccourci flex combine trois propriétés qui contrôlent comment les éléments flex partagent l'espace :
flex-basis définit la taille initiale d'un élément flex avant que la croissance ou le rétrécissement ne se produise. Il se comporte comme width (dans une rangée) ou height (dans une colonne), mais est compatible avec Flexbox. Une valeur de 0 signifie que l'élément commence sans taille et grandit uniquement en fonction de flex-grow. Une valeur de auto signifie que l'élément utilise la taille de son contenu ou sa largeur/hauteur explicite comme point de départ.
flex-grow détermine quelle part de l'espace restant un élément doit absorber. Si trois éléments ont flex-grow: 1, ils divisent l'espace supplémentaire équitablement. Si l'un a flex-grow: 2, il obtient deux fois plus d'espace supplémentaire que les autres.
flex-shrink détermine à quel point un élément doit rétrécir lorsqu'il n'y a pas assez d'espace. Une valeur de 0 empêche complètement le rétrécissement ; l'élément conserve sa taille flex-basis même si cela provoque un débordement.
/* Éléments de largeur égale */
.item { flex: 1 1 0; }
/* Sidebar fixe + main fluide */
.sidebar { flex: 0 0 250px; }
.main { flex: 1 1 0; }<style>
/* Modèle 1 : Layout avec footer collant */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page-header { padding: 16px; background: #1e293b; }
.page-main { flex: 1; padding: 16px; } /* grandit pour remplir */
.page-footer { padding: 16px; background: #1e293b; }
/* Modèle 2 : Cartes de hauteur égale */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 200px; /* grandir, rétrécir, min 200px */
display: flex;
flex-direction: column;
}
.card-body { flex: 1; } /* pousse le footer vers le bas */
.card-footer { margin-top: auto; }
/* Modèle 3 : Centrer n'importe quoi */
.center-box {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
</style>
<div class="card-grid">
<div class="card">
<div class="card-body">Contenu court</div>
<div class="card-footer">Footer</div>
</div>
<div class="card">
<div class="card-body">Contenu beaucoup plus long qui prend plus d'espace</div>
<div class="card-footer">Footer</div>
</div>
</div>Le layout holy grail est un modèle de design web classique avec un header, un footer et trois colonnes (sidebar gauche, contenu principal, sidebar droite). Il était notoirement difficile à réaliser avec les flottants, mais Flexbox le rend simple.
.holy-grail {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.middle {
display: flex;
flex: 1;
}
.left-sidebar { flex: 0 0 200px; }
.main-content { flex: 1; }
.right-sidebar { flex: 0 0 200px; }Le conteneur externe utilise flex-direction: column pour empiler header, milieu et footer verticalement. La section du milieu est elle-même un conteneur flex (dans la direction de rangée par défaut) avec le contenu principal défini sur flex: 1 pour qu'il remplisse tout l'espace horizontal disponible.
Ce modèle produit aussi naturellement un footer collant car flex: 1 sur la section du milieu pousse le footer vers le bas de la fenêtre lorsque le contenu est court.
Si trois éléments flex ont des valeurs flex-grow de 1, 2 et 1, comment 400px d'espace supplémentaire sont-ils distribués ?