qu’est-ce que le css flexbox?
CSS Flexbox (Flexible Box Layout) permet la réalisation d'une mise en page unidimensionnelle (un seul axe à la fois: la ligne ou la colonne). On dit qu'il est content-first
(c'est le contenu qui dicte la mise en page).
Son usage se distinguera dans la création de menus de navigation, de barres d'outils, de cartes de produits et le centrage d'éléments.
Sa force est la fluidité des éléments qui s'adaptent très facilement à leur contenu.
Voyons, sur les deux chapitres qui suivent (qu’est-ce que le css flexbox? et qu’est-ce que le css grid layout?) un exemple simple pour illustrer la différence entre une disposition sur deux axes et une disposition sur un seul axe.
Ci-dessous, l'exemple pour une disposition sur un seul axe:
côté html
<div class="enveloppe-flex">
<div>un</div>
<div>deux</div>
<div>trois</div>
<div>quatre</div>
<div>cinq</div>
</div>
côté css
.enveloppe-flex {
width: 600px;
display: flex; /* chaque élément sera empilé dans une rangée horizontale */
flex-wrap: wrap; /* les éléments qui dépassent du conteneur passseront à la ligne */
}
.enveloppe-flex > div {
flex: 1 1 150px; /* flex-grow = facteur d'agrandissement d'un élément flexible selon sa dimension principale + flex-shrink = facteur de rétrécissement d'un élément flexible selon sa dimension principale + flex-basis = base de flexibilité utilisée comme taille initiale principale pour un élément flexible */
background-color: #d5bac5;
border: 2px solid #968089;
padding: 1em;
}
côté navigateur
un
deux
trois
quatre
cinq
Contexte et traduction de l'exemple: ici, on utilise un conteneur flexible (avec la class .enveloppe-flex) pour organiser un ensemble de boîtes. Ce conteneur contient cinq objets fils dont les propriétés (raccourcies en une seule: flex) leurs permettent d'être agrandis (flex-grow) et/ou rétrécis (flex-shrink) avec une base fixe (flex-basis) de 150 pixels.
On convoque aussi la propriété flex-wrap (les éléments flexibles seront-ils renvoyés à la ligne ou non?) avec la valeur wrap (donc oui, les éléments flexibles seront disposés sur plusieurs lignes), afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver la valeur de base flex-basis (de 150 pixels).
Constat: on remarque, ici, que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.
On se demande alors comment faire pour aligner ces éléments… c'est là qu'intervient la méthode pour une disposition bidimensionnelle afin de contrôler l'alignement des lignes et des colonnes : css grid layout (exemple ci-dessous).
En pratique: testez l'exemple de css flexbox, à manipuler en ligne…
Pour en découvrir davantage sur la méthode CSS Flexbox, suivez ce lien…
qu’est-ce que le css grid layout?
CSS Grid Layout permet la réalisation d'une mise en page bidimensionnelle (les deux axes à la fois: la ligne et la colonne simultanément). On définit d'abord une grille (un squelette), puis on place les éléments dedans. On dit qu'il est layout-first
(layout: mise en page en anglais).
Son usage se distinguera dans la structuration complète d'une page html (header, sidebar, main, footer), mais aussi sur la création d'une galerie d'images complexe, d'un tableau de bord avec plusieurs zones.
Sa force réside dans le contrôle total de l'espace de la page. Sa philosophie d'usage est en accord avec la problématique éditoriale et peut répondre à: je veux que cet élément occupe deux colonnes et trois lignes
.
Voyons, sur le chapitre qui suit et le précédent (qu’est-ce que le css grid layout? et qu’est-ce que le css flexbox?) un exemple simple pour illustrer la différence entre une disposition sur deux axes et une disposition sur un seul axe.
Ci-dessous, l'exemple pour une disposition sur deux axes:
côté html
<div class="enveloppe-grid">
<div>un</div>
<div>deux</div>
<div>trois</div>
<div>quatre</div>
<div>cinq</div>
</div>
côté css
.enveloppe-grid {
width: 600px;
display: grid; /* chaque élément sera composé dans une grille de composition */
grid-template-columns: repeat(3, 1fr); /* fr représente l'unité de fraction de l'espace disponible. Ici la grille comporte trois colonnes : 1fr 1fr 1fr, chaque colonne occupera une fraction du conteneur de la grille, soit environ 33,33% chacune. Ci-après, une autre forme d'écriture : grid-template-columns: repeat(3, 1fr); */
background-color: #d5bac5;
border: 2px solid #968089;
padding: 1em;
}
côté navigateur
un
deux
trois
quatre
cinq
Contexte et traduction de l'exemple: dans cet exemple, on crée la même disposition que précédemment en utilisant la grille css. Ici, on compose trois pistes 1fr dans la largeur du conteneur (avec la class .enveloppe-grid). Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposent eux-mêmes dans chaque cellule formée par la grille.
Constat: on peut alors constater que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.
En pratique: testez l'exemple de css grid layout, à manipuler en ligne…
Pour en découvrir davantage sur la méthode CSS Grid Layout, suivez ce lien…
