Pourquoi Flexbox : guide complet ?
Le Flexbox est un module CSS qui a été introduit en 2012 avec la spécification CSS Flexible Box Layout Module Level 1. C'est une technologie très puissante et flexible pour le layout de vos pages web, permettant des arrangements complexes sans avoir besoin d'ajouter beaucoup de code ou de manipuler les marges et paddings.
Un cas d'utilisation concret du Flexbox est l'affichage d'une barre de navigation où vous avez besoin de positionner des éléments en ligne (horizontalement) tout en gardant un certain espace entre eux. Avec le Flexbox, c'est une tâche simple qui peut être réalisée avec quelques lignes de code.
Prerequis
- Connaissance de base du HTML et CSS.
- Un éditeur de texte comme Visual Studio Code ou Sublime Text.
- Pas besoin d'installer quoi que ce soit pour utiliser le Flexbox, car il est intégré dans toutes les versions récentes de navigateurs web modernes.
Concepts fondamentaux
1. Conteneur et Éléments
Un conteneur flex est un élément qui possède le style display: flex;. Les enfants directs de ce conteneur sont appelés des éléments flex.
.container {
display: flex;
}
.item {
/* Styles pour les éléments flex */
}
2. Orientation
Le Flexbox permet d'aligner les éléments en ligne ou en colonne. C'est le paramètre flex-direction.
.container {
display: flex;
flex-direction: row; /* Par défaut, aligne horizontalement */
}
/* Autres options : column (verticalement), column-reverse et row-reverse */
3. Alignement
Les éléments flex peuvent être alignés horizontalement et verticalement.
Alignement horizontal :
.container {
display: flex;
justify-content: center; /* Centrer les enfants horizontalement */
}
Les autres options sont flex-start, flex-end, space-between, space-around et space-evenly.
Alignement vertical :
.container {
display: flex;
align-items: center; /* Centrer les enfants verticalement */
}
Les autres options sont baseline et stretch (par défaut).
4. Espacement entre les éléments
Vous pouvez ajouter des espaces entre les éléments en utilisant la propriété gap.
.container {
display: flex;
gap: 10px; /* Espace de 10px entre les enfants */
}
5. Flex Grow, Shrink et Basis
Le Flexbox permet aux éléments de s'adapter à différents tailles d'écran.
flex-grow: Définit la quantité d'espace supplémentaire qu'un élément peut utiliser.flex-shrink: Définit la quantité d'espace réduit qu'un élément peut utiliser si le conteneur est trop petit.flex-basis: Définit la taille initiale des éléments avant que l'espace supplémentaire ne soit distribué.
.item {
flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
}
6. Ordre
Vous pouvez changer l'ordre des éléments flex en utilisant la propriété order.
.item {
order: 2; /* L'élément sera le deuxième dans l'ordre final */
}
7. Alignement individuel de chaque élément
Chaque élément flex peut avoir son propre alignement horizontal et vertical.
.item {
justify-self: center; /* Alignement horizontal individuel */
align-self: center; /* Alignement vertical individuel */
}
Mise en pratique : projet fil rouge
Mini-Projet : Un Gestionnaire de Tâches
Nous allons créer un simple gestionnaire de tâches avec le Flexbox.
Étape 1 : Structure HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<input type="text" id="new-task" placeholder="Add a new task">
<button id="add-task">Add Task</button>
</div>
<script src="app.js"></script>
</body>
</html>
Étape 2 : Styles CSS
/* styles.css */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
input[type="text"] {
padding: 8px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 16px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-top: 10px;
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px;
}
li.completed {
text-decoration: line-through;
}
Étape 3 : Script JavaScript
// app.js
document.getElementById('add-task').addEventListener('click', addTask);
document.getElementById('new-task').addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addTask();
}
});
function addTask() {
const taskInput = document.getElementById('new-task');
const taskText = taskInput.value.trim();
if (taskText !== '') {
const taskList = document.getElementById('task-list');
const li = document.createElement('li');
li.textContent = taskText;
li.addEventListener('click', function() {
this.classList.toggle('completed');
});
taskList.appendChild(li);
taskInput.value = '';
}
}
Étape 4 : Structure des Fichiers
index.htmlstyles.cssapp.js
Étape 5 : Commandes à Exécuter
Aucune commande spécifique à exécuter, car c'est un projet simple qui nécessite seulement une structure de fichiers et du code.
Erreurs fréquentes et debugging
Erreur 1 : Conteneur non flexible
## ❌ Mauvais
.container {
display: block; /* Devrait être flex */
}
Correction :
## ✅ Correct
.container {
display: flex;
}
Erreur 2 : Éléments hors conteneur flex
## ❌ Mauvais
.container {
display: flex;
}
.item {
/* Ce style ne s'appliquera pas car .item n'est pas un enfant direct de .container */
}
Correction :
## ✅ Correct
.container {
display: flex;
}
.child-item {
/* Style pour les enfants directs de .container */
}
Erreur 3 : Mauvaise utilisation de flex-grow
## ❌ Mauvais
.item {
flex-grow: '2'; /* Devrait être un nombre */
}
Correction :
## ✅ Correct
.item {
flex-grow: 2;
}
Erreur 4 : Utilisation incorrecte de justify-self
## ❌ Mauvais
.item {
justify-self: 'center'; /* Devrait être une valeur valide */
}
Correction :
## ✅ Correct
.item {
justify-self: center;
}
Erreur 5 : Éléments flex sans contenu
## ❌ Mauvais
.container {
display: flex;
}
.item {
/* Ce style ne s'appliquera pas car .item est vide */
}
Correction :
## ✅ Correct
.container {
display: flex;
}
.item {
content: '';
}
Pour aller plus loin
- Flexbox Grid System: Explorez comment combiner le Flexbox avec un système de grille pour créer des layouts complexes.
- Responsive Design with Flexbox: Apprenez à utiliser le Flexbox pour créer des designs réponsifs qui s'adaptent aux différents écrans.
- Flexbox Alignment and Distribution: En plus de
justify-content, explorez d'autres techniques d'alignement et de distribution telles quealign-items,align-self,flex-grow,flex-shrinketflex-basis.
Défi pratique : Créez un simple layout responsive avec le Flexbox pour un blog. Utilisez différentes propriétés du Flexbox pour aligner les éléments de manière adaptative en fonction des tailles d'écran.