3.1 Flexbox
Créer des layouts flexibles utilisant Flexbox et Grid est une technique clé pour le développement de sites web réactifs modernes. Ces technos permettent de gérer facilement l'agencement des éléments sur une page, les rendant adaptables à différents formats d'écran et appareils.
Flexbox (Flexible Box Layout Module) est conçu pour l'agencement unidimensionnel des éléments (soit en ligne, soit en colonne). Flexbox simplifie la création de layouts flexibles et réactifs.
Concepts clés de Flexbox :
- Flex-container : élément auquel est appliquée la propriété
display: flex - Flex-éléments : éléments enfants d'un flex-container, disposés à l'intérieur
Propriétés Flexbox
Flex-container :
display: flex: définit l'élément comme un container flexflex-direction: établit la direction de disposition des flex-éléments (row,column,row-reverse,column-reverse)justify-content: contrôle l'alignement des flex-éléments sur l'axe principal (flex-start,flex-end,center,space-between,space-around)align-items: contrôle l'alignement des flex-éléments sur l'axe transversal (stretch,flex-start,flex-end,center,baseline)
Flex-éléments :
flex-grow: détermine la capacité d'un élément à croître s'il y a de l'espace disponibleflex-shrink: détermine la capacité d'un élément à rétrécir s'il y a manque d'espaceflex-basis: définit la taille initiale de l'élément avant la distribution de l'espace disponiblealign-self: redéfinit l'alignement de l'élément sur l'axe transversal, défini dansalign-items
Exemple d'utilisation de Flexbox
Créons un layout avec trois colonnes qui s'adapte à différents formats d'écran:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</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 container comme un flex-container, aligne les éléments avec des espaces égaux entre eux et permet aux éléments de passer à la ligne suivante si l'espace est insuffisant -
.flex-item: flex-éléments qui occupent un espace égal, ont une largeur minimale de 200px et sont répartis uniformément à l'intérieur du container
3.2 CSS Grid
Le CSS Grid Layout est un système de mise en page bidimensionnel qui permet de créer des layouts complexes en utilisant des lignes et des colonnes.
Concepts clés du CSS Grid :
- Grid-container : élément auquel est appliquée la propriété
display: grid - Grid-éléments : éléments enfants d'un grid-container, disposés dans la grille
Propriétés du CSS Grid
Grid-container :
display: grid: définit l'élément comme un grid-containergrid-template-columns: établit le nombre et la taille des colonnes dans la grillegrid-template-rows: établit le nombre et la taille des lignes dans la grillegap: contrôle les espaces entre les lignes et les colonnesjustify-items: contrôle l'alignement horizontal des grid-élémentsalign-items: contrôle l'alignement vertical des grid-éléments
grid-column: détermine combien de colonnes un élément va s'étendregrid-row: détermine combien de lignes un élément va s'étendrejustify-self: redéfinit l'alignement horizontal de l'élémentalign-self: redéfinit l'alignement vertical de l'élément
Grid-éléments :
Exemple d'utilisation du CSS Grid
Créons un layout avec trois colonnes et deux lignes qui s'adapte aux différents formats d'écran.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Élément 1</div>
<div class="grid-item">Élément 2</div>
<div class="grid-item">Élément 3</div>
<div class="grid-item">Élément 4</div>
<div class="grid-item">Élément 5</div>
<div class="grid-item">Élément 6</div>
</div>
</body>
</html>
Explication du code :
.grid-container: définit le container comme un grid-container avec trois colonnes et deux lignes, chaque élément occupant un espace égal.grid-item: grid-éléments avec des marges et un fond uniformes
GO TO FULL VERSION