CSS Flexbox Réactif
Flexbox Réactif
Vous avez appris dans le chapitre CSS Media Queries que vous pouvez utiliser des requêtes média pour créer différents agencements en fonction des tailles d'écran et des appareils.
Par exemple, si vous souhaitez créer un agencement à trois colonnes pour les grandes tailles d'écran et un agencement à une colonne pour les petites tailles d'écran (comme les téléphones), vous pouvez changer la propriété flex-direction de row à column à un point de rupture spécifique (600px dans l'exemple ci-dessous) :
Redimensionnez la fenêtre du navigateur pour voir l'effet.
Exemple
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
font-size: 30px;
text-align: center;
width: 100%;
}
/* Créer un agencement à une colonne au lieu d'un agencement à trois colonnes */
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
Une autre méthode consiste à modifier le pourcentage de la propriété flex des éléments flex pour créer différents agencements selon les tailles d'écran. Notez que nous devons également inclure flex-wrap: wrap; sur le conteneur flex pour que cet exemple fonctionne :
Exemple
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
font-size: 30px;
flex: 33.3%;
}
/* Créer un agencement à une colonne au lieu d'un agencement à trois colonnes */
@media (max-width: 600px) {
.flex-item {
flex: 100%;
}
}
Galerie d'images réactive utilisant Flexbox
Ici, nous utilisons des requêtes média avec flexbox pour créer une galerie d'images réactive :
Site Web réactif utilisant Flexbox
Utilisez flexbox pour créer un site Web réactif, comprenant une barre de navigation flexible et un contenu adaptable :