Série Flexbox - Avant propos
Dans ce tutoriel, je vous propose une série sur l’utilisation de Flexbox dans les feuilles de style CSS. Cette série est réalisée en vidéo afin de mieux voir comment utiliser Flexbox et comment nous pouvons appliquer les propriétés Flexbox à nos éléments de contenu.
Le but de ce tutoriel n’est pas de réinventer la roue, car de nombreux guides et documentations existent sur internet et sont très bien faits. Le but est simplement de mettre en pratique ces propriétés Flexbox et essayer de mieux comprendre le comportement de nos éléments qui reçoivent les valeurs de ces différentes propriétés.
J’ai essayé d’être le plus simple possible dans mes explications. Le mieux est de voir et de mettre en pratique.
Série complète ou série en épisodes
Pour cette série consacrée à Flexbox, vous avez la possibilité de regarder une vidéo complète, qui contient tous les épisodes, ou alors la série découpée en plusieurs vidéos(14), avec une vidéo par propriété Flexbox. Ces épisodes sont visibles dans cet article ci-dessous.
Si vous préférez voir la vidéo complète, vous pouvez la visionner sur ma chaine YouTube à cette adresse :
Utilisation flexbox - Les fondamentaux
Afin de bien maitriser l’utilisation de Flexbox, nous devons comprendre les fondamentaux que sont les axes et les positions. Il est important de connaitre et distinguer, l’axe principal avec lequel nous travaillons et l’axe secondaire. Ces axes sont déterminés avec la propriété flex-direction que nous verrons plus loin. Et tout aussi importantes, les positions avec les valeurs start ou end. Mais voyons cela en pratique, nous comprendrons mieux :
Utilisation Flexbox - La propriété " display "
La propriété display de flexbox permet de créer un conteneur flex. Nous donnons une des 2 valeurs possibles de cette propriété, à savoir soit flex, soit inline-flex. Lorsque nous appliquons cette propriété à l’élément parent, celui-ci devient donc un conteneur flex, et ces enfants deviennent des élément flexibles, appelés flex-items.
Voyons cela par la pratique :
Utilisation Flexbox - La propriété " flex-direction "
La propriété flex-direction définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l’axe principal et la direction des éléments (normale ou inversée). A noter que par défaut, dès que nous appliquons la propriété display, flex-direction vaut row. Mais voyons cela en pratique dans notre code :
Utilisation Flexbox - La propriété " flex-wrap "
La propriété flex-wrap indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s’ils peuvent être affichés sur plusieurs lignes avec un retour automatique. Si le retour à la ligne est autorisé, la propriété flex-wrap permet également de contrôler la direction dans laquelle les lignes sont empilées.
Mieux que les mots, mettons plutôt cette propriété en pratique :
Utilisation Flexbox - La propriété raccourcie " flex-flow "
La propriété raccourcie flex-flow permet de synthétiser les propriétés flex-direction et flex-wrap. Voilà pourquoi on parle de propriété raccourcie. La première valeur de flex-flow sera la valeur de flex-direction et sa deuxième valeur sera celle de flex-wrap. Mais prenons un raccourci, nous aussi et voyons cela dans notre code css :
Utilisation Flexbox - La propriété "justify-content "
La propriété justify-content indique la façon dont l’espace doit être réparti entre et autour des éléments selon l’axe principal du conteneur flexible. Ici l’important est de bien retenir que cette propriété s’applique selon l’axe principal.
Mais encore une fois, cela est plus clair lorsque nous pratiquons :
Utilisation Flexbox - La propriété " align-items "
Nous venons de voir la propriété justify-content qui distribue nos éléments sur l’axe principal, et bien voyons maintenant la propriété align-items qui sera utilisée pour répartir nos éléments sur l’axe secondaire.
Alors voyons cela en pratique :
Utilisation Flexbox - La propriété " align-content "
La propriété align-content définit la façon dont l’espace est réparti entre et autour des éléments le long de l’axe secondaire. Cette propriété n’aura aucun effet sur les boîtes flexibles disposées sur une seule ligne. C’est pourquoi, nous l’utiliserons uniquement lorsque nous appliquons la propriété flex-wrap avec les valeurs wrap où wrap-reverse.
Encore une fois, laissons place à la pratique :
Propriétés aux parents et propriétés aux enfants
Toutes les propriétés que nous venons de voir jusqu’à maintenant sont des propriétés que nous avons données à notre conteneur parent. Dans la pratique, et dans notre code, le parent étant notre section, nous avons appliqué ces propriétés flexbox à celle-ci afin de positionner nos éléments enfants.
Dans la suite de notre utilisation de flexbox, nous allons voir les propriétés que nous pouvons donner aux enfants. Même si j’avoue beaucoup moins les utiliser que les propriétés vues précédemment. Mais il faut savoir qu’elles existent et voir comment nous pouvons les utiliser dans notre code.
Petite pause et pub 🧑💻👍?
Nous avons bien pratiqué avec l’utilisation de Flexbox jusqu’à maintenant, alors n’hésitez pas à vous servir un café ou autres pour faire une pause avant de voir les propriétés que nous pouvons donner aux enfants.
Je profite également de cette pause pour vous demander un petit coup de main pour mon référencement.
Créer cette série m’a pris beaucoup de temps pour préparer le sujet, filmer, monter, assembler, et publier ces vidéos. C’est pourquoi, je me permets de vous demander quelques secondes de votre temps, tout au plus quelques minutes pour liker, commenter, partager, cet article ou ces vidéos. Vous pouvez également vous inscrire sur activateurweb.com pour être averti de la parution de prochains contenus. Vous pouvez également vous abonner à ma chaine YouTube, ou à ma page Facebook. Bref vous l’avez compris, amis lecteurs, j’ai besoin de vous pour m’encourager à continuer de publier du contenu. N’hésitez pas non plus à me dire quels sujets vous aimeriez voir comme prochains tutoriels sur le blog Activateur Web. Merci par avance de votre compréhension et de votre temps.
Utilisation Flexbox - La propriété " order "
La première des propriétés que nous pouvons donner à nos éléments enfants est la propriété order. Cette propriété permettra de définir l’ordre dans lequel nous allons aligner nos éléments. Selon la valeur de cette propriété, nous pourrons donc modifier l’ordre d’affichage de nos éléments sans modifier notre code HTML.
Mais assez parlé, pratiquons plutôt :
Utilisation Flexbox - La propriété " flex-grow "
La propriété flex-grow définit le facteur d’expansion d’un élément flexible selon sa dimension principale. Elle indique l’espace restant que l’élément va prendre dans son parent, relativement à la taille des autres éléments.
Passons à la pratique :
Utilisation Flexbox - La propriété " flex-basis "
La propriété flex-basis permettra de donner une taille minimum initiale à nos éléments enfants. À noter que si on applique une width (largeur), si flex-direction vaut row, ou une height (hauteur) si flex-direction est column, la propriété flex-basis sera prioritaire sur ces tailles.
Voyons cela :
Utilisation Flexbox - La propriété " flex-shrink "
La propriété flex-shrink définit le facteur de rétrécissement d’un élément flexible. Si la taille de l’ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur flex-shrink.
La propriété flex-shrink est généralement utilisée avec les propriétés flex-grow et flex-basis dans une autre propriété raccourcie qui est la propriété flex.
Alors voyons en pratique flex-shrink et flex :
Utilisation Flexbox - La propriété " align-self "
La propriété align-self permet d’aligner les objets flexibles en surchargeant la valeur donnée par la propriété align-items. Elle permet d’aligner un élément enfant ciblé, selon l’axe secondaire. À noter que cette propriété ne s’applique pas aux boîtes qui sont des blocs ou aux cellules d’un tableau.
Voyons cette dernière propriété que nous pouvons appliquer aux éléments enfants :
Utilisation Flexbox - Conclusion de la série
Nous voici arrivés à la fin de cette série consacrée à l’utilisation des propriétés de flexbox dans les feuilles de style CSS. Dans cette dernière vidéo, je partage avec vous quelques liens utiles, comme une feuille de triche, enfin c’est comme ça qu’on les appelle, mais qui sont plus un récapitulatif de toutes les propriétés et valeurs existantes regroupées sur une seule feuille. Également un guide et un lien pour apprendre de façon ludique avec le jeu Flexbox 🐸 Froggy. Vous pouvez retrouver ces liens à la fin de cet article.
Et enfin je vous demande de prendre quelques secondes, ou minutes sur votre temps, afin de m’encourager à continuer de publier du contenu. Merci à tous ceux qui prendront ce temps et m’encouragerons, en vous inscrivant sur le site, en commentant l’article, en mettant un like et en vous abonnant à ma chaine Youtube, et à ma page Facebook .
Conclusion et liens
Comme je vous l’ai dit au début de cet article, le but de cette série n’est pas de réinventer la roue ! J’ai simplement voulu apporter une aide par la pratique, en manipulant les éléments suivant les propriétés flexbox que nous pouvons leur donner.
Excusez parfois mes erreurs ou répétition, mais je code en direct et ne fais pas de mise en scène. C’est pour moi la meilleure façon de pratiquer et publier en restant sincère et vrai.
J’espère que cette série aura pu vous apporter un éclaircissement sur l’utilisation de Flexbox dans votre CSS.
N’hésitez pas à me dire ce que vous en avez pensé (sans être méchant 🙂 ), et à me dire quels sujets vous aimeriez lire sur le blog Activateur Web.
Je vous remercie d’avoir suivi cette série. Je vous dis à bientôt, et en attendant prenez soin de vous et restez curieux !
Liens utiles :
La feuille de triche : https://flexbox.malven.co/
Le guide Flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Le jeu Flexbox 🐸 Froggy : https://flexboxfroggy.com/#fr
