10.1 Colonnes adaptatives
Flexbox est destiné aux compositions unidimensionnelles, ce qui signifie qu'il est parfait pour disposer les éléments en ligne ou en colonne. Voyons les bases de Flexbox ainsi que des techniques pour créer des mises en page complexes et réactives.
Flex-container et Flex-éléments
-
Flex-container : un élément auquel est appliquée la propriété
display: flex. Ce conteneur gère la disposition de tous les éléments enfants (flex-éléments) - Flex-éléments : éléments enfants du flex-container
1. Création de colonnes adaptatives
Exemple de création de colonnes adaptatives avec flex-wrap, flex-grow,
flex-shrink et flex-basis:
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 200px;
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colonnes adaptatives avec Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">Colonne 1</div>
<div class="flex-item">Colonne 2</div>
<div class="flex-item">Colonne 3</div>
</div>
</body>
</html>
Explication du code :
-
.flex-container: définit le conteneur comme un flex-container avec des éléments qui peuvent être transférés à la ligne suivante en cas de manque d'espace (flex-wrap: wrap) -
.flex-item: les éléments ont des tailles égales et peuvent s'adapter à l'espace disponible (flex: 1 1 200px)
10.2 Galerie d'images réactive
Créons une galerie d'images réactive qui change le nombre de colonnes en fonction de la taille de l'écran :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img data-max-width="256" data-id="ebb06cf3-0e04-45bd-a33e-31fe096fd323" src="https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg" alt="image 1">
<img data-max-width="256" data-id="ddbb4085-7a58-44e0-88fe-a2368b777222" src="https://cdn.javarush.com/images/article/ddbb4085-7a58-44e0-88fe-a2368b777222/256.jpeg" alt="image 2">
<img data-max-width="256" data-id="71be962a-10e9-4351-8c27-8846c6ad2e00" src="https://cdn.javarush.com/images/article/71be962a-10e9-4351-8c27-8846c6ad2e00/256.jpeg" alt="image 3">
<img data-max-width="256" data-id="8afd6be8-0f8e-42e9-a64b-8549f12862f7" src="https://cdn.javarush.com/images/article/8afd6be8-0f8e-42e9-a64b-8549f12862f7/256.jpeg" alt="image 4">
<img data-max-width="256" data-id="77241dcb-9b7f-471e-934e-9f7f2a42d369" src="https://cdn.javarush.com/images/article/77241dcb-9b7f-471e-934e-9f7f2a42d369/256.jpeg" alt="image 5">
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>
</body>
</html>
Explication :
- Sur les grands écrans, les images occupent un tiers de la largeur du conteneur
- Sur les écrans jusqu'à 768 pixels, les images occupent la moitié de la largeur du conteneur
- Sur les écrans jusqu'à 480 pixels, les images occupent toute la largeur du conteneur
10.3 Mise en page complexe et réactive avec Flexbox
Créons une mise en page complexe utilisant Flexbox, qui comprend un en-tête, une barre latérale, un contenu principal et un pied de page, s'adaptant à différentes tailles d'écrans :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Flexbox Layout</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
aside {
background-color: #ccc;
padding: 20px;
}
@media (min-width: 768px) {
main {
flex-direction: row;
}
.content {
flex: 3;
}
aside {
flex: 1;
}
}
</style>
</head>
<body>
<header>En-tête</header>
<main>
<aside>Barre latérale</aside>
<div class="content">Contenu Principal</div>
</main>
<footer>Pied de page</footer>
</body>
</html>
Explication :
- Sur les petits écrans, la mise en page se compose d'un en-tête, d'un contenu principal, d'une barre latérale et d'un pied de page, disposés verticalement
- Sur les écrans de 768 pixels et plus, le contenu principal et la barre latérale sont disposés horizontalement
GO TO FULL VERSION