CSS : Positionnement et mise en page

Imbriquer les flex

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à imbriquer les flex entre eux. Assurez-vous de ne pas perdre le fil et de conserver les liaisons.
04:19

Transcription

Bien entendu que les flex peuvent être imbriqués dans des flex. Alors regardons, ici on a trois séries d’images ici, on a des clous, des vis et du vrac un peu, placés tout simplement sous forme de Pelles, Vrac et Clous, donc voilà trois images, quatre images, trois images, et on va pouvoir représenter tout cela sous forme de flex. Alors comme on a fait jusqu’à présent, ici on va pouvoir dire qu’on display : flex dans la section, histoire de venir fléxiser cet aspect-là, donc ici on se retrouve en trois colonnes, bien entendu les images ne sont pas de même dimension, les colonnes non plus, ce qu’on va pouvoir faire c’est dire attention, les div, on va les autoriser à grandir, flex, et cette fois-ci on va les autoriser à grandir de 1, donc homothétiquement tous pareils, donc on va donner un flex : basis ici de 33%, pour être sûr que tous fassent la même largeur. Jusque-là c’est très bien, on pourrait ici, s’arrêter là, mais si non souhaite par exemple étirer ce petit monde ici, alors on va essayer de jongler avec du flex justify-content align-text etc. Regardez, si je demande à ce div maintenant d’être lui-même en display :flex, Donc automatiquement en étant en display : flex il va devenir flex, par défaut ils sont en haut, donc on va venir faire un flex-direction, ici, on va lui dire que c’est un column. Voilà, si j’actualise, bingo ils sont tous adaptés pile-poil à ces dimensions-là. Regardez si maintenant je viens dans mon image lui dire je t’autorise à grandir, tout simplement, et d’être un élément flex, elle s’étire, il y a de petites déformations qui peuvent être apparues, mais vous voyez qu’avec cette simplicité on va pouvoir créer ces damiers, maintenant si j’agrandis, ça va systématiquement rester toujours dans le même type d’homothétie. Regardez au passage l’unité qui a été utilisée ici pour le h1 un 2 fois viewer width, c’est-à-dire 2% de la largeur qui fait qu’automatiquement quand on va agrandir on va forcément agrandir la typo, tout en restant dans quelque chose de très cohérent, par rapport au mode d’affichage. Donc vous voyez il est très facile de pouvooir venir rapidement mettre en place ce genre de cursus là. Ce que je vous conseille de faire également pour pouvoir travailler et pour voir les mises en page au niveau de la section, c’est de rajouter ici une couleur d’arrière-plan qui va vous permettre de positionner et de voir justement où se situent ces fameuses petites marges et de voir comment l’intérieur du flex va être positionné. Alors si vous n’avez pas de couleurs ce n’est pas gênant, si vous avez des couleurs il va falloir rajouter. Par exemple, ici en l’occurrence un padding-right de 1em, et padding-bottom de 1em également puisqu’on s’aperçoit qu'il n'y a pas de marge basse ici, sur la partie. Voilà et automatiquement, pensez à mettre des arrière-plans de couleur si vous voulez vraiment centrer pile-poil par rapport à tous vos éléments et surtout si vous voulez avoir une certaine homothétie. Une fois que le background-color vous aura servi de centrage, vous pouvez la commenter histoire d’avoir vos éléments bien centrés au pixel près en fonction de l’ensemble des containers, c’est-à-dire en partant du body et en redescendant sur tous les containers qui vont s’enchainer pour pouvoir afficher votre page. Et de la même manière, pensez à préserver, donc ici vous avez un display : flex, parfait. Ici ce flex-là correspond au flex-items dans la partie display : flex ici, et dès l’instant où vous allez avoir un diplay : flex column dans cette partie-là , ce flex-item ici s’adresse à celui-là, et non pas à ici dans ce sens-là. Voilà, donc essayez de rester cohérent dans l’écriture de vos codes, histoire de vous y retrouver quand vous y reviendrez pour modifier quelques temps après avoir mis en page ces contenus.

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 !