Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

CSS : Positionnement et mise en page

Gérer des graphiques à l'aide d'un flex

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les flex peuvent également servir à la mise en place de certains types de graphiques. Il s'agit de montrer que la mise en page se trouve grandement simplifiée.
09:48

Transcription

Flex peut nous ouvrir des portes aussi pour présenter par exemple des graphiques. Regardez, ici on a une section avec trois div contenant des paragraphes A B C tout simplement, et imaginons que nous souhaitions représenter un graphique à barres. En fait il suffirait de donner à chacun de ces div, par exemple, une hauteur de 300 pixels. Mettons ici, vous allez voir cela va se dessiner au fur et à mesure, et forcement on va lui donner un background color, un lightgrey, ce serait très bien, juste pour présenter. Regardez si j’actualise ici, on se retrouve avec des barres. Ces barres seront un peu larges dans ce que je vais faire, si je vais mettre un width de 60 pixels ici pour les réduire, si on les réduit, vous voyez elles sont toutes les unes à la suite des autres. Parfait. Si on place un display : flex ici maintenant, qu’est ce qui se passe, regardez, elles se mettent toutes côte-à-côte. Super. Si je demande aux div + div, histoire que toutes les div suivant une div, puissent avoir une marge gauche simplement, un margin-left, ici de 1em, comme ça on va rester proportionnel, regardez, elles se dégagent. Le texte se trouve en haut, se serait bien de le dégager sur le bas. Ce qu’on va faire, on va déjà mettre des grilles, pour avoir des axes horizontaux et verticaux. Pour ça, ça va faire un border-left ici, tout simplement, ce border-left, on va lui mettre un 2 pixels solid en anthracite en 3B, ce sera très bien, et ce qu’on va faire, on va répéter maintenant cette opération. Je vais juste remettre un b miniscule histoire de garder une homogénéité, on va répéter l’opération, mais cette fois-ci on va la répéter sur le border bottom histoire d’avoir un deuxième axe. Ctrl S ,si j’actualise, on a nos axes, c’est parfait, super, ça me va bien. Ce qu’on va pouvoir donner à la section c’est un padding histoire de pouvoir décoller tout le monde, on va rester en 1em pour respecter la marge entre les éléments, parfait vous voyez, ça le fait tout le long, ce n’est pas terrible. On va simplement lui dire qu’on veut un inline, donc il va automatiquement adapter ça sur notre série et non pas continuer sur la page. Ce qu’il nous reste à faire, positionner le texte dans la partie basse, on va dire que les p sont en position absolute, et on va le descendre en bottom de 60 pixels, sauf que si je reste comme ça, si je ne m’abuse il va rester sur le body, donc il va aller en bas de page. J’actualise, il va aller à – 60 dans la partie basse, ce qu’il va falloir, c’est dire que le div va devenir ne position relative pour cet élément. Si j‘actualise, on a bien nos éléments. Voilà donc c’est très rapide de mettre en place des graphiques. Alors pour faire des vrais graphiques, ce qu’on pourrait avoir c’est de dire que si j’utilise un fichier json par exemple, avec la description de vente des outils, « marteau », « pelle », « vrille », « clou », « établi » qui ont des valeurs différentes, 400, 230, 130. Des couleurs distinctes chacun, un petit javascript comme tout à l’heure qui va, au chargement de la page, envoyer un ajax, qui va récupérer ces images, faire un placeGraphs dès nécessaire, placeGraphs va parcourir les datas reçues, va chercher un élément qui s’appelle graphs et qui sera ici, placé, parfait. Dans cet élément graphs on va fabriquer, donc ici on pourrait tester les valeurs si vous voulez en console.log, voir s’il y a un beau chargement, ici creeNoeud avec le texte, on garde le même petit snippet, le petit fragment de code qui va permettre de créer des nœuds. On va créer un style background-color qui contiendra la couleur ici à récupérer, donc on va récupérer et la couleur, et le label et la valeur, donc ici le label va être placé dans p, la couleur va être placée dans le background-color, la valeur va être placée dans le height, plus pensez à rajouter l’unité px, on va créer un nœud div, on va rajouter les styles à ce div, on va lui ajouter le p, on va l’ajouter à la section tout simplement ici. Donc si j’ai un registre pour simplement commenter la console, et que je passe dans la partie, voilà ce qui se passe si j’actualise, on a récupéré nos éléments, sans rien faire de plus, par rapport aux CSS que nous avions au préalable. La seule petite distinction, c’est qu’ici je n’ai pas le background-color, et je n’ai pas le height, puisqu’ils ont été réglé par le javascript. Alors vous allez me dire c’est très bien, le graphique se trouve dans la partie haute, ça descend, c’est pas terrible, surtout que le positionnement se fait par rapport à la div donc regardez ce n’est pas sans compter sur nos éléments types flex, parce que si maintenant je lui dis, bon attend, on va faire un align-items, tu vas aligner tous les items que tu contiens avec un flex-end, donc tu vas les aligner sur la fin. Regardez ce qu’il se passe, ctrl S, j’actualise, bingo, tout se positionne dans la partie basse, et forcement comme la position absolue relative de tout à l’heure fonctionne, c’est nickel, ça fonctionne. Qu’est ce qu’on pourrait rajouter là-dessus maintenant, c’est peut-être le fait de rajouter une largeur de 100% ici, au p, et puis de lui rajouter un text-align :center. Histoire de centrer tout ce petit monde dans la partie basse, voilà, et ce qui nous manque pour avoir un vrai graphique serait d’avoir des lignes présentées. Alors on aurait une première ligne qui serait une fausse ligne, puisqu’ici on a un padding de 1 pixel, en fait il faudrait dire qu’on commence tous les 100 par exemple à partir de 1em, donc il faut pouvoir commencer tous les 100 à partir de 1em, comment va-t-on pouvoir gérer cela ? Tout simplement avec un background-image : linear, qu’est-ce que vous en pensez ? Regardez, si on fait un background-image, on va placer un liner-gradient, on va lui dire qu’il va partir du bas vers le haut, donc to top, on va placer d’entrée de jeu du transparent, ce transparent on va le faire durer combien, 1em, de façon à se dire qu’on a une première couleur qui va être transparente et qui va durer 1em, donc on va partir de là, donc elle va faire du transparent jusqu’à 1em, on veut au bout du 1em un lightgrey. Ce lightgrey va démarrer à 1em, et on va le faire durer jusqu’à 0,25 em par exemple, donc on va reprendre ce lightgrey et cette fois-ci on va le faire durer jusqu’à 1,025em, parfait. Donc ici qu’est-ce qu’on a si j’enregistre et que je bascule, on a bien notre image qui va arriver. Si on actualise, on ne le voit pas, je vais rajouter une deuxième valeur ici, ctrl S, j’actualise, on ne voit pas bien, je vais changer les valeurs quand même, je vais continuer à placer avec des a. Voilà avec des a ça marche mieux que des e, donc vois voyez ici maintenant ça monte jusqu’à la partie haute, ce qu’on va faire c’est rajouter un transparent à 1,025, ctrl S, j’enregistre, on a bien une ligne, on ne le voit pas ici, mais on a une petite ligne qui va être basée à 1em, et maintenant ce qu’il nous faut c’est tous les 100 pixels, rajouter une ligne transversale, on va tout simplement rajouter un background-image, mais cette fois-ci on va faire un repeating-linear-gradient c’est-à-dire qu’on va répéter un dégradé parce qu’on veut mettre plusieurs dégradés sur le même background image, il suffit simplement de les séparer par une virgule, donc je vais rajouter un dégradé qui se répète et cette fois-ci, on va partir du top, mais on va demander un transparent pareil que tout à l’heure, jusqu’à 100 pixels. N’oublions pas que notre curseur se trouve ici. On va demander un transparent jusqu’à 100 pixels, à 100 pixels, on va demander de placer un lightgrey, on va un rajouter un 101, pour faire la distance, et tout simplement maintenant si j’enregistre et que j’actualise, on se retrouve bien avec notre démarrage qui va pouvoir faire tous les 100 pixels. Il nous suffit de rajouter, par exemple, une série à cet élément là, de venir d’un autre graphique, l’actualiser ici, et automatiquement on va se retrouver avec une autre valeur. Alors si ça ne fonctionne pas bien, pensez à faire un F5 et un shift F5 pour être sûr de rafraîchir correctement le navigateur parce que des fois les fichiers json ne sont pas mis à jour dans les navigateur de manière locale sur le serveur local comme ça, donc pensez à le forcer à se rafraichir et vous voyez que vous venez de rajouter automatiquement un nouvel élément, et nos graphiques vont pouvoir se composer. Donc flex va nous servir non seulement à pouvoir mettre en page nos contenus, nos container, mais également les parties même de nos contenus, c’est-à-dire de pouvoir rafraîchir des graphiques en dynamique, ou explorer des portes un peu dans ce sens-là.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !