CSS Flexbox démystifié

1. Intro: Bonjour et bienvenue dans ma classe. m'appelle Dan Burgess et je suis entrepreneur et développeur web espagnol, vivant à New York. Je développe des applications Web depuis près de dix ans. Flexbox est un modèle de mise en page CSS dans lequel les éléments d'un conteneur sont automatiquement organisés de manière réactive. Dans cette classe, nous allons passer les rôles les plus importants de Flexbox. Et cela vous donnera une compréhension complète du fonctionnement de l'outil. À la fin du cours, vous devriez être en mesure de comprendre Flexbox et d'inclure un conteneur flexible dans votre propre site Web. La classe s'adresse aux personnes qui ont une certaine expérience du HTML et du CSS, mais qui ne comprennent pas complètement le conteneur flexible. Commençons. 2. PRÉPARATION: Ok, donc j'utilise Visual Studio Code comme éditeur. Vous pouvez le télécharger sur le site Web de Visual Studio Code. Il est gratuit et multiplateforme. Il fonctionne dans tous les systèmes d'exploitation. J'ai donc créé deux fichiers. J'ai appelé l'un d'eux index.html et l' autre, style.css. Et ils se trouvent dans le même dossier. Je les ai ouverts tous les deux et ils sont vides en ce moment. Je vais donc créer ici ma plaque de cuisson HTML assez facile sur Visual Studio Code, qui est un point d'exclamation de type. Et il nous donne ici sur le BAC supérieur, si nous cliquons dessus, créera la plaque de chaudière. Je vais le sauver. Je vais laisser mon fichier style.css vide pour l'instant. Et je vais écrire quelque chose ici juste pour le tester. Et je vais ouvrir ça. Dans mon cas avec Live Server, Live Server, c'est une extension de Visual Studio Code. Je l'ai ici et je l'ai déjà installé. Et il suffit de cliquer avec le bouton droit de la souris sur le fichier et de cliquer sur Ouvrir avec le serveur live. C'est donc une étoile puis k. Parfois, il s'ouvre automatiquement. Je vais ouvrir ça dans Chrome. Donc, en gros, c'est la partie 5500 comme il faut taper ici. deux-points de l'hôte local 5500, qui est le nom du port et d'un résolveur. Nous sommes donc prêts à y aller. Je vais donc m'en débarrasser et je vais créer quelques éléments ici. Je vais créer un élément div avec notre classe de conteneurs. C'est très facile à faire sur Visual Studio Code. Je dois juste taper point et ensuite le nom du conteneur de classe dans ce cas. Appuyez ensuite sur Entrée. Et il a créé un élément div avec un conteneur de classe. Et dans ce développement, je vais créer quelques autres divs. Je vais donner au premier une classe de Dave, une autre avec une classe de div deux. Faisons 34. D'accord ? Je vais enregistrer, et je vais ajouter du texte ici, par exemple, appelons ça un élément, un article 234. Bon, je vais rafraîchir la page ici. En fait le serveur live, il se rafraîchit automatiquement. Voici donc nos quatre articles. Encore une chose, je vais donner à tous ces éléments un peu de rembourrage et de bordure juste pour que nous puissions les voir facilement. Donc, pour cela, je vais dire « dot container space div ». Et cela signifie tous les éléments div qui se trouvent à l'intérieur d'un élément avec une classe de conteneur. Et je vais dire « rembourrage ». Donnons-leur 15 pixels , puis bordons un px, solide. D'accord ? Et cela ne fonctionne pas. Salut, je n'ai pas lié le fichier CSS de point de style, donc pour cela, je dois ajouter ici à la balise de type link rel égale stylesheet, href est égal au style dot css. Et maintenant, cela fonctionne. Ainsi, nous sommes prêts à commencer à convertir la div principale en conteneur flexible et à voir ce que nous pouvons faire avec cela. 3. Création d'un conteneur Flex: Ok, donc ici, ici, je vais ajouter une règle pour la div avec un conteneur de classe. Pour cela, je dirai le conteneur. Et toutes ces règles vont s'appliquer à cette div. Donc, tout ce que nous avons à faire pour en faire un conteneur flexible c'est de dire « display flex ». Maintenant, c'est un conteneur flexible, cette div ici. C'est donc différent maintenant. Certaines propriétés ont été automatiquement appliquées. Nous en parlerons dans une seconde. Mais au fond, il ne s'agit que d'une note sur le nom. C'est ce qu'on appelle donc le conteneur flexible. Et ce sont les éléments flexibles. Nous pouvons également faire référence au conteneur flexible en tant que parent et aux éléments div en tant qu'enfants. Par conséquent, lorsque vous travaillez avec Flexbox, certaines propriétés s' appliqueront au parent à son conteneur flexible. Nous allons avoir des propriétés qui s'appliquent aux enfants. Commençons donc par les propriétés qui s'appliquent au parent, au conteneur flexible lui-même. 4. Propriétés de conteneurs flexibles: La première propriété va donc être Flex direction et la valeur par défaut est rho. Donc, si je fais cela, c'est redondant. Il ne va rien faire. C'est ce que nous avons déjà. Fondamentalement, lorsque la direction flexible est constituée d'éléments de ligne, les éléments sont affichés de gauche à droite. Dans les pays où nous écrivons de gauche à droite, ce sera le contraire dans les endroits où les gens de droite à gauche, comme par exemple en arabe, de droite à gauche. Ce serait donc le contraire. Mais en anglais, nous écrivons de gauche à droite. Les éléments flexibles seront donc affichés de gauche à droite. Nous pouvons faire au lieu de rangée, rangée inverse. Et bien sûr, cela va l'inverser. Et maintenant, ils partent de la droite, puis vous allez à gauche. Nous pouvons également faire une colonne. Maintenant, la direction ne sera plus horizontale, elle sera verticale. Et nous commençons par le premier article. Et enfin, bien sûr, nous pouvons faire l'inverse de la colonne dans laquelle maintenant l'article 1 sera en bas et ensuite nous passerons à 34. Ce sont donc les quatre directions flexibles que nous avons. Nous avons donc vraiment un caractère horizontal, soit dans le flux normal de textes comme de gauche à droite dans les pays occidentaux. inverse de la ligne, qui est de droite à gauche dans les pays occidentaux, colonne qui est comme du haut vers le bas, et colonne inverse de bas vers le haut. Je vais me débarrasser de celui-ci. La prochaine propriété va être flex, envelopper. La valeur par défaut. Il va être non, envelopper celui-là. Donc, si je fais cela et que je sauve, rien ne se passera et nous ne pouvons pas le voir. Je dois ouvrir les outils de développement pour que vous puissiez le voir. OK ? Donc, si je réduit la fenêtre, quand il n'y a pas assez d'espace pour eux, elles vont se rétrécir. Donc, si nous modifions la baisse de flux de probabilité, ce qui va se passer, c'est que lorsque nous réduisons la fenêtre, les éléments vont commencer à s'enrouler. Leur quatrième article va passer à la ligne suivante, puis à la troisième, puis à la deuxième, mais ils vont conserver leur taille. Alors regardons ça. Alors, faisons du rap ici. Et maintenant, nous voyons comment le quatrième élément passe à la ligne suivante, et cetera. Et enfin, enroulez à l'envers. Vous pouvez donc déjà imaginer ce qui va se passer. En gros, ils s' enroulent de bas en haut plutôt que de haut en bas. Je vais donc m'en débarrasser et la prochaine probabilité sera de justifier le contenu. Par conséquent, start est la valeur par défaut. Si je fais cela, rien ne se passe. Mais nous pouvons aussi le faire ici, et bien sûr, il sera justifié à la fin. Et nous pouvons aussi faire du centre. Et maintenant, ils sont au centre. Et il y en a trois autres qui sont intéressants et très utiles. L'un d'eux est un espace entre celui-ci. L'article 1 et l'article quatre sont au début et à la fin du conteneur flexible. Et puis tous les autres articles dans ce cas, l'article numéro 23 sont uniformément espacés à l'intérieur. Nous avons également de l'espace rond. Et dans ce cas, tous les objets ont le même espace autour d'eux. Celui-ci a donc cet espace ici et cet espace ici, et celui-ci a cet espace ici et cet espace ici. Ce qui se passe avec celui-ci, bien sûr, c'est qu'entre l'article 12, nous avons deux fois plus d' espaces entre l'article 1 et le début du conteneur flexible , bien sûr, car ici nous avons l'espace qui appartient à l'article 1 et l'espace qui appartient à l'article deux. Si nous voulons un espace égal entre tous les éléments et entre le premier et le dernier élément du conteneur flexible, nous pouvons utiliser un espace uniformément. Maintenant, tous les espaces sont identiques et ferment l'espace entre le premier élément et le début du conteneur de flux et le quatrième élément et la fin du conteneur flex. Je vais m'en débarrasser. Et cette propriété suivante est aligner les éléments. Pour celui-là, je vais ajouter d'autres choses ici. Par exemple, dans le premier, j'ajouterai un titre H2, un paragraphe. Dans le troisième. Je vais ajouter ceci ainsi qu'un paragraphe supplémentaire. OK ? conséquent, la valeur par défaut des éléments d'alignement de propriété va être un étirement. C'est donc redondant. Cela signifie que tous les éléments s'étireront en hauteur pour correspondre à la hauteur de l'article le plus haut, qui est dans ce cas l'article numéro trois. Si au lieu de cela, nous disons ici flex, commencez. Maintenant, ils sont tous alignés verticalement. En haut du conteneur flexible. Si nous disons « centre », il y aura un alignement au milieu. Et si nous disons bas, pas en bas, si nous disons flex et qu'il y aura un alignement au bas du conteneur flexible. 5. Propriétés d'article Flex: Super. Jetons donc un coup d'œil aux propriétés des enfants. Nous avons donc cette option ici, mais ce sélecteur touche tous les enfants en tant que groupe. Nous allons les cibler individuellement. Maintenant, pour cela, je vais créer une rangée pour chaque enfant. Disons donc 1234. Ok, parfait. Le premier est donc l'ordre et la valeur par défaut est 0. Donc, si je fais cela, rien ne se passe. Mais si au lieu de 0, je l'ai mis ici aussi, je ne l'ai pas encore sauvegardé. Mais il ne sera pas en deuxième position. Nous verrons ce qui se passe. Je vais le sauver. Maintenant, le premier, je vais appeler cet article un et l' article trois juste pour que nous puissions les voir facilement. L'article 1 est donc à la fin. Et la raison est que tous les autres articles ont automatiquement la commande 0. Donc, fondamentalement, celui-ci est 0, celui-ci est 0, celui-ci est 0 et celui-ci a la valeur la plus élevée. C'est donc à la fin. Si dans celui-ci, nous lui avons donné une valeur de commande de trois. Maintenant, cette div trois ira à la fin. C'est donc comme ça que ça fonctionne. La dernière propriété que nous allons examiner est flex, grandir. Et celle-ci est plutôt délicate. Je vais donc tout d'abord m'en débarrasser. D'accord ? C'est ainsi que cela fonctionne. La valeur par défaut est 0. Donc, si je dis Flex Grow 0, il y a redondant. Rien ne change, d'accord ? Donc, fondamentalement, chaque élément est pris l'espace dont il a besoin, à l'intérieur de leur conteneur flexible en fonction de son contenu. Il en est donc un, il a fallu suffisamment d'espace pour afficher son contenu. Et le rembourrage qu'ils ont, qui est de 15 pixels de chaque côté. Si au lieu de 0, nous définissons ceci sur un, si c'est dans tous les cas. D'accord ? Nous voyons maintenant que chacun occupe un quart de l'espace disponible, soit la largeur de la fenêtre. Il pourrait donc être tentant de penser que si nous fixons celle-ci à deux, maintenant, ces unités représentent le sous-total de cinq unités. Ceux-ci prendraient donc un cinquième, et celui-ci prendra deux cinquièmes. Mais ce n'est pas exactement comme ça que cela fonctionne. Laissez-moi sauver ça. Ce n'est pas exactement ce qui se passe ici. Si, par exemple, je mets ça à quatre, il sera plus facile de le voir. Maintenant, si c'était ce qui s'est passé, il s'agirait essentiellement de sept unités au total. Ceux-ci prendraient donc un septième chacun, et celui-ci prendrait quatre septième. Mais c'est vraiment le milieu. Si celui-ci était pris aux quatre septième de l'espace, il faudrait qu'il en prenne plus de la moitié et ce n' est pas ce qui se passe. Voici donc comment cela fonctionne. En gros, si nous les avons tous répétés à 0, ils prennent cet espace et il y a tout cet espace libre. Ainsi, lorsqu'ils ne sont pas réglés sur 0, c'est cet espace libre d' ici à la fin qui est divisé en conséquence en fonction du nombre qu'ils possèdent. Donc, de manière proportionnelle. Donc, si nous fixons celui-ci à quatre et que tout le monde en veut un. Donc, fondamentalement, chacun des trois premiers occupera 1 septième de cet espace. Je ne suis pas de l'espace entier, et celui-ci prendra quatre septième de cet espace et non pas tout l'espace. C'est ainsi que cela fonctionne. Donc, fixons celui-ci à 1114. C'est ce qui se passe. Fondamentalement, son article a déjà garanti l'espace dont il a besoin. Et c'est l'espace libre qui reste qui est divisé en conséquence. Fondamentalement, comme tout l'espace est considéré comme valant le nombre total d'unités, comme sept dans ce cas. Et puis il se divise et l'ajoute à sa div en fonction du nombre qu'ils ont ici. Donc, si nous définissons celui-ci sur 0, celui-ci n' aura que l'espace qu'il possède naturellement et qui est suffisant pour lui. Et maintenant, je le suis, le reste de l'espace libre s'ajoute en conséquence à ceux-ci. Maintenant, par exemple, l' espace libre est divisé par six. Et ceux-ci ont reçu à nouveau un sixième de l'espace libre. Et celui-ci reçoit six de l'espace libre. C'est un peu délicat, mais c'est comme ça que ça marche. 6. Outro: Merci d'avoir pris mon cours et j'espère que cela m'a été utile. Je vous encourage à expérimenter et à essayer de jouer avec les différentes propriétés dans toutes les différentes flexions de leurs axiomes disponibles. Merci encore, et je vous verrai dans mon prochain cours.