Live Coding - la Flexbox dans tous ses états

Série : Live Coding

Fichiers : https://github.com/NouvelleTechno

Aujourd'hui avait lieu la 1ère session de Live Coding sur le thème "La Flexbox dans tous ses états".

Durant cette session a été abordé le sujet de la flexbox css et de son utilisation.

Les fichiers source de cette vidéo sont disponibles sur le Github de Nouvelle-Techno.fr.

La flexbox

La flexbox est une méthode de positionnement des éléments HTML par l'intermédiaire de propriétés CSS permettant de modifier le comportement tant horizontal que vertical de ces éléments les uns par rapport aux autres.

Il convient avant toute chose de préciser que la flexbox fait intervenir 2 élements html. Un parent (conteneur) et ses enfants directs.

Nous commencerons donc par structurer notre html afin d'avoir ce conteneur.

<section class="container">

    <div id="colonne-1">Colonne 1 : Cette colonne contient plus de texte</div>

    <div id="colonne-2">Colonne 2</div>

    <div id="colonne-3">Colonne 3</div>

    <div id="colonne-4">Colonne 4</div>

    <div id="colonne-5">Colonne 5</div>

</section>

Les propriétés du conteneur

Le conteneur pourra se voir affecter différentes propriétés pour modifier le comportement des éléments enfant.

display:flex

Si nous écrivons le CSS suivant

.container{

    display: flex;

}

Nous activons la flexbox sur le conteneur. L'effet immédiat de cette propriété est de positionner les enfants du conteneur en colonnes qui se positionnent côte à côte et adaptent leur largeur à leur contenu.

justify-content

Nous pouvons ensuite poritionner les colonnes par rapport à leur conteneur en utilisant la propriété "justify-content".

.container{

    display: flex;

    justify-content: center; 

}

Cette propriété va pouvoir prendre différentes valeurs :

• center : les colonnes se positionnent au centre de leur conteneur

• left : les colonnes se positionnent à gauche de leur conteneur

• right : les colonnes se positionnent à droite de leur conteneur

• space-around : les colonnes se répartissent uniformément à l'intérieur de leur conteneur avec des marges divisées par 2 aux extrémités

• space-between : les colonnes se répartissent uniformément à l'intérieur de leur conteneur sans marges aux extrémités

• space-evenly : les colonnes se répartissent uniformément à l'intérieur de leur conteneur avec des marges identiques aux extrémités

• Les valeurs start et end existent également. start équivaut à left pour les langues à écriture gauche vers droite (LTR), et à right pour les langues à écriture droite vers gauche (RTL). C'est l'inverse pour end.

align-items

La propriété align-items servira à répartir verticalement les éléments dans leur conteneur.

.container{

    display: flex;

    justify-content: space-evenly

    align-items: center;

}

Cette propriété va pouvoir prendre différentes valeurs :

• center : les colonnes se positionnent au centre de leur conteneur

• stretch : les colonnes s'étirent sur la hauteur de leur conteneur

• flex-start : les colonnes se positionnent en haut de leur conteneur

• flex-end : les colonnes se positionnent en bas de leur conteneur

align-content

Si nos éléments sont sur plusieurs lignes, nous pourrons les répartir verticalement en utilisant la propriété align-content.

.container{

    display: flex;

    justify-content: space-evenly;

    align-content: start;

}

Cette propriété fonctionne comme "justify-content" mais verticalement.

Elle va pouvoir prendre différentes valeurs :

• center : les colonnes se positionnent au centre de leur conteneur

• flex-start : les colonnes se positionnent en haut de leur conteneur

• flex-end : les colonnes se positionnent en bas de leur conteneur

• space-around : les colonnes se répartissent uniformément à l'intérieur de leur conteneur avec des marges divisées par 2 aux extrémités supérieure et inférieure

• space-between : les colonnes se répartissent uniformément à l'intérieur de leur conteneur sans marges aux extrémités

flex-wrap

Si vos colonnes sont amenées à occuper plus d'espace que leur conteneur, la propriété "flex-wrap" pourra vous être utile.

.container{

    display: flex;

    flex-wrap: wrap;

}

Elle pourra prendre 3 valeurs :

• nowrap : valeur par défaut, les éléments se mettent sur une seule ligne
• wrap : quand la limite du conteneur est atteinte, les éléments suivants se positionnent sur une nouvelle ligne en dessous de la précédente
• wrap-reverse : quand la limite du conteneur est atteinte, les éléments suivants se positionnent sur une nouvelle ligne au dessus de la précédente

flex-direction

Vous pouvez définir la direction de votre flexbox par l'intermédiaire de la propriété "flex-direction".

.container{

    display: flex;

    flex-direction: row;

}

Cette propriéte peut prendre 4 valeurs principales :

• row : Les éléments se positionnent sur une ligne, dans l'ordre du html

• row-reverse : Les éléments se positionnent sur une ligne, dans l'ordre inverse du html

• column : Les éléments se positionnent sur une colonne, dans l'ordre du html

• column-reverse : Les éléments se positionnent sur une colonne, dans l'ordre inverse du html

Les propriétés des éléments (enfants)

order

Il est possible de définir un ordre entre les différents éléments de la flexbox, pour répondre à des contraintes de positionnement en responsive, par exemple.

#colonne-1{

    order: 4;

}

#colonne-2{

    order: 3;

}

Dans l'exemple ci-dessus, la colonne 2 viendra se positionner avant la colonne 1. Des valeurs négatives sont possibles.

flex-grow

Cette propriété va définir le facteur d'agrandissement de l'élément par rapport à l'espace libre. Ainsi, un élément qui aurait la valeur 2 sur cette propriété aura une taille double de celle d'un élément avec la valeur 1 en proportion de l'espace restant.

flex-shrink

Cette propriété va définir le facteur de rétrécissement de l'élément par rapport à l'espace libre. Ainsi, un élément qui aurait la valeur 2 sur cette propriété aura une taille de moitié de celle d'un élément avec la valeur 1 en proportion de l'espace restant.

flex

La propriété flex vous permet de définir en une seule propriété les propriétés "flex-grow", "flex-shrink" et "flex-basis" (à 0 si omis)

Il y a encore d'autres propriétés pour la flexbox mais celles-ci sont les principales.

La grille

La grille est une méthode de positionnement des éléments HTML par l'intermédiaire de propriétés CSS permettant de définir un modèle de lignes et de colonnes sur lesquels se placer.

Comme la flexbox, la grille fait intervenir 2 élements html. Un parent (conteneur) et ses enfants directs.

Nous allons nous baser sur le code html suivant

<section class="grille">

    <article>Article 1</article>

    <article>Article 2</article>

    <article>Article 3</article>

    <article>Article 4</article>

    <article>Article 5</article>

    <article>Article 6</article>

    <article>Article 7</article>

    <article>Article 8</article>

    <article>Article 9</article>

    <article>Article 10</article>

    <article>Article 11</article>

    <article>Article 12</article>

</section>

Les propriétés du conteneur

Le conteneur pourra se voir affecter différentes propriétés pour modifier le comportement des éléments enfant.

display:grid

Si nous écrivons le CSS suivant

.container{

    display: grid;

}

Nous activons la flexbox sur le conteneur. A ce moment, rien ne s'est passé. En effet, il est nécessaire de définir un minimum de propriétés complémentaires.

grid-template-columns

Cette 1ère propriété permet de définir un modèle pour nos colonnes.

Si nous souhaitons avoir 3 colonnes, la 1ère et la 3ème occupant 20% de l'espace, nous définirons la propriété comme ceci

.grille{

    display: grid;

    grid-template-columns: 20% 60% 20%;

}

Ceci aura ce résultat

Nous pouvons utiliser les unités en pixels, en %, mais aussi en fractions.

Ce même résultat peut être obtenu en utilisant cette syntaxe

.grille{

    display: grid;

    grid-template-columns: 1fr 3fr 1fr;

}

Si nous souhaitons 3 colonnes de même taille, nous écrirons l'un des deux codes ci-dessous

/* Ecriture 1 */

.grille{

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

}



/* Ecriture 2 */

.grille{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}

En utilisant "repeat" vous pouvez répéter plusieurs fois (ici 3) la même valeur.

grid-template-rows

Cette propriété permet de définir un modèle pour nos lignes.

Attention, le conteneur doit avoir une hauteur spécifiée pour que celà fonctionne.

Dans cet exemple

.grille{

    height: 250px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: 20% 60% 10% 10%;

}

Nous choisissons la répartition de nos lignes avec des pourcentages pour obtenir le résultat suivant

grid-gap

La propriété "grid-gap" permet de définir l'espacement entre les différents éléments.

Voilà une courte introduction à la flexbox et la grille.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat