Le modèle Flexbox est une technique puissante et flexible pour créer des mises en page en CSS. Il permet de contrôler facilement l'alignement, la direction et la répartition des éléments dans un conteneur, qu'il s'agisse d'un site web simple ou d'une interface utilisateur plus complexe.
1. Concepts de base de Flexbox
Flexbox se compose de deux types d'éléments principaux :
- Conteneur flex : L'élément parent qui applique le comportement Flexbox.
- Éléments flex (ou enfants flex) : Les éléments directs du conteneur flex, qui sont disposés selon les règles Flexbox.
Propriétés du conteneur Flexbox
- display: flex; : Active Flexbox pour le conteneur.
- flex-direction : Définit l'axe principal et la direction dans laquelle les éléments sont placés (ligne, colonne).
- justify-content : Aligne les éléments le long de l'axe principal.
- align-items : Aligne les éléments le long de l'axe croisé.
- flex-wrap : Définit si les éléments doivent rester sur une seule ligne ou se renvoyer sur plusieurs lignes.
Propriétés des éléments flex
- flex-grow : Indique si un élément doit croître pour occuper plus d’espace.
- flex-shrink : Indique si un élément doit rétrécir pour libérer de l’espace.
- flex-basis : Indique la taille initiale de l'élément avant que l'espace supplémentaire ne soit distribué.
- order : Contrôle l’ordre de disposition des éléments.
- align-self : Permet de surcharger align-items pour un élément spécifique.
Flexbox - Alignement de base
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
height: 150px;
}
.flex-item {
background-color: #ff6b6b;
padding: 20px;
color: white;
font-weight: bold;
}
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
Result :
Explication :
Le conteneur .flex-container utilise display: flex, activant le modèle Flexbox. justify-content: space-between répartit les éléments avec un espace égal entre eux. align-items: center centre verticalement les éléments à l'intérieur du conteneur.
Rendu : Les trois éléments sont alignés horizontalement, avec des espaces égaux entre eux, et centrés verticalement dans le conteneur.
Exemple 2 : Direction en colonne : Flexbox - Colonne
<style>
.flex-container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #d3d3d3;
height: 300px;
}
.flex-item {
background-color: #3498db;
padding: 15px;
color: white;
width: 60%;
text-align: center;
}
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
Rendu :
Explication :
flex-direction: column dispose les éléments verticalement dans une colonne.
justify-content: space-around crée des espaces égaux autour des éléments (au-dessus et en dessous).
align-items: center centre les éléments horizontalement dans la colonne.
Rendu : Les éléments sont empilés verticalement au centre du conteneur avec des espaces égaux autour d'eux.
Exemple 3 : Flex-grow et flex-shrink
<style>
.flex-container3 {
display: flex;
background-color: #e9ecef;
height: 100px;
}
.flex-item3 {
background-color: #007bff;
padding: 10px;
color: white;
text-align: center;
flex-grow: 1; /* Tous les éléments prennent de l'espace disponible */
}
.flex-item3:first-child {
flex-grow: 2; /* Le premier élément prend deux fois plus de place */
}
</style>
<div class="flex-container">
<div class="flex-item">Item 1 (flex-grow: 2)</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
Explication :
flex-grow détermine combien un élément doit prendre de l'espace disponible. L'élément Item 1 prend deux fois plus d'espace que les autres.
Rendu : Le premier élément occupe une plus grande largeur que les deux autres, qui occupent l'espace restant de manière égale.
3. Mode responsive avec Flexbox
Flexbox est naturellement responsive. En ajustant les propriétés comme flex-wrap et media queries, vous pouvez créer des mises en page flexibles adaptées à différents écrans.
Exemple 4 : Flexbox responsive avec flex-wrap
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
background-color: #28a745;
padding: 20px;
margin: 10px;
color: white;
width: 30%; /* Chaque élément occupe 30% de la largeur */
box-sizing: border-box;
text-align: center;
}
/* Media query pour les petits écrans */
@media (max-width: 768px) {
.flex-item {
width: 45%; /* Sur les petits écrans, chaque élément prend 45% de la largeur */
}
}
/* Media query pour les très petits écrans */
@media (max-width: 480px) {
.flex-item {
width: 100%; /* Sur les très petits écrans, chaque élément prend 100% de la largeur */
}
}
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
Explication :
flex-wrap: wrap permet aux éléments de passer à la ligne lorsqu'il n'y a plus assez de place sur une seule ligne.
- Les media queries ajustent la largeur des éléments sur les petits écrans.
- Sur les grands écrans, chaque élément prend 30% de la largeur. Sur les écrans plus petits, ils prennent 45%, puis 100% sur les très petits écrans.
Rendu : Les éléments s'adaptent à la taille de l'écran et se réorganisent automatiquement sur plusieurs lignes en fonction de la largeur disponible.
4. Bonnes pratiques Flexbox
- Utiliser flex-wrap pour la flexibilité : Permettez aux éléments de passer à la ligne lorsque nécessaire. Cela empêche que les éléments ne soient trop petits ou trop compressés.
- Limiter l'utilisation de flex-basis fixe : Utilisez des unités relatives (%, fr) plutôt que des valeurs fixes (px) pour garantir un comportement fluide et responsive.
- Éviter l’utilisation excessive de order : L’ordre naturel des éléments devrait être suffisant dans la plupart des cas.