Le display Flex en CSS

Le 'Flex' facilite le placement des objets, qui se fait de manière plus intuitive et plus facile. C'est la plus récente des propriétés CSS du module display.

On lui distingue 4 propriétés possibles :

• La distribution,
• Les alignements,
• L'ordonnancement,
• La gestion des espaces.

Le module flexbox est reconnu par la plupart des navigateurs (en cas de doute, la vérification est possible grâce à ce site.

Distribution et axe principal

Distribution (flex-direction)

La distribution permet de gérer l'affichage horizontal ou vertical des éléments. Elle peut être définie par ces propriétés :

• row : distribution horizontale (propriété par défaut);
• row-reverse : distribution horizontale inversée;
• column : distribution verticale;
• column-reverse : distribution verticale inversée.

Axe principal (flex-wrap)

Le flex-wrap permet quant à lui de définir si des éléments sont sur une seule ligne ou sur une colonne selon l'axe principal.

• nowrap : les éléments ne passent pas à la ligne (propriété par défaut);
• wrap : les éléments passent à la ligne dans le sens de la lecture;
• wrap-reverse : les éléments passent à la ligne dans le sens inverse.

    #exempleDistribution{
        height : auto;
        overflow : hidden;
        border : 0.5vw solid grey;
        flex-direction : 
        flex-wrap :  
    }

Il existe aussi une propriété raccourcie : flex-flow, qui a la particularité de regrouper flex-direction et flex-wrap.
Exemple : flex-flow: row-reverse wrap;
Dans ce cas, on place d'abord la propriété gérant la flex-direction puis celle gérant le flex-wrap.

Alignements:

Deux propriétés permettent de gérer l'alignement et le centrage avec deux axes: l'axe principal (qui est géré via la propriété justify-content) et l'axe secondaire (qui est géré par align-items).

Justify-content (axe principal)

L'axe de lecture principal est défini par ces propriétés :

• flex-start: les éléments sont regroupés au début, dans le sens de lecture (propriété par défaut);
• flex-end: positionne les éléments à la fin du sens de lecture;
• center: positionne les éléments au centre;
• space-between: les éléments sont répartis de manière égale sur la ligne;
• space-around: même procédé que "space-between" excepté qu'il laisse le même espacement entre chaque éléments.

    #exempleJustify {
        width :  50vw;
        border :  0.5vw solid grey;
        justify-content : 
    }
              

Align-items (axe secondaire)

La propriété align-items permet de définir la façon dont les éléments sont disposés sur l'axe transversal.

• flex-start : le premier bord (ou le début) des éléments est placé au début de la ligne transversale;
• flex-end : le dernier bord (fin) des éléments est placé à la fin de la ligne transversale;
• center : positionne les éléments au centre de la ligne transversale;
• baseline : les éléments sont répartis de manière à ce que la ligne de base s'aligne;
• stretch : étire les éléments dans l'espace disponible (le conteneur).

    #exempleAlign  {
        width :  30vw;
        height :  40vh;
        border :  0.5vw solid grey;
        flex-direction :  column;
        align-items : : 
    }
            

Point sur la propriété Align-self : elle permet de supplanter la valeur d'align-items pour un ou plusieurs éléments spécifiques. Align-self utilise les mêmes valeurs qu'align-items.

Ordonnancement

L'ordonnancement permet de réordonner les éléments de façon indépendante avec la propriété "order".

Celle-ci s'applique aux flex-items avec des valeurs numériques.
La propriété order s'écrit comme suit : order: (nombre entier)

    #un{order : 1;}
    #deux{order : 2;}
    #trois{order : 3;}
    #quatre{order : 4;}
    #cinq{order : 5;}

Flexibilité

La flexibilité est le fondement même du display Flex et cela se fait grâce à la propriété flex.

La propriété flex est un raccourci de trois propriétés :

• flex-grow : capacité pour un élément de s'étirer dans l'espace restant;
• flex-shrink : capacité pour un élément de se contracter si nécessaire;
• flex-basis : taille initiale des éléments avant que l'espace ne soit distribué.

Ressources

• Le livre de Raphaël Goetter (d'Alsacréations): pour encore mieux comprendre Flexbox
• Grafikart : pour comprendre la base de Flexbox en video
• OpenClassrooms : pour comprendre la base de Flexbox en video (bis repetita)
• CSS-Tricks - Flexbox : for a Complete Guide to Flexbox (again and again and again)
• Kenan Yusuf : for an almost complete guide to flexbox, without flexbox (still again...)

Et pour aller plus loin...

• FlexboxFroggy : pour s'exercer en jouant (avec des grenouilles trop mignonnes)
• Bulma : un framework basé sur Flexbox
• Grillades : un framework également basé sur Flexbox, mais 100% français (et alsacien)
• Flexbox, rêve ou cauchemar ? : parce qu'il est toujours bon de remettre en question ce que l'on fait