CSS : Positionnement et mise en page

Dispatcher ses sections d'articles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce à la propriété flex placée sur les flex-item, vous pouvez contrôler très précisément la manière dont les éléments s'étirent ou se contractent. Cette propriété est une manière courte de représenter flex-grow, flex-shrink et flex-basis.
10:01

Transcription

Nos éléments de menu se sont tout de suite adaptés à une certaine largeur qui en fait correspondait à la largeur du texte et l’éventuel padding qui tournait autour de l’élément. Il restait beaucoup d’espace sur la droite ou sur la hauteur qui fait que les éléments ont occupé l’espace nécessaire. Qu’en serait-il si on repositionne ces éléments ici par exemple en utilisant les flex. Donc si dans cet article je vais faire un display : flex, l’intégralité des enfants qu’il contient, c’est-à-dire les sections qui sont repérées par classe sec1, sec2 et sec3 respectivement pour des blocs de Titre 1, Titre 2, Titre 3, ici, dès l’instant où on va faire un display : flex, Ctrl S, on actualise, nos éléments vont se positionner verticalement, et vous voyez qu’ici maintenant, nos éléments sont placés et se répartissent à peu près sur la même largeur. Ce n’est pas tout à fait vrai, car si vous regardez, Titre 3 est un peu plus large que Titre 2, parce que c’est au mieux possible cette répartition qui va être faite. Les espaces liés entre ces éléments sont gérés par la marge et le padding de nos sections. Si maintenant de manière nominative je viens dire à sec2 ici, tout simplement, qu’en fait son ordre, propriété ordre, c’est -1. Ctrl S, et j’actualise ma page, et vous voyez que la section 2 passe avant tout le monde. Si j’avais dit order 1, ctrl S, et j’actualise, là à ce moment-là il passe à la fin, donc dès qu’on a un ordre qui est positif, ce sera sorti de ce flux-là, et cela partira à l’ordre indiqué ici, à la droite, et si on le place de manière négative, à ce moment-là ce sera en amont de l’autre flux à suivre. Donc on peut réorganiser l’ensemble des blocs, sans avoir à changer quoi que ce soit dans le html, simplement en agissant sur la propriété order des flex-items. On n’est pas obligé de définir les autres, par défaut ils seront positionnés dans l’ordre chronologique défini par le html. Donc on va pouvoir, tout à l’heure on a vu, on avait agi sur la propriété flex, si je place flex :1 ici, à quoi cela correspond, si j’actualise, je suis en train de dire à mon élément sec2 ici, tu vas essayer de prendre une partie de l’espace restant. Alors si je mets à toutes les sections un flex : 1, en gros ici ils vont se répartir à trente-trois pourcents, cette fois-ci, exactement, chacun des espaces restants. Mais si je lui donne à lui, automatiquement, lui va prendre 1 de la valeur restante, c’est-à-dire pas grand-chose. Si maintenant je viens donner à sec1 et à sec3, je vais faire ça d’abord, cela sera plus rapide, je vais dire à sec1 qu’il à un flex :2, et à sec3, section 3, un flex :3. Je vais avoir lui qui va avoir une taille, deux tailles, trois tailles. C’est un peu comme si j’avais divisé le tout en six et que j’en avais attribué trois à lui, deux à lui et un à lui. Pour mieux le mettre en évidence et mieux le comprendre, on va regarder cela avec trois sections qui, cette fois ci, seront bien dans l’ordre, qui n’auront pas d’inversement, donc partons dans un ordre, le 1 c’est le 1, le 2, le 2 et le 3, le 3, tous les trois ont un flex :1, pensez attention au box-sizing border-box pour dire que c’est bien la bordure puisque nos sections ont une bordure, et cette petite bordure pour décaler de deux pixels et quatre pixels, sur l’ensemble cela fait une dizaine de pixels, donc ici, si je prends un flex :1classique, et que je me mets sur cette fenêtre, à 600 pixels, on s’aperçoit que tous font 200 pixels de large pile-poil. Donc sur ce côté-là c’est parfait. La propriété flex, en fait, s’engraine entre un raccourci de description qui sera le flex basis, le flex grow et le flex shrink. A quoi correspondent toutes ces valeurs ? Si je lui dis un, je lui dis, en gros, un raccourci, tu prends tout par défaut, 1, 1 la largeur qui reste. Donc je vais le traduire différemment. Si je dis 1 1 200px ici, je suis en train de lui dire, je souhaiterais que tu fasses 200 pixels, que tu puisses t’agrandir de 1 et te rétrécir d’un espace que tu vas pouvoir préserver. Regardez si ici maintenant je viens dans cette partie-là, j’agrandit de un, c’est-à-dire que si je viens à 900, on va bien faire 300 300 300. Donc si j’écris ici, 1 ou 1 1 200, cela correspondra à cette même valeur. Pour mieux le comprendre, regardons ce qui se passe. Si je répartis l’espace directement, j’ai un espace donné quel qu’il soit. Et j’ai trois éléments, qui vont faire une certaine dimension. Ils peuvent être de dimension identique, comme de dimension différente. Ce qu’il se passe, c’est qu’il reste un espace à remplir. Eux ils occupent ce qu’ils ont besoin, et par rapport à ce qu’ils ont occupé, il reste un espace. Ils ont une base. Cette base, c’est leur dimension qui leur est donnée. Cela s’appelle flex : basis. Si maintenant je parle du shrink ou du grow, c’est qu’elle va être sa propension à se développer ou se rétracter, en fonction de cet espace qui reste. Si, cet espace, ici, je le divise en trois parties, je vais pouvoir répartir équitablement le même espace à chacun. Donc je vais lui demander de combien je veux me réduire ou m’agrandir, en fonction de l’espace qui reste, ou de l’espace qui manque si ma fenêtre va venir en deçà de la largeur nécessaire pour contenir les trois. C’est sur ces trois propriétés que soit le raccourci flex ou les propriétés indépendantes flex grow, flex basis ou flex shrink vont pouvoir agir. Regardez si à lui je lui dit « je ne veux pas que tu t’agrandisses, je ne veux pas que tu te rétrécisses », au départ tu fais 200. Si j’enregistre cette partie-là, je l’agrandit, quoi qu’il se passe au niveau de cette fenêtre, le 200 ne bougera pas, ni il s’agrandira ni il se rétrécira. Et les deux autres se partageront, puisqu’ils sont tous les deux en 1, c’est comme s’il en avait 1 1 200, ils vont se partager l’espace qui reste à proportion égale. C’est-à-dire que si je viens ici à 800, il se passe que j’ai 200 pixels de plus, 200 de plus divisé par deux, cela fait 100 pixels, leur base étant de 200, ils vont prendre 100 pixels chacun. Maintenant, on va pouvoir être un poil plus tordu. Je pourrais très bien dire que le premier il fait sa base de 100 pixels et ne peut ni grandir ni rapetisser. Ctrl S. Et ici si j’actualise, lui va se mettre à 100, et bien entendu, les deux autres qui font 200 chacun vont prendre pour 500. 500 divisé par deux, cela fait 250. On va pouvoir lui dire: Toi tu as le droit de grandir, par contre, ta base est de 200 à l’origine, 200px, et toi tu peux grandir aussi, mais ta base est de 300px, on pourrait se dire que le premier fera 100, le deuxième 200 et le troisième 300. Si je les mets tous en 0 pour mieux voir cela, donc ils n’ont ni l’autorisation de grandir, ni l’autorisation de rétrécir, si j’actualise ma page, ils font 100, 200, 300, et si j’agrandis, quoi qu’il se passe, ils ne vont pas se partager d’espace, ni vont se réduire, ils vont rester à cette dimension-là. Parfait maintenant je vais dire que toi tu as le droit de grandir de un et toi de deux, regardez ce qu’il se passe, si j’actualise ma page, chaque fois que j’agrandis, on garde ce même rapport de 1 2 3, sauf que le premier n’a pas le droit de grandir, il restera toujours à 100. Mais maintenant si je dis à lui, toi aussi tu as le droit de grandir, ils vont rester, il faudrait que je prenne 1 2 et 3, ici, pour garder ce même rapport à chacun. J’actualise la page ici, tous vont garder. C’est-à-dire que quand lui fait 200, le deuxième fait 400, et le troisième fait 600. C’est très clair de ce côté-là. Et au niveau du rétrécissement, là ce n’est pas tout à fait pareil. Mettons que j’arrive à 400 ici, Si j’arrive à 400, il me manque 200 pour pouvoir contenir tout le monde, ce n’est pas je vais diviser tout le monde dans cet espace, et réattribuer cet espace. Cela va être au pro rata et à la proportion. C’est-à-dire que lui va rester à 0, par contre lui pourrait passer à la moitié, puisqu’il fait la moitié, et le troisième fait un tiers, donc à 0.666. Je vais mettre plusieurs chiffres après la virgule pour avoir une meilleure proportion, et là je sais que lui fera toujours 1, lui 2, lui 3 fois la taille. Et là on va pouvoir, comme ça, agrandir ou rétrécir. Donc si je viens dans une partie à 600 on est bien comme ça, si je descends à 400, lui il fait 150 ce qui est la moitié de 300, et lui il va faire un peu plus, il va faire 175. Pour le rendre plus clair, allons jusqu’à 300 par exemple, ici donc on est à 300, on va dire que sur l’espace restant il prendra un tiers, puisque là c’est un tiers de 300 donc 100, lui fera un demi de 200 donc 100 et lui il fera 0 de 100 donc il fera 100. Voyez, on va pouvoir contrôler la manière dont les éléments vont s’agrandir ou vont se rétrécir en fonction de l’espace restant, grâce à la propriété flex qui va être donnée à chacun des flex-items, simplement en mettant un display : flex sur le container parent.

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 !