CSS : Positionnement et mise en page

Aborder les flexbox

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez explorer la technique des flexbox pour le positionnement et la mise en page CSS.
03:33

Transcription

Bien que cela ne devrait pas poser de problèmes et que nous allons, au cours de ce chapitre, couvrir largement les diverses propriétés des Flexbox, si vous êtes tout à fait novice et que vous découvrez pour la première fois les Flexbox, n’hésitez surtout pas à vous rapprocher de notre catalogue et à rechercher une information sur les fondamentaux de CSS, où il sera fait mention d’au moins la prise en main des Flexbox. Quoi qu’il en soit, les recommandations sont là, n’hésitez surtout pas à vous rapprocher éventuellement de la version éditeur, toujours plus fraichement mis à jour, et vous aurez l’intégralité des informations nécessaires surtout ce menu à gauche qui est vraiment pratique à utiliser, avec l’utilisation de Flex ou Inline-Flex; les Flex-direction ou Flex-wrap; Flex-flow ou order etc., tout ce qu’on va plus ou moins regarder au cours de ces prochaines étapes, mais je vous invite à continuer à venir creuser, et à regarder pour explorer toutes les nombreuses possibilités dont les Flexbox regorgent. Si on regarde à « Can I use », quel plaisir, c’est ouvert, tout est utilisable sauf IE11 qui est assez « buggé » mais qui supporte une certaine partie, mais finie l’époque où on devait utiliser plusieurs dialectes pour pouvoir parler avec chacun des navigateurs, tous sont tombés d’accord et sont revenus vers la Candidate Recommandation que le w3c maintien. Rapidement, pour revenir sur l’emploi et la mise en pratique des Flex, ici j’ai une section qui contient six div, contenant elles-mêmes chacune des lettres de a à f et ces div ont une bordure, histoire de pouvoir les distinguer entre elles et une couleur d’arrière-plan ici tout simplement. Si au container parent, on demande un mode d’affichage du type Flex, fini les Flex-box etc., c’est directement display: flex, ici, on va automatiquement dessiner tous ces éléments en Flex. Que se passe-t-il ? J’enregistre, j’actualise, ce n’est pas terrible parce qu’en fait, d’une visualisation assez importante, j’en arrive à quelque chose qui est « étroitisé » dans une partie gauche comme ça, autour de chaque lettre. On va un peu plus loin, je vais avoir une hauteur, pour ma section, qui va faire 100vh, qui va faire la hauteur de l’écran disponible. Si j’actualise, cela s’actualise automatiquement. C’est un peu comme si j’avais mis une hauteur à chacun de mes div. Jusque-là, pas grand-chose, par contre, si je demande maintenant à mes div, donc aux enfants, aux éléments qui sont des flex-items, avec un flex-container qui serait la section, un flex-item qui serait les objets contenus à l’intérieur de cette section, je lui demande d’avoir la propriété flex et je mets tout simplement le paramètre un, j’enregistre et j’actualise ici, et ils occupent tous l’espace, ils se partagent l’espace, c’est directement en augmentant ici, comme ça. Parfais, et si je viens maintenant dans la section et que je lui demande au container, je prends une direction qui n’est pas la direction par défaut qui serait la rangée, c’est-à-dire qui va ouvrir tous les éléments les uns à côté des autres sous forme de rangée, et si je leur demande de passer sous forme de colonne, ici j’enregistre et vous avez compris ce qui se passe, on affiche en colonne. Voilà, donc les flex ça nous permet de manipuler des container qui vont avoir des enfants qui seront des flex-items et il y a une relation qui va automatiquement se mettre en place, comme une flottaison et on va voir une propriété qui va pouvoir être affectée et va pouvoir jouer avec. C’est un mélange un peu de flotte et de mode en gris, comme on a vu dans un premier chapitre, tout en étant dans des propriétés de display inline box, ça fait un peu mélange de tout, et c’est assez génial, vous allez voir, ce qu’on peut faire, surtout lorsqu'on va travailler en responsive.

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 !