Display Flex et Grid CSS
Apprendre à structurer son site avec CSS.
« En mode design.«
Au coeur du Web Design
Cette leçon plonge dans le cœur du CSS pour révéler le fonctionnement interne du Box Model et explorer les subtilités du positionnement des éléments.
Ces deux concepts nous permettrons de créer des sites avec des mises en forme complexes.
Le FlexBox en Détail
Flexbox, ou la Flexible Box Layout, est un outil de mise en page en CSS qui nous permet de disposer des éléments dans un conteneur de manière prévisible lorsqu’on travaille avec différentes tailles d’écran.
Flexbox est idéal pour les dispositions linéaires (en ligne ou en colonne)
Flex Container : C’est l’élément parent. En définissant display: flex; sur cet élément, tous ses enfants directs deviennent des items flex.
Flex Item : Chaque enfant direct d’un flex container est un flex item. Les propriétés spécifiques à Flexbox peuvent être appliquées à ces items.
Flex Direction : flex-direction définit l’orientation des items dans le conteneur, soit en ligne (row), soit en colonne (column).
Justify Content : Cette propriété aligne les items le long de l’axe principal et peut être utilisée pour répartir l’espace extra (si disponible) entre les items.
Align Items : Permet d’aligner les items le long de l’axe transversal.
Flex Wrap : Permet aux items de passer à la ligne suivante si l’espace est insuffisant sur l’axe principal.
Le FlexBox en Action
Imaginons que nous voulons créer un en-tête avec un logo à gauche, un titre au centre et une navigation à droite.
<header class="header">
<div class="logo">Logo</div>
<h1>Titre du Site</h1>
<nav>
<ul class="navigation">
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
</ul>
</nav>
</header>.header {
display: flex;
justify-content: space-between;
align-items: center;
}Dans cet exemple, justify-content: space-between; distribue l’espace restant également entre les items, plaçant le premier item au début, le dernier à la fin, et l’espace restant entre eux. align-items: center; aligne les items au centre de l’axe transversal.
Le Grid CSS en Détail
CSS Grid Layout est un système bidimensionnel pour la mise en page.
Il permet de positionner les éléments dans une grille flexible avec des colonnes et des lignes.
- Grid Container : En définissant display: grid; sur un élément, vous le transformez en grid container et ses enfants directs deviennent des grid items.
- Grid Template Columns / Rows : Ces propriétés définissent la structure de la grille en termes de colonnes et de rangées.
- Gap : Définit l’espace entre les colonnes (column-gap) et les rangées (row-gap).
- Grid Area : Permet de placer les items dans la grille et de les étendre sur plusieurs colonnes ou rangées.
Le Grid CSS en Action
Si nous voulons diviser une section de contenu en deux colonnes égales :
<section class="grid-container">
<div>Contenu 1</div>
<div>Contenu 2</div>
</section>.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px; }grid-template-columns: 1fr 1fr; crée une grille avec deux colonnes de même taille.
gap: 20px; définit un espace de 20px entre les colonnes.
En combinant ces deux outils, Flexbox et Grid, vous pouvez créer des layouts complexes et réactifs de manière intuitive et efficace.
Nous avons structuré notre en-tête et organisé notre section en deux colonnes.
Cependant, si vous redimensionnez votre navigateur, vous remarquerez que notre layout n’est pas encore responsive. Cela signifie qu’il ne s’adapte pas automatiquement à différentes tailles d’écran.
Rendez-vous dans la prochaine leçon !
La suite ?
Dans la prochaine leçon, nous introduirons le Design Responsive et les Media Queries.
Ces concepts nous permettront de rendre notre page adaptable à n’importe quelle taille d’écran, garantissant une expérience utilisateur optimale sur des dispositifs mobiles, des tablettes et des écrans de bureau.