CSS Flex réactif
Boîte flexible réactive
Vous avez appris dans le chapitre CSS Media Queries que vous pouvez utiliser des requêtes multimédias pour créer différentes mises en page pour différentes tailles d'écran et appareils.
Ordinateurs portables et ordinateurs de bureau :
Téléphones et tablettes :
Par exemple, si vous souhaitez créer une mise en page à deux colonnes pour la plupart des tailles d'écran et une mise en page à une colonne pour les petites tailles d'écran (telles que les téléphones et les tablettes), vous pouvez modifier flex-directionde rowà column
à un point d'arrêt spécifique (800px dans le exemple ci-dessous) :
Exemple
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Une autre méthode consiste à modifier le pourcentage de la flexpropriété des éléments flexibles pour créer différentes dispositions pour différentes tailles d'écran. Notez que nous devons également inclure flex-wrap: wrap;dans le conteneur flex pour que cet exemple fonctionne :
Exemple
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Galerie d'images réactive avec Flexbox
Utilisez flexbox pour créer une galerie d'images réactive qui varie entre quatre, deux ou pleine largeur, selon la taille de l'écran :
Site Web réactif utilisant Flexbox
Utilisez flexbox pour créer un site Web réactif, contenant une barre de navigation flexible et un contenu flexible :