11 - Gestion des positions avec FLEX

Partie totalement optionnelle : si vous avez le temps, vous pouvez faire cette activité qui vous permettra de voir comment gérer automatiquement les positionnements des éléments. Sinon, d'autres activités plus loin, un peu plus simples, vous présenterons également comment positionner les éléments précisement. Mais de façon moins automatique. En gros, Flex est bien, vraiment bien mais demande un certain temps d'apprentissage.

Il reste à voir comment placer des éléments sur le côté SI l'écran est assez large.

Et à pouvoir modifier le placement des éléments en fonction de la place disponible sur l'écran de l'utilisateur.

1 - Présentation

Pour faire tout cela, nous allons utiliser les fonctions FLEX. Il s'agit d'un ensemble de propriétés CSS qui permettent d'agencer comme on le désire différents éléments à l'écran. FLEX vient en réalité de FLEXIBLE BOX MODEL : il s'agit donc d'un module qui va gérer les différents élements comme des boîtes qu'on va empiler d'une façon ou d'une autre.

Pour le faire fonctionner, il a besoin de savoir sur quelle zone travailler. Une zone qu'il gère se nomme un CONTENEUR, ou CONTAINER en anglais.

Nous allons créer une page vide que nous allons rapidement remplir avec différents éléments colorés pour bien comprendre les différents agencements que nous allons créer.

01° Créer une page HTML à paritr du code précédent. Pensez à l'encodage UTF-8, à préciser le langage (html) et à supprimer les lignes vides (dans NOTEPAD++ : EDITION - LIGNES - ENLEVER LES LIGNES VIDES.

Nous allons maintenant placer du contenu dans la section. Par exemple de petits carrés contenant des lettres.

02° Modifier le contenu de la balise SECTION.

En lançant la page, vous pourrez constater que c'est très moche. Nous allons donc créer de petites boîtes toutes jolies autour de chaque lettre. Pour cela, nous allons créer une balise DIV identifiée par la class conteneur_type_1 par exemple.

Il nous reste à créer un code CSS pour créer la forme voulue sur tous les paragraphes contenus dans la balise conteneur_type_1:

03° Créer le fichier CSS et modifier le code HTML. Lancer pour observer le résultat.

Vous devriez avoir quelque chose qui ressemble à ceci : LIEN VERS LE VISUEL. Pensez au clic droit pour ouvrir dans un nouvel onglet.

On voit bien le fond gris qui permet de voir clairement la délimitation de la balise conteneur_type_1 : background-color:rgb(200,200,200);.

Le CSS affecte ensuite toutes les balises p contenues dans ce conteneur à l'aide de l'espace entre le nom de la balise et le p : .conteneur_type_1 p.

On y précise :

• la couleur de fond des balises p (le vert fonçé : background-color:rgb(50,50,0);),
• la couleur du texte (le jaune : color:yellow;),
• l'espacement interne de 20 px (padding:20px;),
• la largeur de 50 px (width:50px;),
• le centrage du texte dans l'espace disponible de 50 px (text-align: center;),
• le texte en gras (font-weight: bold;),

Oui, mais les paragraphes restent à la suite verticalement les uns des autres. Nous aimerions bien placer les lettres les unes derrière les autres de façon harmonieuse. Et cela, quelque soit la largeur de l'écran du client. C'est à partir d'ici qu'intervient le FLEX.

Première chose à savoir : pour utiliser FLEX, il faut définir clairement le conteneur des objets que vous voulez placer. Si vous vouliez placer tous les éléments de la section, vous auriez pu, utiliser la balise section. Ici, nous ne voulons gérer avec FLEX que les lettres : cela tombe bien, le conteneur FLEX est déjà créer : il s'agit de la balise conteneur_type_1 !

Il nous reste à signaler que nous voulons utiliser FLEX dans le conteneur conteneur_type_1 avec display : flex. Ensuite, il faut signaler la direction du FLEX : si vous voulez placer les éléments blocks :

• horizontalement (flex-direction: row) ou
• verticalement (flex-direction: column)

04° Modifier le css de la classe conteneur_type_1 pour intégrer FLEX en gestion horizontale.

A partir de maintenant :

• La balise conteneur_type_1 est un CONTENEUR-FLEX.
• Toutes les balises contenues dans le CONTENEUR deviennent automatiquement des BOITES-FLEX qui seront placées en fonction de la façon dont FLEX est configuré. Attention, toutes les balises directement filles du conteneur seront des boites-flex : qu'elles soient block ou inline n'y changent rien. Elles seront gérées de la même manière.

Vous devriez avoir quelque chose qui ressemble à ceci : LIEN VERS LE VISUEL. C'est mieux, mais on ne peut pas dire que ce soit top !

En réalité, comme souvent lorsque cela ne fonctionne pas, c'est simplement que l'ordinateur fait ce qu'on lui demande et pas ce qu'on veut.

Il reste en effet à donner encore une propriété CSS qui par défaut ne fait pas ce qu'on désire ici : il s'agit de la propriété flex-wrap qui permet de dire si on autorise les boîtes FLEX à partir à la ligne.

• Si vous ne voulez pas permettre de passer à la ligne (valeur par défaut): flex-wrap:nowrap;. Attention, comme vous le voyez avec l'exemple de l'alphabet, cela peut inciter les boîtes-flex à s'afficher hors du conteneur.
• Si vous voulez les faire passer à la ligne lorsqu'il n'y a plus de place sur la ligne du conteneur : flex-wrap:wrap;.
• Si vous voulez passer à la ligne en sens inverse : flex-wrap:wrap-reverse;.

05° Modifier le css du conteneur pour gérer le retour à la ligne automatique.

Le visuel avec le wrap : flex-wrap:wrap

Le visuel avec le wrap-reverse : flex-wrap:warp-reverse

Pas mal avec juste 3 lignes de code, n'est-ce pas ?

Oui, oui. Mais, me direz-vous, ce n'est pas joli car les boîtes commençent à gauche. C'est vrai. Alors, comment centrer avec Flex ?

2 - La gestion du centrage sur l'axe principal

En plus de la direction du FLEX (horizontale ici), on peut signifier au navigateur comment on veut placer les différentes boîtes sur l'axe. Il s'agit de la propriété justify-content.

Voici le résultat des 5 valeurs possibles sur un FLEX horizontal et un FLEX vertical :

Cadrage 1/5 des boîtes sur le début du conteneur : justify-content:flex-start.

On voit ainsi que le "début" du conteneur est choisi en fonction de la direction de la flex-direction.

Sur la direction horizontale, le début est la gauche.

Sur la direction verticale, le début est le haut.

Cadrage 2/5 des boîtes sur la fin du conteneur : justify-content:flex-end.

Cadrage 3/5 des boîtes sur le centre du conteneur : justify-content:center.

Cadrage 4/5 des boîtes justifié sur les 2 bords du conteneur : justify-content:space-between.

Cadrage 5/5 des boîtes équitablement reparties dans le conteneur : justify-content:space-around.

06° Modifier le css du conteneur conteneur_type_1 de votre page alphabet pour centrer les lettres à l'écran.

Le visuel avec un justify-content:center : justify-content:center

Comment faire alors pour laisser un espace entre les différentes boîtes ?

Cette fois, le plus simple est de rajouter la propriété margin au css de la balise p du conteneur. Ainsi, on va forcer les boîtes-flex à s'écarter les unes des autres.

Le visuel avec un margin:20px : margin:20px sur les balises p du conteneur

07° Modifier le css des balises p du conteneur pour obtenir le bon résultat.

08° Modifier la taille de la fenètre du navigateur pour vérifier que FLEX gère tout ceci correctement quelque soit la taille disponible.

Si vous avez été voir le code source des tests avec les trois zones rouge, verte et bleue, j'ai utilisé des balises spans pour inscrire aa, bb et cc. Pourquoi ? Premièrement, cela permet de voir clairement que FLEX gère les balises comme des boîtes, inline ou pas inline ne change rien. Deuxièmement, cela permet de se passer des espacements automatiques définis par défaut par le navigateur pour la balise p.

A titre de comparaison, voilà les résultats en utilisant à gauche des spans et à droite des paragraphes.

Cadrage 1/5 des boîtes sur le début du conteneur : justify-content:flex-start.

Comme vous le voyez, le paragraphe possède des marges prédéfinies. Conclusion : utilisez des spans si vous ne voulez pas trop vous compliquer la vie. Autrement, il suffit de rajouter un simple margin:0px de le code du paragraphe et le tour est joué.

A titre de comparaison, à gauche des spans et à droite des paragraphes avec une propriété margin:0px.

Cadrage 1/5 des boîtes sur le début du conteneur : justify-content:flex-start.

Pour que le code soit plus facilement lisible via le code source, j'ai placé le css directement dans le html. Est-ce mal ? Ici, non : le css est lié au fond et pas à la forme puisque ces exemples ont pour but de faire le lien entre le code et l'affichage obtenu !

3 - La gestion du centrage sur l'axe secondaire

Il nous reste encore une chose à gérer pour cette introduction à FLEX : comme gérer la disposition sur l'axe secondaire.

Je m'explique : nous définissons un conteneur flex ayant une largeur et une hauteur de 250px et

• une répartition horizontale des boites : flex-direction:row;
• avec répartition de type équitable sur la place disponible : justify-content:space-around;

On voit bien que les trois boîtes (contenant aa, bb et cc) sont équitablement réparties sur l'axe principal : l'axe horizontal.

Néanmoins, le texte est placé par défaut tout en haut de la boîte, au début de l'axe secondaire (l'axe vertical ici).

Si vous voulez modifier cette disposition, il faut utiliser la propriété align-items dans le CSS du conteneur, pas dans celui des boîtes..

CSS du conteneur :

HTML du conteneur :

Voici 5 exemples pour chacune des valeurs possibles avec un axe principal horizontal et dont le secondaire en vertical :

Avec align-items:flex-start; : on fixe la boîte en haut car l'axe secondaire est vertical.

Avec align-items:flex-end; : la fin est donc le bas car l'axe secondaire est l'axe vertical.

Avec align-items:center; : on centre au milieu par rapport à l'axe secondaire (vertical)

Avec align-items:baseline; : une nuance par rapport à flex-start. Si je trouve un exemple où les deux ne sont plus concordants, je pense vous le montrer plus tard.

Avec align-items:strech; : on étire (strech) sur toute la plage dispnible sur l'axe secondaire : c'est la configuration par défaut.

09° Modifier le CSS de la page alphabet pour que les lettres se plaquent plutôt vers le bas.

Le visuel attendu: align-items:flex-end

10° Normalement, rien ne devrait changer : les boîtes avaient une marge de 20 px. Rajoutons la ligne de code suivante dans le CSS des boîtes : margin-bottom:0px;. Alors ?

Le visuel attendu: margin-bottom:0px dans le CSS des boîtes

Il reste encore de multiples possibilités, mais c'est déjà bien assez pour s'amuser au début.

4 - Taille respectives des boîtes avec flex

Nous allons maintenant voir comment régler la taille des boîtes sans la propriété width ou height. En effet, avec FLEX, la notion de largeur et de hauteur n'a pas vraiment de sens. Seules les notions d'axe principal et secondaire en ont.

Imaginons que nous voulions 4 boîtes contenant HTML, CMM, Javascript et PYTHON.

Nous voudrions que les 4 boîtes fassent la même largeur.

11° Créer une page en utilisant les codes suivants :

HTML pour le fond :

CSS pour la forme :

Pour que les 4 boîtes aient la même longueur dans l'axe principal, il suffit d'utiliser la propriété flex.

Définissons flex à 1 pour toutes les boîtes :

12° Rajoutez le css de la classe test_flex. Constatez que cela ressemble à cela :

Les trois premières boîtes ont bien la même taille et occupe d'ailleurs la place maximale disponible. Python garde sa taille de base par contre.

13° Trouver ce qui ne va pas dans la boîte liée à Python, modifier le code pour tenter d'obtenir ce qu'on aurait dû avoir dès le départ : 4 boîtes de taille identique.

Le résultat attendu :

Cette fois les 4 boîtes occupent le même espace le long de l'axe principal.

Et si on veut que l'une d'entre elles soit plus grande que les autres ? Et bien, c'est facile : il suffit de mettre la propriété flex à 2 par exemple.

Pour faire cela, nous devrions par exemple créer des classes spécifiques à chaque boîte si on ne veut pas les mettre à 1. Mais nous allons plutôt profiter des priorités dans les ordres css en fonction de leur emplacement : un code CSS placé "en dur" directement dans le code HTML écrase toujours le code CSS initial situé dans le fichier .css.

14° Utiliser le code HTML suivant en le modifiant comme vous voulez pour bien comprendre le principe de la propriété flex.

Et voilà le résultat avec un flex à 2 pour Python :

On voit bien que Python prend deux fois plus d'espace que l'une des autres boites.

Si je place CSS à 5 en gardant Python à 3 j'obtiens une boîte CSS trois fois plus grande que celles définies à 1.

Si vous voulez aller plus loin, sachez que la propriété flex est en réalité composée de trois sous-propriété qu'on peut définir séparement les unes par rapport aux autres.

La propriété flex-basis spécifie la taille initiale de la boîte (en pixel, en % de la place disponible...)

La propriété flex-grow spécifie à quel point la boîte peut grossir par rapport aux autres après changement sur la page (disparition d'une autre boîte, ...).

La propriété flex-shrink spécifie à quel point la boîte peut rétrecir par rapport aux autres après changement sur la page.

Si vous voulez plus d'informations à ce propos, il suffit de faire une recherche sur le net.

L'intérêt de tout ceci ? Essayer de réduire la taille de cette page jusqu'à ce que la zone bleu javascript ne puisse plus être réduite. Comme vous le constatez, l'utilisation directe de la simple propriété flex ne fonctionne plus si la boîte doit être plus grande que prévue.

Dernière remarque : on peut avoir une boîte contenant elle-même d'autres éléments. C'est même tout l'intéret de Flex.

15° En allant voir le code source de l'exemple ci-dessous, réaliser une représentation originale des notes dans 3 matières de plusieurs éléves. Ou réaliser une création purement personnel utilisant des boites flex contenant plusieurs éléments internes.

5 - Media Queries

Cette partie ne concerne pas réellement uniquement l'utilisation de flex. Les Media Queries sont les informations qu'on peut récupérer sur l'utilisateur de la page. On peut ainsi connaitre la taille de son écran et prévoir alors deux types de CSS en fonction de celle-ci...

Pour récupérer de l'information, on utilise dans le CSS le mot-clé @media. On peut alors imposer du CSS qui remplacera le CSS général si la condition est remplie.

Cas n°1 Le site conçu d'abord pour la consultation sur ordinateur.

Le principe est alors de créer le CSS pour les ordinateurs et de créer ensuite un CSS pour tablette et un CSS pour Smartphone.

qui peut se transformer en

Nous allons utiliser dans ce cas là, la largeur (width) de la fenètre comme critère. Comme on veut créer un code spécifique pour les petits affichages, nous allons utiliser max-width : valeur_test qui est vrai si la largeur de la fenètre est inférieure ou égale à valeur_test :

Si on utilise : max-width: 1000px et que :

• la taille de la fenètre est de 800px, le test est VRAI : on appliquera le nouveau code CSS
• la taille de la fenètre est de 1200px, le test est VRAI : on ne modifie pas le code déjà présent au dessus.

Dans ce cas, on créer les styles des balises 1 à 4 mais on peut écraser et redéfinir les balises 3 et 4 en cas de petits affichages. Il faut donc privilégier ce type d'approche si vous avez un site principalement conçu pour les grands écrans.

16° Utiliser l'exemple pour faire varier les couleurs de background des balises en fonction de la taille de l'écran.

Normalement, on utilise plutôt ces tests pour changer le CSS de la gestion FLEX. Ainsi, on peut avoir un site avec les menus sur le côté ou un site entiérement linéaire pour un smartphone.

Cas n°2 Le site conçu d'abord pour la consultation sur smartphone.

Le principe est alors de créer le CSS pour les smartphones et de créer ensuite un CSS pour tablette et un CSS pour ordinateur.

Ici, nous allons utiliser un min-width pour vérifier que la taille minimale est bien supérieure à la taille indiquée.

Par exemple, min-width:1200px veut dire d'appliquer le code si la taille minimale est bien supérieure ou égale à 1200.

On peut également gérer l'orientation de l'appareil : est-il en mode paysage (plus large que haut ?) : @media only screen and (orientation: landscape).

Ou alors, on peut gérer le CSS en fonction de la taille maximale de l'écran, sans se soucier si la fénètre d'exécution est maximisée ou non : @media only screen and (max-device-width:480px).

Cela suffira pour la plupart des applications. Si vous voulez en savoir plus, à vous de vous renseigner.

Et comment fait-on alors pour changer l'affichage en fonction de la taille de l'écran ? Changer la couleur c'est une chose, changer l'ordre d'apparition des éléments, ce n'est pas possible... pour l'instant.

Je n'en ai pas parlé jusqu'à présent, mais il existe une fonctionnalité géniale de FLEX : la propriété CSS order qui force le navigateur a afficher les élements contenus dans le conteneur du plus petit au plus grand. La valeur par défaut des boîtes est 0. Imposer order:-1; dans le CSS d'une boîte va donc la forcer à s'afficher en premier. A l'inverse, order:2; va la forcer à s'afficher après les 0, les 1... Sympa non ?

Voici en exemple le cas des 4 balises 1,2,3 et 4 qui s'afficheront différement SI elles sont contenus dans un conteneur FLEX. A vous de le créer !

Si on lit bien le code, on voit que :

• Normalement (petit écran), on aura l'ordre 1,2,3,4.
• Sur écran moyen, on aura 4,1,2,3. (en réalité, le order 1 ne sert à rien si vous réfléchissez bien!)
• Sur grand écran, on aura 3,4,1,2.

17° Utiliser order pour réaliser concrétement l'exemple ci-dessus : on veut changer l'ordre d'affichage des éléments en fonction de la taille de l'écran.

Si vous savez changer le code CSS en fonction de l'affichage, vous parviendrez donc à faire ce que vous voulez (changer le CSS pour l'ordre via Flex, changer le CSS pour changer l'axe principal via FLEX ..)

6 - Flex dans Flex

Dernière subtilité bien pratique pour FLEX : on crée un conteneur et on y affiche des boîtes en lignes ou en colonnes, vous l'avez bien compris.

MAIS, une boîte peut être déclarée elle-même comme conteneur FLEX et contenir d'autres boîtes !

Exemple :

On transforme BODY en conteneur FLEX.

Dans BODY, on crée :

• HEADER, la balise normale
• Une balise DIV (id="milieu") qui contient les balises NAV, CONTENT et une autre DIV.
• FOOTER, la balise normale

Il suffit alors de créer deux codes CSS pour milieu et le tour est joué. On pourra faire cela :

Ici, cette technique n'est nullement indispensable pour faire cela, mais le but est simplement de vous montrer qu'on peut le faire ensuite sur des systèmes plus complexes où le FLEX dans le FLEX peut être la solution la plus simple et la plus économique en code.

18° Utiliser deux conteneurs FLEX pour réaliser le changement voulu. On vérifira la bonne largeur des balises en utilisant des backgrounds de couleurs différentes.

Prochaine étape : le dessin vectoriel en CSS3.