Flexbox

Flexbox est un ensemble de déclarations CSS qui nous permettent de positionner plus facilement les éléments sur une page web et de créer des mises en page flexibles. L'idée du modèle Flexbox est apparue un peu avant 2008, et le premier brouillon de travail a été publié le 23 juillet 2009. Au fil des années suivantes, le modèle Flexbox a été développé et adapté aux besoins des designers et des développeurs, jusqu'en octobre 2017 où le dernier brouillon de travail du modèle Flexbox a été publié.

Flexbox introduit de nouvelles propriétés CSS qui permettent de contrôler la disposition des éléments dans une dimension : le long de l'axe principal et de l'axe secondaire. Les principales propriétés de Flexbox sont :

• display: flex - Indique que les éléments enfants doivent utiliser le modèle Flexbox.
• flex-direction - Indique la direction dans laquelle les éléments seront disposés : sur une ligne horizontale (row), sur une ligne verticale (column), ou inversées en ligne horizontale (row-reverse) ou verticale (column-reverse).
• justify-content - Indique comment les éléments sont répartis le long de l'axe principal, c'est-à-dire horizontalement. On peut répartir les éléments de façon homogène, les centrer, les aligner à gauche ou à droite, etc.
• align-items - Indique comment les éléments sont répartis le long de l'axe secondaire, c'est-à-dire verticalement. On peut centrer les éléments, les aligner en haut, en bas, etc.
• flex-grow, flex-shrink, flex-basis - Définissent la flexibilité et la façon dont les éléments s'adaptent lorsqu'il n'y a pas assez de place pour les afficher sur une ligne.
• align-self - Indique l'alignement d'un seul élément le long de l'axe secondaire, indépendamment des autres éléments.

Le modèle Flexbox est un outil très utile pour concevoir des mises en page réactives et gérer la disposition des éléments à l'intérieur de conteneurs précis. Grâce à la flexibilité et aux possibilités variées qu'il offre, Flexbox facilite la création de mises en page web uniques et esthétiques. Pendant de nombreuses années, la mise en forme se faisait à l'aide des propriétés float et position. Les développeurs plus anciens se souviennent des mises en page basées sur des tableaux. Mais elles avaient leurs problèmes et la mise en forme était parfois frustrante. La déclaration display: flex; vient à la rescousse :

1section {
2  display: flex;
3}

Comme tu peux le voir ci-dessus, la déclaration display: flex; s'appliquera au sélecteur de l'élément section. Dans notre cas, la section sera le parent de trois éléments portant la classe box :

1<section>
2  <div class="box">Élément 1</div>
3  <div class="box">Élément 2</div>
4  <div class="box">Élément 3</div>
5</section>

Dès le départ, on peut voir que les éléments seront placés les uns à côté des autres.

Un conteneur flex est la fondation d'une pyramide, et les éléments flex sont les pierres avec lesquelles la pyramide est bâtie. Tout comme les pierres peuvent être disposées de différentes manières, les éléments flex peuvent être organisés à l'aide de diverses propriétés comme justify-content ou align-items.

Tu en apprendras plus dans les prochains parchemins de la connaissance, et à la fin du module, un mini-jeu spécial t'attend (https://flexboxfroggy.com/#en).

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Flexbox - Conteneur flex</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Flexbox - Conteneur Flex</h1>
12
13        <section class="demo-section">
14            <h2>Sans Flexbox (par défaut)</h2>
15            <div class="no-flex">
16                <div class="item">Pierre 1</div>
17                <div class="item">Pierre 2</div>
18                <div class="item">Pierre 3</div>
19            </div>
20            <p>Les éléments de type bloc s'empilent les uns sous les autres.</p>
21        </section>
22
23        <section class="demo-section">
24            <h2>Avec Flexbox (display: flex)</h2>
25            <!-- Ajoute display: flex à la classe .flex-container dans style.css -->
26            <div class="flex-container">
27                <div class="item">Pierre 1</div>
28                <div class="item">Pierre 2</div>
29                <div class="item">Pierre 3</div>
30            </div>
31            <p>Après avoir ajouté display: flex, les éléments s'alignent côte à côte.</p>
32        </section>
33
34        <section class="demo-section">
35            <h2>Exercice : galerie égyptienne</h2>
36            <div class="gallery">
37                <div class="item gallery-item">Hiéroglyphe A</div>
38                <div class="item gallery-item">Hiéroglyphe B</div>
39                <div class="item gallery-item">Hiéroglyphe C</div>
40                <div class="item gallery-item">Hiéroglyphe D</div>
41            </div>
42            <p>Essaie d'ajouter display: flex à la classe .gallery dans le CSS !</p>
43        </section>
44    </div>
45</body>
46</html>