Installer et configurer VSCode

Créer une page HTML avec VSCode

Ajouter du CSS sur une page HTML

Utiliser display flex en CSS

Introduction à JavaScript

HTML/CSS

CSS3

Javascript

### Mais c'est quoi Flexbox au juste ? 🤔

Flexbox, ou CSS Flexible Box Layout, est un modèle de mise en page qui permet de concevoir facilement des structures complexes d'interface utilisateur avec une disposition adaptative. C'est un peu comme un conteneur magique où les éléments enfants peuvent se redimensionner, se réorganiser et s'adapter à différentes tailles d'écrans sans trop d'effort. 🧙‍♂️

### Comment utiliser Flexbox ? 🛠️

Pour commencer à utiliser Flexbox, tu dois d'abord définir un conteneur parent en tant que `flex container`. Ensuite, tous les éléments enfants à l'intérieur de ce conteneur deviennent des `flex items`.

### Le fichier HTML de base 🌐

Pour illustrer ce tutoriel, créons un fichier HTML simple avec une structure de base. Tu peux l'utiliser pour tester les concepts que nous allons aborder.

#### Exemple de fichier `index.html` :

```html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Tutorial</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <header class="header">
        <h1>Bienvenue sur Flexbox Tutorial</h1>
    </header>
    <main class="main-content">
        <section class="flex-container">
            <div class="item">Élément 1</div>
            <div class="item">Élément 2</div>
            <div class="item">Élément 3</div>
        </section>
    </main>
    <footer class="footer">
        <p>Créé avec ❤️ en utilisant Flexbox</p>
    </footer>
</body>
</html>
```

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

### Le CSS de base 🎨

Voici le fichier CSS de base pour commencer à styliser notre page et ajouter Flexbox.

#### Exemple de fichier `style.css` :

```css
/* Style de base */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

/* En-tête */
.header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

/* Conteneur principal */
.main-content {
    padding: 20px;
}

/* Conteneur Flexbox */
.flex-container {
    display: flex; /* Active Flexbox */
    justify-content: space-around; /* Espace égal entre les éléments */
    align-items: center; /* Centre les éléments verticalement */
    background-color: #eee;
    padding: 20px;
    border-radius: 10px;
}

/* Éléments Flexbox */
.item {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    flex: 1; /* Les éléments prennent tous la même largeur */
    margin: 0 10px;
}

/* Pied de page */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}
```

### Démystifions Flexbox 🧩

#### 1. **`display: flex;`** 💡

Pour transformer un conteneur en un flex container, tu appliques `display: flex;`. Tous les éléments enfants deviennent alors des flex items.

```css
.flex-container {
    display: flex;
}
```

#### 2. **`justify-content`** 🎯

Ce style permet de définir comment les éléments sont alignés horizontalement. Les valeurs les plus courantes sont :

- `flex-start` : Les éléments sont alignés au début du conteneur.
- `flex-end` : Les éléments sont alignés à la fin du conteneur.
- `center` : Les éléments sont centrés dans le conteneur.
- `space-between` : Espace égal entre les éléments, le premier et le dernier étant collés aux bords.
- `space-around` : Espace égal autour de chaque élément.

```css
.flex-container {
    justify-content: space-around; /* Espace égal autour des éléments */
}
```

#### 3. **`align-items`** 🎯

Contrôle l'alignement vertical des éléments à l'intérieur du conteneur :

- `stretch` : Par défaut, les éléments s'étendent pour remplir le conteneur.
- `flex-start` : Les éléments sont alignés en haut du conteneur.
- `flex-end` : Les éléments sont alignés en bas du conteneur.
- `center` : Les éléments sont centrés verticalement.

```css
.flex-container {
    align-items: center; /* Centre les éléments verticalement */
}
```

#### 4. **`flex-direction`** ➡️⬇️

Définit la direction principale des éléments flex :

- `row` : Direction par défaut, les éléments sont alignés horizontalement.
- `row-reverse` : Les éléments sont alignés horizontalement, mais dans l'ordre inverse.
- `column` : Les éléments sont alignés verticalement.
- `column-reverse` : Les éléments sont alignés verticalement, mais dans l'ordre inverse.

```css
.flex-container {
    flex-direction: row; /* Par défaut, les éléments sont alignés en ligne */
}
```

#### 5. **`flex-wrap`** 📦

Contrôle si les éléments doivent rester sur une seule ligne ou peuvent être répartis sur plusieurs lignes :

- `nowrap` : Par défaut, les éléments ne se répartissent pas sur plusieurs lignes.
- `wrap` : Les éléments passent à la ligne suivante si nécessaire.
- `wrap-reverse` : Comme `wrap`, mais dans l'ordre inverse.

```css
.flex-container {
    flex-wrap: wrap; /* Les éléments se répartissent sur plusieurs lignes si nécessaire */
}
```

### Conclusion 🎉

Voilà, tu as maintenant une bonne base pour commencer à utiliser Flexbox dans tes projets ! Flexbox est un outil très puissant pour créer des mises en page flexibles et réactives. Amuse-toi à expérimenter avec ces propriétés pour voir comment elles affectent la disposition de tes éléments. 💪

### Récapitulatif des concepts clés 📝

- **Flexbox** : Modèle de mise en page pour créer des interfaces flexibles.
- **Conteneur Flex** : Déclaré avec `display: flex;`.
- **Items Flex** : Éléments enfants d'un conteneur flex, pouvant être alignés et distribués selon plusieurs axes.
- **Propriétés principales** :
    - `justify-content` : Alignement horizontal.
    - `align-items` : Alignement vertical.
    - `flex-direction` : Direction principale des éléments.
    - `flex-wrap` : Contrôle du passage des éléments sur plusieurs lignes.

Tu es maintenant armé pour créer des interfaces web flexibles et élégantes ! 🚀

Si tu veux aller plus loin, n'hésite pas à consulter la [documentation officielle de Flexbox](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) pour découvrir encore plus de fonctionnalités et d'astuces. 🎓

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

Ce tutoriel va vous guider pas à pas pour que vous compreniez tous les concepts clés du développement web. À la fin de cette formation, vous serez capable de maîtriser HTML, CSS, JavaScript et bien plus encore.