Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Découvrir le mode flexbox

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Le mode incontournable en RWD est le mode flexbox. Toujours en candidate recommandation, ce module vous apporte énormément de souplesse quant à la gestion des blocs d'affichage. Il vous propose toute une panoplie de propriétés.
07:15

Transcription

Un mode d'affichage qui devient incontournable surtout en mode responsive dès qu'on va commencer à cibler vraiment tout type de support, c'est le mode de flexbox. Faites bien attention parce que si vous vous rapprochez de la documentation du W3C là-dessus, vous voyez qu'on est toujours en Candidate Recommentdation donc on n'est toujours pas recommandé. Le navigateur est presque sur la touche finale. Les navigateurs ne s'entendent pas tous dessus, bien qu'il y ait eu un gros effort de fait depuis 4 ou 5 ans les flexbox sont accessibles. Là, vraiment, expérimentez et ça va être très frustrant parce qu'on va juste effleurer la surface de la poudre, de la sphère dont on ne va même pas regarder la surface émergente. On va regarder vraiment la surface de cet iceberg, mais c'est vrai que je vous invite à vous rapprocher de notre catalogue et de chercher une formation verticale sur le positionnement pour pouvoir aller beaucoup plus loin dans l'exploitation des flexbox Mais vous allez voir déjà un avant-goût de ce mode d'affichage et de ce qu'on peut faire. On va commencer déjà par définir sur la section, la section globale qui contient les flex, on va distinguer la classe flex de la section pour s'apercevoir de ce que fait vraiment le flex. Je vais mettre un width de 60 % sur cette section pour réduire sa largeur. On va faire un margin de 10 px, non on va rajouter un autopour le positionnement si vous regardez bien, ici maintenant j'ai tout cet élément qui est centré et qui fait 60% de large. Pour mieux le voir, ce que je vous propose de faire, c'est comme à l'accoutumée, de mettre une couleur d'arrière-plan complètement inutile si ce n'est juste pour pouvoir visualiser la section tout simplement. J'aime bien avoir un code propre. On a bien notre élément là-dessus. Maintenant, on va se focaliser sur ce qui va devenir le flex. Pour pouvoir faire ce mode flex je vais venir utiliser la classe flex pour le distinguer. On va dire que le conteneur parent va être en mode d'affichage display et cette fois-ci je vais choisir flex. Faites bien attention car en fonction des versions des navigateurs, en fonction de la période à laquelle vous allez intégrer l'univers des flex vous avez plusieurs propriétés qui peuvent être soit préfixées, soit différentes comme flexbox, etc. Voyez, ici maintenant par défaut on est placé dans début milieu fin et ces éléments-là vont être placés sous forme inline. Ce n'est pas tout à fait inline. C'est un mélange de flottaison, de blocs et d'éléments. Flottaison ça ne vous parle pas, on va le voir juste dans l'étape d'après. Ici on est vraiment dans du type bloc qui s'est mis à s'adapter à la largeur du contenu. Encore faut-il maintenant qu'on définisse des largeurs, des hauteurs, un système d'imbrication, un peu comme si on avait une carte des dispositions. Ce qu'on va quand même demander ici c'est de faire un flex direction ici et ce flex direction, on va dire qu'on travaille en mode de rangée, donc on va les empiler les uns sur les autres en rangées. Si l'actualise, il ne se passe rien ! C'est un peu le mode par défaut qui s'est déplacé. On pourrait très bien travailler en mode colonne, ou en mode rangée. Ici, on va travailler sur des rangées et on va pour pouvoir mieux distinguer ça, je vais venir donner aux éléments de type div une bordure pour voir justement où il se situe. On pourrait donner une bordure ou un outline Ce n'est pas de la bordure qu'on va leur donner, c'est surtout un repère. Je préfère utiliser le mot outline, on l'avait vu tout à l'heure. C'est pareil, ce sont les mêmes propriétés que la bordure sauf que là par exemple on est vraiment dans du débuggage ou du test; Voyez bien, nos éléments sont placés ici et n'utilisent aucun padding rien du tout. Simplement ils sont collés les uns aux autres, comme une flottaison. On va pouvoir maintenant indiquer comment ils peuvent grossir pour occuper l'espace. Cet espace on pourrait très bien dire, tu vas faire 33 %, 66 % mais dès l'instant où on va augmenter 1, si on en passe un à 50 % les deux autres feront 25 % il va falloir que je divise en quatre. Là, en fait, on va rentrer dans cet élément. On va dire : flexgrow ça, ça commence à être la magie des flexbox ici je vais lui dire c'est un. Si je lui dis 1, donc tous les div font un flexgrow de 1 J'actualise, regardez ! Ils se sont presque répartis sur cette largeur pour tenir un espace. Ce n'est pas tout à fait précis dans le sens où il va se dire « j'ai plus de texte ». Il va essayer de tenir cet espace-là. Là ça commence à devenir vraiment intéressant. Parce que si je commence à me dire, ici celui du milieu ou celui de la fin, peu importe, je souhaite qu'il ait un flexgrow plus important. Regardez, je vais venir ici et lui dire que milieu a un flexgrow de 2. Regardez, quand j'actualise, milieu a pris deux places par rapport aux autres qui n'ont pris qu'une place. Donc il va essayer de répartir ces choses-là. Plus je vais jouer sur mon espace, plus ça va suivre. Ça va essayer de compenser dans ce sens-là. Ça veut dire que maintenant, on va pouvoir vraiment facilement redistribuer les contenus, avec notre média qui va dire, si tu fais telle largeur donc en tablette portrait, tu t'affiches comme ça Si tu passes sur un écran plus large tu t'affiches comme ça. Voyez, ça va être vachement plus simple de travailler dès qu'on aborde les flexbox. La cerise sur le gâteau c'est qu'on va pouvoir inverser les ordres. Ceux d'entre vous qui ont travaillé avec des modes grid, vous pouvez faire un push, ou un pull. On peut tirer les colonnes pour les faire passer devant ou derrière. Ça, je vais le passer devant quand même pour que ça soit un peu plus propre. Ici, je vais dire que j'ai la fin. On va pouvoir avoir le order Ici, je peux très bien dire que le début je le voudrais à la fin, donc en 3, puisqu'il y a 3 éléments. Si je prends le milieu, je pourrais le mettre au début. Si je prends la fin, on va pouvoir dire que la fin, je la mets au milieu, donc en 2. Voilà, on va changer complètement le sens. Le milieu qui garde toujours son grow de 2 est en 1, la fin est passée au milieu en 2, et le début est passé à la fin, en 3. Voyez un aperçu de ce que peut nous apporter la gestion d'un mode d'affichage de felxbox. Je l'ai passé avant la flottaison qui est beaucoup plus ancienne et beaucoup plus répandue parce que ça reste quand même un mode d'affichage. Tout commence au départ en disant : « j'ai un display de type flex. » Pour ceux d'entre vous qui utilisent le framework susy... Susy jusqu'à un certain temps ne pouvait afficher que du display flotte. Aujourd'hui, susy affiche aussi un display flex. Toutes ces capacités qui arrivent et qui sont vraiment géniales pour pouvoir faire des mises en page, surtout quand on travaille en responsive pour pouvoir redistribuer le contenu de manière totalement différente en fonction du périphérique. Comme je vous l'avais dit, c'est frustrant, car on aimerait aller plus loin que ce que ça peut apporter. Là, on a vraiment effleuré la surface. Je vous invite vraiment à aller sur le W3C et à regarder au niveau de Flexible Box Layout Module, Voyez on est en "Candidate recommendation" ici. C'est tout chaud encore, on est là. Je vous invite à venir creuser la doc là-dessus, c'est énorme tout ce qui peut être fait avec les flexbox. Désolé pour cette frustration, je vous invite à passer à l'étape suivante pour regarder la flottaison.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 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 !