## Cours numéro 2 : Mise en Page Avancée avec Flexbox et Grid
### Objectifs
1. Comprendre et utiliser Flexbox pour créer des mises en page flexibles.
2. Comprendre et utiliser CSS Grid pour créer des mises en page complexes.
3. Pratiquer la création de mises en page réactives (responsive).
### Partie 1 : Introduction à Flexbox
#### Concept de Flexbox
Flexbox (Flexible Box) est un module de mise en page CSS qui rend la création de
mises en page dynamiques plus facile et plus efficace. Voici comment l'utiliser :
#### Conteneur Flex
Pour commencer à utiliser Flexbox, vous devez définir un conteneur en tant que
boîte flexible (`display: flex`).
```css
.container {
display: flex;
background-color: #f1f1f1;
}
```
#### Alignement de base avec Flexbox
Flexbox offre de nombreuses propriétés pour aligner les éléments :
- `justify-content` : Aligne les éléments horizontalement.
- `align-items` : Aligne les éléments verticalement.
- `flex-direction` : Définit la direction des éléments (ligne ou colonne).
Exemple :
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
}
```
#### HTML
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
### Partie 2 : Introduction à CSS Grid
#### Concept de CSS Grid
CSS Grid est un système de mise en page bidimensionnel. Il permet de créer des
mises en page en lignes et en colonnes. Voici comment l'utiliser :
#### Conteneur Grid
Pour commencer à utiliser CSS Grid, définissez un conteneur en tant que grille
(`display: grid`).
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #f1f1f1;
padding: 10px;
}
```
#### Alignement de base avec CSS Grid
- `grid-template-columns` : Définit la structure des colonnes.
- `gap` : Définit l'espacement entre les éléments.
Exemple :
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
}
```
#### HTML
```html
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
```
### Partie 3 : Création d'une mise en page flexible avec Flexbox
#### HTML
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mise en Page Flexbox</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header class="flex-header">
<div class="logo">Logo</div>
<nav class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>
<main class="flex-main">
<div class="content">
<h1>Bienvenue sur notre site</h1>
<p>Ceci est une démonstration de mise en page avec Flexbox.</p>
</div>
</main>
<footer class="flex-footer">
<p>© 2024 Flexbox Example</p>
</footer>
</body>
</html>
```
#### CSS
```css
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
}
.flex-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 20px;
}
.flex-header .logo {
font-size: 24px;
}
.flex-header .menu a {
color: white;
text-decoration: none;
margin: 0 10px;
}
.flex-main {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
background-color: #e2e2e2;
}
.flex-footer {
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: white;
padding: 10px;
}
```
### Partie 4 : Création d'une mise en page complexe avec CSS Grid
#### HTML
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mise en Page CSS Grid</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header class="grid-header">
<div class="logo">Logo</div>
<nav class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>
<main class="grid-main">
<div class="sidebar">Sidebar</div>
<div class="content">
<h1>Bienvenue sur notre site</h1>
<p>Ceci est une démonstration de mise en page avec CSS Grid.</p>
</div>
<div class="aside">Aside</div>
</main>
<footer class="grid-footer">
<p>© 2024 CSS Grid Example</p>
</footer>
</body>
</html>
```
#### CSS
```css
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
}
.grid-header, .grid-footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.grid-main {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
gap: 10px;
padding: 20px;
}
.sidebar, .content, .aside {
background-color: #e2e2e2;
padding: 20px;
}
.grid-header .logo {
font-size: 24px;
}
.grid-header .menu a {
color: white;
text-decoration: none;
margin: 0 10px;
}
.grid-footer {
text-align: center;
}
```
### Partie 5 : Résumé et Pratique
1. **Flexbox** : Utilisez Flexbox pour créer des mises en page flexibles et
dynamiques.
2. **CSS Grid** : Utilisez CSS Grid pour créer des mises en page complexes en deux
dimensions.
3. **Responsive Design** : Assurez-vous que vos mises en page sont réactives et
s'adaptent aux différentes tailles d'écran.
#### Exercice Pratique
Créez une page web en utilisant à la fois Flexbox et CSS Grid pour organiser
différents éléments de manière fluide et responsive. Essayez de personnaliser les
couleurs, les marges, les paddings et les contenus pour obtenir un design unique.
---
Voilà pour le cours numéro 2 ! Continuez à pratiquer et à explorer Flexbox et CSS
Grid pour améliorer vos compétences en mise en page. Le prochain cours couvrira des
techniques de design plus avancées et des concepts de développement web.
