Tutoriel Flexbox – Devenez un pro de la mise en page

Devenez un pro de la mise en page en CSS3 avec ce tutoriel Flexbox.
Apprenez les propriétés de base de flexbox associés à des exercices pour la mise en pratique.

Pour pouvoir réaliser cette mise en page avec flexbox, nous aurons besoin de connaître :
- Qu'est-ce-que flexbox
- Comment fonctionne Flexbox
- Les propriétés de base de Flexbox

 

Flexbox

Flexbox est un modèle de boîte flexibles.
C'est un système d'affichage (display) qui va vous permettre de positionner des éléments parents (container) et éléments enfants (items).
Les différents éléments sont disposés soit en ligne, soit en colonne. C'est un système unidimensionnel.

Grâce à Flexbox, vous pourrez créer des mises en page complexes et professionnelles avec un design adaptatif à toutes tailles d'écran.

 

Fonctionnement de Flexbox

Avec Flexbox, vous allez définir dans votre page des containers à l'intérieur desquels vous allez intégrer des éléments (items).
Le container sera le parent et les items, les enfants.

flexbox container

 

Vos items (vos éléments enfants) vont se positionner sur l'axe principal (main-axis). Celui-ci peut être horizontal ou vertical.
Si votre axe principal est horizontal, votre axe transversal (cross axis) sera vertical et vice-versa.
Avec flexbox, vous avez donc deux axes : l'axe principal nommé main axis et l'axe transversal nommé cross axis.

axes flexbox

 

Prenons l'exemple d'une mise en page basique par défaut. Lorsque vous entourez vos éléments avec des div, le comportement par défaut sera de type block. Chaque élément se positionnera sur une ligne.

block CSS

 

Voici le code de base pour ce rendu avec des éléments de type block. Ouvrez votre éditeur de texte et créez deux fichiers : index.html et style.css.
Tapez le code ci-dessous pour obtenir le rendu de l'image précédente.

See the Pen
Block CSS
by anna (@cds-creation-de-site)
on CodePen.

Les propriétés de base de Flexbox

Passons maintenant à un modèle de boite flexible en utilisant Flexbox.
Pour cela, nous allons attribuer la propriété "display" et lui attribuer la valeur "flex".
A savoir que la propriété "display" définit le type d'affichage pour le rendu d'un élément et la disposition utilisée pour ses éléments fils (source MDN).
"Flex" s'applique toujours à l'élément parent, donc à notre container dans notre fichier CSS.

Testez en ajoutant "display:flex" à votre container dans votre fichier style.css.

.container{
    display:flex;
    width: 800px;
    background-color:rgb(211, 211, 211);
}

RENDU :

display:flex

En mettant la valeur "flex" à votre élément parent (le container), vos éléments enfants se positionnent côte à côte et par défaut à gauche.

 

Positionnement sur l'axe horizontal ou vertical :
La propriété "flex-direction" permet de positionner les éléments sur l'axe principal, horizontalement ou verticalement.

Testez les différentes propriétés ci-dessous avec ce code de base :

See the Pen
flex-direction
by anna (@cds-creation-de-site)
on CodePen.

- flex-direction:row
positionne les éléments sur une ligne (par défaut).

- flex-direction:row-reverse
positionne les éléments sur une ligne en sens inversé.
flex-direction : row

 

-flex-direction: column
Positionne les éléments sur une colonne.

 

- flex-direction: column-reverse
Positionne les éléments sur une colonne en sens inversé.

flex-direction : column

 

 

Le retour à la ligne :
La propriété "flex-wrap" indique si les items restent sur une seule ligne ou s'ils doivent être affichés sur plusieurs lignes avec un retour automatique lorsqu'il n'y a plus de place dans le container.

Par défaut, la propriété "flex-wrap" a comme valeur "no-wrap" (pas de retour à la ligne).
Vous pouvez voir en testant le code ci-dessous que les items sont alignés et le dernier dépasse du container.

See the Pen
flex-wrap
by anna (@cds-creation-de-site)
on CodePen.

Pour pouvoir effectuer un retour à la ligne, nous allons utiliser la valeur "wrap". Ce qui donnera :
flex-wrap Flexbox

 

Testez avec les différentes valeurs ci-dessous :

nowrap : comportement par défaut - pas de retour à la ligne.

wrap : les items vont à la ligne lorsqu'il n'y a plus la place dans la container.

wrap-reverse : les items vont à la ligne, lorsqu'il n'y a plus la place dans le container mais en sens inverse.

 

La propriété "flex-flow"

La propriété "flex-flow" est un raccourci qui va prendre en compte "flex-direction" et "flex-wrap".

Exemple :

flex-flow : row wrap;

Ci-dessus "flex-flow" indique que les items vont se positionner horizontalement et qu'il y aura un retour à la ligne.

 

Nous allons voir dans le tutoriel suivant  le positionnement des items et nous passerons ensuite à des exemples concrets.

Retour en haut