Maîtriser la Flexbox CSS : tout apprendre sur la mise en page impressionnante

1. Introduction: Si vous êtes développeur et souhaitez faire passer vos compétences en développement Web au niveau supérieur en maîtrisant CSS Flexbox. Alors ce cours est fait pour vous. Bonjour, je suis shuffle, un développeur front-end. Le poids de nos sept années d'expérience. Développeur moi-même et en soulignant, je me suis rendu compte que les développeurs débutants ont mal à comprendre les concepts de Flexbox. Mais en apprenant le CSS, Flexbox est indispensable pour y devenir développeur web. J'ai donc créé ce cours pour vous aider à tout comprendre sur CSS Flexbox à l'aide d' exemples pratiques et de projets. À la fin de ce cours, vous serez capable d' utiliser CSS Flexbox dans votre quotidien ou dans vos affiches pour créer différents types de mises en page. Donc, si vous êtes prêt à maîtriser CSS Flexbox, je vous verrai en classe. 2. Créer une boîte de flexion: Bonjour à tous. Dans cette vidéo, nous allons commencer à apprendre, utilise CSS Flexbox. Disons que nous avons un conteneur ici. Et à l'intérieur de ce conteneur, il y a plusieurs éléments HTML. Et comme vous le savez déjà, les éléments HTML peuvent être de deux types principalement différents. Le premier terme est donc l'élément en ligne, et le second est l'élément au niveau du bloc. Les éléments en ligne seront donc une pile comme celle-ci les uns après les autres. Les éléments en ligne ne prennent que l'espace dont ils ont besoin. Ils ont donc posé cette question en une seule ligne jusqu'à ce qu' ils n'aient besoin de plus d' espace que cela. Mais pour les éléments au niveau des blocs, les éléments vont prendre tous les avantages horizontaux. Cela va donc prendre tout le FAI disponible. Nous allons maintenant appliquer la Flexbox sur ce conteneur. Il est donc très facile d'appliquer la Flexbox sur le contenant. Nous allons simplement cibler le conteneur et lui donner une démonstration de flexibilité. Maintenant, nous sommes arrivés à Flexbox. Maintenant, les termes relatifs à la flexbox ne sont pas vraiment définitifs, mais nous allons appeler ce conteneur le conteneur flexible. Et les articles sont les éléments du conteneur flexible, nous allons les appeler articles flexibles. Je pense donc que ce sera plus intéressant et plus facile à apprendre si nous le faisons dans le code. Alors allons-y et voyons cela en code. J'ai donc créé un dossier dans le dossier qui se trouve uniquement sur index.html. Je l'ai ouvert par Visual Studio Code et en utilisant l'extension Live Server, je l'ai également ouvert par Chrome. Vous pouvez utiliser n'importe quel navigateur ou consulter un traité sur l'utilisation. Il s'agit donc du squelette HTML simple, rien d'autre à l'intérieur. Il y a créer un conteneur. Je vais juste créer un div avec la classe de container. Dans ce div, je vais mettre plusieurs cassettes. Nommons donc cet objet, ou nous allons leur donner le nom de classe de l'élément et un autre nom de classe pour chacun d'eux séparément. Donc, un article sur 23 comme ça. C'est donc le premier élément et je vais juste le copier encore quelques fois. Faisons en six éléments. Maintenant, remplaçons simplement l'article 234.56. C'est donc le quatrième. Allume-le. Et le dernier est le système. Nous avons donc six éléments qui sont des divs dans le conteneur div. Nous pouvons maintenant utiliser un fichier CSS externe. Ce que je pense, je vais juste le mettre dans une balise de style ici et le coder. Nous avons donc obtenu six dB ici. Donc, afin de le rendre plus évident et que nous puissions en savoir plus sur la flexbox. Nous allons le personnaliser un peu pour le contenant. Je vais juste lui donner une couleur de fond violette. Et nous allons également l' entourer d'une bordure. Je vais donc juste lui donner une bordure de trois pixels, qui est solide. Et utilisons la couleur noire. Maintenant, nous l'avons. Voici donc notre conteneur. Je vais juste lui donner un petit rayon de bordure pour qu'il soit beau. Alors, basal. Finissons-en avec le conteneur. À présent, ciblons l' objet et signons ici. Il va donc cibler toutes les divs à l'intérieur du conteneur div. Ciblons donc l'objet et donnons-lui une couleur de fond rouge. La couleur du goût. Faisons en sorte que la couleur soit la hauteur. Sinon, elle est à peine visible. D'accord ? Donnons maintenant une marge, exemple dix pixels, afin qu'il y ait un bel écart entre eux. Toujours pour le goût, je vais juste l'agrandir un peu. Utilisons donc la taille de police jusqu'à 70 pièces. Sa masse est plus grande. Maintenant, encore une fois, utilisons un rayon de bordure pour lui donner une belle apparence. Ajoutons également un peu de rembourrage pour que le goût ait quelques lacunes. Je l'ai trouvé. OK, donc vous en avez six qu'ils ont vus ici. Et les éléments de niveau de bloc y sont profondément ancrés. Il y a donc des améliorations mutuelles en particulier, sorte qu'il faudra tout ce qui est horizontal, c'est le mieux possible. D'accord ? Nous allons maintenant transformer ce conteneur en boîte flexible. Donc, pour ce faire, nous allons lui donner une démonstration de flexibilité. Maintenant, économisons. Et maintenant, voici le contenant à flocons et voici les articles flexibles. Parlons maintenant de la direction de flexion. 3. Les directions flexibles: Il existe deux types de propriétés différents que nous pouvons appliquer sur la flexbox CSS pour les aligner différemment ou pour les modifier. Nous pouvons donc appliquer le premier type de propriétés au récipient à flocons, qui est l'élément parent. Et certaines des propriétés que nous pouvons appliquer aux éléments flexibles ou aux éléments enfants. Donc, afin de le comprendre plus publiquement, nous allons parler des sorties. Donc, ici, comme vous pouvez le voir, ils vont s'aligner dans cette direction horizontale. Il part donc du côté gauche et va vers la droite. Il s'agit donc des sorties principales ou des sorties des flocons. Nous devons comprendre cela car nous pouvons réellement modifier les x ici. C'est donc le fléchisseur qui existe, donc l'opposé qui existe s'appelle l'axe transversal. Donc, dans ce cas, par défaut, le fléchisseur existe, va de gauche à droite. C'est la principale existence. À un autre terme. C'est en fait la ligne. La colonne sera un chapitre vertical sur un autre. Il s'agit donc de la ligne et de l'axe de flexion par défaut. Mais nous pouvons réellement modifier la réaction ou l'expression sexe en utilisant la propriété de direction flexible. La propriété PlayStation sera désormais appliquée au contenant de flocons. Voyons donc plus à ce sujet. La propriété de direction de flexion a donné lieu à quatre types de soufflets différents. Cette ligne, cette colonne, cette ligne inversée et cette colonne inversée. La valeur par défaut de la direction de flexion est donc ligne. Il va de gauche à droite et existe sur l'axe X ou sur l' horizontale. Maintenant, la colonne suivante est la colonne. Donc, la colonne, vous, je pense que vous avez déjà deviné qu'elle sera verticale, verticale l'une sur l'autre. Cela commence donc par le haut et par le bas. Dans ce cas, si nous orientons la phrase vers la colonne, maintenant que le principal existe ou que le flex principal existe, ce sera l'axe vertical. L'axe transversal est l'inverse qui existe, c'est-à-dire l'horizontal. Donc, en cas d'inversion de la ligne, comme les noms n'ont que la place principale, les sorties ici seront formées de droite à gauche. Maintenant, comme vous pouvez le voir dans l'objectif c' est vrai de gauche à droite. Il s'agit donc de la ligne et de l'incus ou pro reverse qui existe sera le contraire. Cela commence donc de la droite vers la gauche. Et aussi pour les objets, cela va commencer de droite à gauche. Ainsi, le premier élément se trouvera dans le coin supérieur droit, puis le deuxième, puis le troisième, puis le quatrième élément, et ainsi de suite. Pour l'inverse de la colonne, c'est également exactement la même chose. La colonne sera inversée. Il va donc commencer par le bas et aller vers le haut. Maintenant, dans ce cas, les sorties principales, nos principaux fléchisseurs, vont de bas en haut. Je pense donc que nous devons voir ces choses en code afin de les comprendre parfaitement. Voici donc le code et nous avons déjà parlé de cette expression direction j. La direction de flexion par défaut est donc la ligne, et voici les propriétés nous allons appliquer au conteneur flexible. Avec les éléments pour enfants. Nous parlerons des propriétés des éléments enfants plus tard. Mais pour l'instant, nous allons parler uniquement des propriétés que nous allons appliquer au conteneur de phrases. Appliquons donc la direction de flexion. Et par défaut, c'est rho. Donc, si nous l'enregistrons, cela ne changera rien car il s'agit de la valeur par défaut. Maintenant, si nous en faisons quelque chose de défini comme une colonne, maintenant ce sera comme ça. Voici donc la colonne. Maintenant, les sorties principales se font du haut vers le bas et la verticale existe, ou l'axe transversal partira de gauche à droite. Maintenant, si nous divergeons cela, disons que nous allons utiliser l'inverse de la ligne. Alors maintenant, dans ce cas, le fléchisseur existe ou l'existence principale part de la droite vers la gauche. Et les objets vont partir du site vers la gauche. Le premier élément se trouve donc dans le coin supérieur droit, puis 2 345,6. Maintenant, l'inverse de la colonne est également le même. Il va commencer par le bas et monter. Utilisons la colonne inverse pour enregistrer. Maintenant, le premier élément est en bas, puis le deuxième élément, troisième, le quatrième, le cinquième et le sixième. Ainsi, dans ce cas, la réaction par défaut du fléchisseur existe de bas en haut et l'axe transversal va de gauche à droite. Voici donc tout ce qui concerne la Playstation. Parlons maintenant du contenu justifié. 4. Alignement le long de l'axe Flex : justify-content: OK, donc le contenu de justification est en fait un arc le long de l'axe X qui est le principal existe. Donc, si nous changeons l'expression sexe, sont les principaux existants en utilisant une direction de lecture qui justifie que le contenu changera également parce que justify-content n'agit que sur le flex principal x n' est pas le long de l'axe transversal. Il existe donc six valeurs différentes pour justifier la pauvreté liée au contenu. La première est that flakes stat, qui est la valeur par défaut. C'est ce que nous avons déjà vu. Il est troisième en partant de la gauche, puis jusqu'à ce que tous les objets soient empilés. deuxième valeur du justify-content est l'extrémité flexible du flux qui va pousser à l'extrémité du récipient. Mais l'alignement sera le même entre le premier, le deuxième, le troisième et le quatrième. Mais ce sera au bout du contenant à flocons. Maintenant, pour le centre, il se trouvera en position centrale du récipient à flocons. Maintenant, la différence entre les deux est assez intéressante. Ainsi, en cas d'espace entre les éléments ou les éléments flexibles, l'écart sera similaire entre eux. L'article qui occupera la première place sera donc le jeûne, notre point de départ du contenant à flocons. Et l' article à la dernière place se trouvera au point final du conteneur flexible. Et tout l'espace disponible sera divisé entre les autres objets en flocons afin qu'ils aient un espace similaire entre eux. Maintenant, le cadre est un peu similaire mais un peu différent. Ainsi, s'il y a un espace autour de tous les éléments ou les éléments flexibles il y aura un espace similaire à gauche et à droite. Donc, comme vous pouvez le voir ici, le x est la valeur d'un nombre similaire de paires de bases. Chaque objet se trouve sur le côté gauche et sur le côté droit. Maintenant, l'espace est uniforme. Ainsi, dans le cas d'une situation spécifique, tous les éléments auront la même quantité d'espace. Ainsi, tous les espaces, y compris le premier un espace entre le début du conteneur et le dernier article, mais un espace entre l'extrémité du conteneur et le même espace est disponible entre tous les éléments et la bordure. D'accord ? Voici donc les six valeurs de justification du contenu et de justification du contenu uniquement le long des sorties principales. Nous allons donc voir cela avec du code. Alors allons-y. Je vais juste commenter l'inversion de la colonne Flex Direction, car nous allons utiliser la valeur par défaut, qui est rho. Justifiez donc également le contenu des arcs sur le conteneur flexible. Disons donc que c'est ce qui justifie le contenu. Et par défaut, la valeur est flakes. Démarrez. Donc, si nous l'enregistrons, cela ne changera rien car il s' agit de la valeur par défaut. Maintenant, la deuxième valeur dont nous allons parler est la fin des flocons. Donc, en cas de flocons, cela va pousser à la fin de la phrase contenant, qui se différencie par ce fond violet et une bordure de sang. C'est donc l'extrémité du conteneur flexible et ils vont être poussés à l' extrémité du conteneur. Maintenant, le centre, et je pense que vous savez déjà comment cela va se passer. Tous les articles ou les éléments flexibles se trouveront au centre du conteneur flexible de cette manière. Fellow est l'espace entre les deux. Allons-y, car d'ici là le premier article se trouvera au point de départ du contenant flexible et le dernier élément se trouvera au point d'arrivée du contenant à flocons et tout l'espace autour de l' objet, donc ce serait similaire. La valeur suivante dont nous allons parler est l'espace environnant. Ils vont maintenant avoir le même nombre de SP pour chaque élément flexible en particulier à gauche et à droite. Maintenant, la dernière valeur pour justify-content est l'espace égal entre les potins et tous les éléments. Nous aurons donc un espace similaire entre eux et entre le point de début et de fin du conteneur de phrases. Tout tourne donc autour du contenu justifié. Et encore une fois, il va s'organiser le long de l'axe X. C'est l'endroit où se trouve x maintenant, et c'est ainsi que cela va lui venir à l'esprit. Mais si nous modifions la direction de la flexion en ligne, cela justifiera que le contenu soit arqué le long de l'axe principal ou le long de la colonne. Alors ne vous y trompez pas. Nous en reparlerons plus tard. Maintenant, dans la vidéo suivante, parlons de l'alignement des éléments. 5. Alignement le long de l'axe transversal : alignement: L'alignement des éléments est en fait constitué d'arcs le long de l'axe transversal, car ils justifient le contenu ou le long de l'axe principal. Donc, dans ce cas, l'axe transversal est va du haut vers le bas ou la particule existe. Donc, afin de le démontrer parfaitement, nous allons donner une hauteur au conteneur. Donnons-lui une hauteur de 400 pixels. Et maintenant, comme vous pouvez le voir, le premier élément va commencer par le haut du conteneur et se diriger vers le bas. Il s'agit de la valeur par défaut des éléments d'alignement. C'est le halo du stress. Appliquons donc les éléments d'alignement . Ils sont également appliqués sur le conteneur flexible. La valeur par défaut est donc la contrainte. Maintenant, il va prendre tout l'espace dont il dispose sur l'axe transversal. Il s'agit de la valeur par défaut. Maintenant, il y a plus de hellos disponibles pour cela. Maintenant, le premier, ce sont les flocons, une pile. Donc, la seule équipe présente est la même que celle du contenu justifié. Il va donc partir du point de départ de l'axe transversal, qui est le sommet. Maintenant, il sera aussi serré en haut que le point de départ de l'axe transversal. Maintenant, le prochain mandat touche à sa fin. Donc, dans ce cas, ce sera au bout de l'axe transversal. C'est donc en bas. Le suivant est le centre. Ce sera donc au centre de l'axe transversal comme ceci. En fait, c'est très pratique si vous vous contentez d'un réseau local, quelque chose au centre. Supposons que vous ayez un div et que vous vouliez placer un autre div au centre de celui-ci. Vous pouvez donc simplement donner de la flexibilité à l'écran DVI parent, justifier le centre de contenu et aligner les éléments au centre. Ce sera donc au centre. Nous allons voir cela dans un exemple pratique plus tard. La valeur suivante est la valeur de référence. Donc, afin de comprendre la base de référence, nous allons y cibler certains éléments distincts. Je leur ai donc donné une classe distincte pour chacun des éléments. Ciblons l' élément numéro deux. Donnons donc à cet élément un rembourrage en haut, peut-être sur 100 pixels. Et donnons-lui également un rembourrage en bas. Peut-être. Donnons-lui 200 pixels. Maintenant, il va falloir cette masse, c'est mieux. Il y a aussi une cible et d'autres sur, peut-être l'objet pour et donnez-lui un rembourrage de 300 pixels. Maintenant, comme vous pouvez le voir ici, trois y mettent fin un peu plus, donc je vais juste le réduire à 200. Maintenant, comme vous pouvez le voir ici, tous les articles il contient ont le même goût. C'est donc difficile, en fait, ce que fait la base de référence. C'est tout ce qui concerne l'alignement des éléments. Et dans la vidéo suivante, parlons du Flex Wrap. 6. Exemple réel : centrer un Div: Maintenant que nous avons déjà appris à aligner les éléments et à justifier le contenu, je pense que le moment est venu de passer à un exemple concret. Ici, j'ai conçu une section consacrée aux héros de votre site Web. C'est donc très simple. Nous avons l' équipe de fond avec la section du texte et un bouton au centre de celle-ci. C'est donc ce que nous allons créer maintenant. Mais avant de commencer le cours, je pense qu'il vaut mieux le planifier pour l'art. Donc, dans un premier temps, nous allons vous expliquer comment vous allez procéder, puis nous allons suivre le cours. C'est une très bonne pratique pour tout planifier avant d' entrer dans le code. Donc, ce que nous pouvons faire ici, créer une section et nous allons donner à est créer une section et nous allons donner à l'équipe de fond sa section. Et à l'intérieur de cette section ou du div, nous pouvons réellement placer les éléments , à savoir le texte et le bouton. Mais nous allons appliquer les touches à l'ensemble de cette section et placer l'élément enfant au centre. Si nous avons plusieurs éléments à l'intérieur de l'élément parent, ce sera difficile. Donc, ce que nous allons faire, c'est créer un autre div, qui contiendra tous les éléments qu'il contient. Je pense donc que cela semble confus, mais cela va devenir facile si nous passons au code. J'ai donc créé un dossier, et à l'intérieur du dossier, nous allons dans index.html, un style.css et une image d' arrière-plan. J'ai créé le balisage ici. Nous avons une étiquette d'en-tête avec la classe du héros. Il s'agit donc de l'élément parent ou du conteneur flexible. Nous avons donc obtenu une balise d'en-tête avec la classe zéro. Ce sera donc notre conteneur flexible. Et à l'intérieur de ce contenant, nous n'avons qu'un seul objet en flocons, qui est le contenant. Et à l'intérieur, j'ai mis tous les éléments que nous avons ici, comme le goût du titre, sous-titre et le bouton. Voici donc l'article à flocons et voici le contenant à flocons. J'ai également ajouté un style de base car sinon cela va prendre beaucoup de temps. Je viens donc de supprimer la marge et le rembourrage de base du navigateur en insérant un astérisque et en donnant à cela un **** de marge zéro et de remplissage zéro pour le corps du texte. J'ai également ajouté une famille de polices Poppins et une couleur noire. Cela va donc être appliqué au texte ici. Et en ce qui concerne le héros qui sera notre conteneur flexible, j'ai ajouté l'équipe de fond J'ai également ajouté quelques styles pour le goût et aussi un peu de rembourrage au bas des articles et aussi le bouton ici. C'est donc tout. Nous allons maintenant l'appliquer. Donc, à cause de cette conception, il occupera la totalité de la fenêtre d'affichage. Nous allons donc attribuer à la section héros, au conteneur ou au conteneur flexible une hauteur minimale de 100 m de hauteur dans la fenêtre d'affichage. Cela va donc prendre toute la hauteur possible dans la fenêtre d'affichage. Cela va donc commencer ici et deux ici. Il s'agit donc de la hauteur de la fenêtre d'affichage de 100. Et cette section est consacrée au héros. Il faut donc lui donner une hauteur minimale de 100 BA, soit la hauteur de la fenêtre d'affichage. Maintenant, il va occuper la totalité de la fenêtre d'affichage. La prochaine chose que nous allons faire est peaufiner le sac County Miss. Appliquons donc ce contexte. Le psi est destiné à couvrir et non à contenir. Et il est également possible de le positionner au centre. Donc, position d'arrière-plan au centre. Vous pouvez également utiliser la forme abrégée, notre méthode abrégée si vous le souhaitez. Ok, donc on a un rendez-vous. Parlons maintenant du conteneur. Le conteneur a obtenu un maximum de 878 pixels. Alors allons-y. Nous allons cibler le conteneur div, qui contiendra toutes les choses qui se trouvent à l'intérieur qui ont un goût et un bouton, et lui donner un poids maximum. 780 pixels. Ils sont en sécurité. Maintenant, par défaut, il sera aligné à gauche. Mais ce n'est pas ce que nous voulons. Nous pouvons donc également modifier l'alignement du texte par rapport au centre. Ajoutons également un peu de rembourrage. Centre d'études. Et nous allons ajouter un peu de rembourrage à gauche et à droite. Alors allons-y. Je vais juste lui donner un zéro pour haut et le bas et de gauche à droite, peut-être 20 pièces. Parce que lorsque la taille de l' écran inférieure à 72 pièces, est inférieure à 72 pièces, il y aura des sorties dans le coin. Donc, si nous le retirons simplement et réduisons le contenant, comme vous pouvez le voir, il va ajouter ceci. Et si nous appliquons le rembourrage ici, il y aura un certain espace. D'accord ? Nous avons maintenant ajouté le maximum d'huile et le rembourrage. Nous allons maintenant le centrer. Donc, ici, l' élément parent est le héros, ou la balise d'en-tête avec la classe du héros. Et à l'intérieur, nous avons l'objet en flocons, qui est le contenant. Nous allons donc appliquer les flocons avec le héros. Alors allons-y. C'est le héros et nous allons appliquer cet affichage de flexibilité. Nous passons maintenant au conteneur flexible pour l'article, qui est ce conteneur ici. Et nous allons le centrer à la fois le long l'axe X et le long de l'axe transversal. C'est donc le fléchisseur qui existe. Et si vous souhaitez le centrer sur l'axe X, nous allons utiliser la justification du contenu centré. Il doit être centré horizontalement. Maintenant, nous allons également devoir le centrer sur le point où la particule existe ou la croix existe à cet endroit. Nous allons donc utiliser le centre d'alignement des éléments. Maintenant, il doit être correctement centré. Il existe différentes méthodes, le centrage de la pose et les éléments, mais cette méthode de flux est également très utile et peut être très pratique chaque fois que vous voulez essayer un exemple concret, ou peut-être pour coder un site Web pour un client ou simplement pour vous-même. C'est donc totalement réactif. Et comme vous pouvez le constater, c'est totalement centré. Si nous réduisons la taille de l'affichage, il sera également centré. Si je devais le rendre réactif, vous pouvez également ajouter la requête multimédia et les étapes. Donc, faire en sorte que le goût soit plus petit que cela, mais nous n'allons pas le faire ici. Juste pour la démonstration du centrage d'un élément ou de la profondeur d'un autre Dave à l'aide de flocons. C'est ce que nous avons fait et nous avons un autre projet ici. Ici, nous allons utiliser la requête multimédia. Voici donc leur score pour la vidéo suivante. 7. Envelopper ou Nowrap !: Je vais juste supprimer tous les objets qui s'y trouvent, comme les dossiers des séparatistes. Il y a aussi des commentaires à ce sujet et disons que c'est à cela que cela ressemble. Maintenant, le bonjour par défaut, ils alignent les éléments, est là, donc il en prend autant que possible. Il est disponible pour les articles. Maintenant, ici, il n'y a que six éléments flexibles. Et je vais également commenter le contenu justifié. Insérez maintenant le récipient flexible. Nous avons six articles. Il va être placé à l'intérieur de l'article flexible. Il y a en fait un espace à l'intérieur du conteneur, mais disons que nous avons de nombreux articles que nous ne pouvons pas mettre dans le conteneur. Je vais juste ajouter d' autres éléments ici. Nous avons donc 12 articles flexibles. Et comme vous pouvez le constater, il n'y a de place que pour neuf articles flexibles à l'intérieur du conteneur flexible. L'autre sera sur le côté droit. S'ils débordent, ils plieront le contenant. Nous pouvons réellement modifier cela en utilisant l'étape de rampe en flocons, également une propriété qui peut être utilisée sur le conteneur flexible. La valeur par défaut du piège à flocons est donc l'absence de rampe. Cela signifie donc qu'il ne faudra qu' un espacement horizontal ici. Donc, si les articles doivent déborder, se trouveront sur la même ligne. Ciblons donc cette représentation flasque et la valeur par défaut n'est pas encapsulée. Cela ne va donc pas emballer quoi que ce soit au point faire déborder les articles supplémentaires l'extérieur du contenant flexible. Maintenant, si nous voulons placer les éléments excédentaires sur la ligne suivante, nous allons utiliser le représentant. Maintenant, il va lancer les objets supplémentaires. À la ligne suivante. Il y a aussi un type dont le nom a été rapidement aggravé. Cela signifie que la première ligne sera poussée au bout de la sortie transversale. C'est donc hériter de la deuxième ligne. Il va commencer par la première tonalité, puis deuxième tonalité, et se dirige vers l'application, qui est l'agoniste qui traverse sorties ou qui inverse l'axe transversal. Revenons maintenant au rap. 8. Alignement des objets multilignes : align-content: Comme vous pouvez le constater, nous devons définir des lignes et il existe une propriété que nous pouvons utiliser avec le conteneur flexible pour aligner les éléments de la deuxième ligne Ce nom de propriété est le contenu de la compagnie aérienne. contenu des compagnies aériennes et le contenu de la compagnie aérienne ne sont donc utiles que si nous avons plusieurs lignes d'éléments Felix. Sinon, cela ne sert à rien. Il existe donc sept valeurs pour le contenu d'alignement et la valeur par défaut est la même que celle des éléments d'alignement. C'est donc le stress. Il va prendre tout l'espace dont il dispose, comme vous pouvez le voir ici. La première ligne va prendre, c' est-à-dire en gros, elle l'a fait, et la deuxième ligne aussi, donc elles sont un peu similaires. Il y a donc un espace étatique. Ce petit écart correspond la marge que nous avons ajoutée ici. Il s'agit donc de la valeur par défaut. La valeur suivante est celle des flocons, c'est-à-dire qu'elle est également similaire aux éléments d'alignement. Cela placera tous les éléments au point de départ de l'axe transversal, car le contenu de la compagnie aérienne est point de départ de l'axe transversal, car le contenu de un élément s'applique toujours sur l'axe transversal. Je vais juste l'augmenter un peu. Alors maintenant, ce sera au départ, le long de l'axe transversal. Maintenant, si vous voulez le pousser à la fin, comme hériter du bas, nous pouvons également le faire en utilisant l'extrémité des flocons. La valeur suivante sera le centre. Je pense donc que vous savez déjà ce qui va se passer. Tous les éléments seront placés au centre le long de l'axe transversal. La valeur de liste que nous avons obtenue ici est l'espace entre les deux. Maintenant, cela va être similaire avec le contenu justifié que nous avons vu. Désormais, tout l'espace disponible se trouvera entre les deux gammes différentes d'articles flexibles. La valeur suivante est l'espace autour. Alors maintenant, ils vont avoir un nombre similaire de paires de en bas et en haut de chacune des lignes. Le mandat suivant est égal. Maintenant, ils auront la même quantité d'espace depuis le haut et entre les éléments. Il y aura donc un espace similaire entre le conteneur div ou la bordure du conteneur div et entre les lignes. Voici donc le contenu du réseau local et cela peut s'avérer très utile. Lorsque nous avons plusieurs lignes d'articles flexibles. Et même pour des raisons de réactivité, disons que nous avons trois éléments pour un écran de plus grande taille. Et si nous faisons en sorte que la taille de l'affichage soit inférieure à celle d'une étoile, les éléments seront poussés à la ligne suivante. Ensuite, afin de les aligner parfaitement, nous pouvons utiliser la propriété align content. Parlons maintenant de la casquette. 9. Espace entre les objets flexibles: Je vais juste commenter contenu de l'alignement ici, et enregistrons. Ils vont maintenant obtenir la valeur par défaut. Maintenant, nous pouvons voir ce petit appareil tout autour des objets. C'est pour la marge. Nous allons faire un commentaire à ce sujet. Disons maintenant qu'il n' y a pas d'écart, en fait l'un à côté de l'autre. Il existe maintenant une propriété permettant de créer espace entre les éléments flexibles, qui s'appelle en fait l'écart. D'accord ? Il existe donc deux types d'écart. Nous pouvons utiliser l'expression container. Le premier terme est donc le rho cap et le second terme est l'écart entre les colonnes. Ainsi, l'AP non autorisé sera appliqué entre deux objets différents, exemple entre deux rangées différentes. Essayons donc cet écart de ligne. Et je vais utiliser dix pièces ici. Maintenant, comme vous pouvez le voir ici, il y a un écart de dix pixels entre les deux lignes différentes. Si nous voulons effacer un espace entre les colonnes, faites-le entre les éléments à l'intérieur de la colonne. Nous pouvons utiliser la colonne. Oui. Des joints, peut-être 15 pièces. Maintenant, il y aura un bel écart entre ceux-ci. Mais si vous ne mettez pas deux valeurs différentes ou les deux parties. Vous pouvez donc également le commenter et essayer de combler l'écart. L'écart sans spécifier la ligne ou la colonne. Il va l'appliquer à la fois à la ligne et à la colonne. Essayons donc 15 pièces. Et cela va créer l'écart entre les éléments le long de la ligne et de la colonne de 15 pixels. Si vous n'êtes pas d'un type de valeurs différent, nous pouvons également le faire. Essayons donc cinq pièces ici. La première valeur ici sera donc la ligne, et la deuxième valeur ici sera pour la colonne. Maintenant, l'espace de 15 pièces est disponible entre les rangées de cheveux et les taquineries de combat seront disponibles entre les colonnes. Voici donc les propriétés que nous pouvons utiliser sur le récipient à flocons. Et dans la vidéo suivante, nous allons parler de différentes propriétés que nous pouvons appliquer aux objets de la place. Alors on se voit là-bas. 10. Ordre des objets flexibles: Jusqu'à présent, nous n'avons parlé que des propriétés pouvant être appliquées, du conteneur facial ou de l'élément parent. Dans cette vidéo, nous allons maintenant parler des propriétés qui peuvent être appliquées aux éléments enfants ou aux éléments flexibles. Donc, dans un premier temps, nous allons parler de la commande. Donc, par défaut, cela va être ordonné tel quel, par exemple. Le premier élément vient en premier, puis le second. La façon dont nous l'avons réellement codé. Cela va ordonner dans le même sens et dans le même ordre. Je vais donc simplement le réduire. Ne gardons que quatre objets et jusqu'à ce qu'ils soient soulevés. D'accord. De plus, je vais juste supprimer les éléments ici pour le rendre moins encombrant. Faisons également un commentaire à ce sujet. Et aussi la marge. Et je vais juste ajouter un petit espace ici, genre 15 pixels. OK, très bien. C'est bon à partir. Maintenant, le premier élément vient en premier, puis le deuxième et le troisième, puis le quatrième. Disons donc que nous voulons les aligner, les ordonnons différemment. Ainsi, par défaut, tous les objets en flocons ont reçu un ordre de zéro, mais nous pouvons en fait appliquer un ordre séparément aux éléments enfants. Et la règle est que plus l'ordre de l'élément est bas , plus il arrive rapidement. Donc, ici, par défaut, tous les éléments ont reçu l'ordre de zéro. Donc, si nous mettons, si nous lui donnons un élément ou les flocons dans l' ordre de moins un, ce qui est inférieur à zéro, il viendra en premier. Supposons donc que nous allons cibler le point trois. Voici le troisième, et donnez cet ordre de moins un. Passons donc à cet élément trois, et donnons-lui l' ordre de moins un, qui sera inférieur à zéro et inférieur. L'ordre est que ça arrive vite. Sauvegardons ça. Et comme vous pouvez le constater, les troisièmes articles arrivent rapidement. Nous pouvons donc réellement l'utiliser et c'est très pratique. Nous en verrons plus à ce sujet dans la prochaine vidéo. Mais pour l'instant, commandons d' autres articles à l'intérieur. Le premier élément vient donc à la fin. Donc, si nous ciblons l'élément sur lequel se trouve le premier élément, il se trouve maintenant en deuxième position car le troisième élément a reçu un ordre inférieur à zéro, qui est l'ordre de activé. C'est donc le premier article qui a reçu un ordre de zéro. Maintenant, disons que nous lui donnons l'ordre de cinq. Maintenant, il est plus ordonné que le reste des articles, car le deuxième article a un ordre par défaut de zéro. Le troisième élément a obtenu l' ordre de moins un, et le quatrième élément a obtenu 84, ordre de zéro. Maintenant, le premier article a la plus grosse commande, donc il arrivera en dernier, car plus la commande est importante, ce sera le dernier article de l'ordre de cinq, et il arrivera en dernier. C'est comme ça que ça va se passer. Supposons donc que nous voulions mettre l'accent sur le quatrième élément, le premier. Nous pouvons également le faire si nous ciblons l'article et que nous donnons à cette commande une quantité plus importante que l'article pour et que nous donnons à cette commande une quantité plus importante que qui en a reçu la commande de cinq. Nous allons donc lui donner plus que cela. Donnons-lui donc six points et il viendra après le premier point. Mais si nous avons plusieurs éléments enfants dans le même ordre, que se passera-t-il alors ? Dans ce cas, l'alignement ou l'ordre apparaîtra tel que nous l'avons codé ici. Supposons donc que l'article soit de l'ordre de cinq, l'article d'un ordre de même valeur, soit cinq. Maintenant, si nous enregistrons ceci comme l'élément un qui vient en premier, alors c'est l'élément quatre. Maintenant, le dernier article sera l'article quatre, et avant cela, il y aura l'article en vente. Maintenant, les quatre viennent en dernier et le premier point vient avant. Voici donc tout ce qui concerne la commande. Et cela peut s'avérer très pratique chaque fois que vous souhaitez commander quelque chose de différent un écran plus petit ou quoi que ce soit d'autre. Dans la vidéo suivante, nous allons donc réaliser ce projet afin d'en savoir plus sur l'ordre et le flux. Alors allons-y. 11. Exemple réel : modifier l'ordre dans un affichage plus petit: Dans cette vidéo, nous allons nous en tenir à des postulats simples qui peuvent vous apprendre beaucoup de choses sur la flexbox. C'est donc notre projet et c'est une section consacrée aux héros. Donc, avant d'entrer dans le code, développons cela. Nous avons donc obtenu un conteneur. C'est notre conteneur ici. Je vais juste dessiner un rectangle. D'accord ? Voici donc le contenant. Il suffit de le caresser et de le retirer. D'accord ? Voici donc le contenant et nous allons mettre les flocons par jour dans ce contenant. Ici. À l'intérieur de ce contenant, nous en avons un autre qui sera notre enfant flexible. Ce sera donc l'enfant de notre article flexible, qui est celui-ci. Voici donc la phase enfant et voici le conteneur flexible. Nous pouvons donc appliquer les effets d'affichage à l'élément parent et le placer centre du contenu, alignant les éléments au centre de manière à ce qu'il soit centré le long de l'axe transversal. Et aussi l'analyse principale des flux. Nous allons également lui donner une hauteur maximale afin qu' il ne sorte pas du blanc. Donc, à l'intérieur, encore une fois, nous allons utiliser le display flex de ce conteneur, qui est en fait l' élément enfant d'un conteneur flexible. En utilisant la flexibilité de l'affichage, nous allons appliquer à différents éléments. Comme si nous avions cette division ici, qui est celle-ci. Je vais juste lui donner un coup. Ce sera un article rapide ou un article en flocons à l'intérieur de ce contenant flexible. Et le deuxième mandat que nous avons obtenu ici est celui-ci. L'image est donc le deuxième élément flexible et le premier élément de la liste sera ce goût. Nous allons donc mettre tous les goûts dans une division. Nous allons donc à différentes profondeurs à l'intérieur de ce récipient à flocons et nous allons l'aligner. Donc, dans le cas d'un écran de petite taille, nous allons faire en sorte que le fléchissement soit orienté vers la colonne. Maintenant, par défaut, ce sera la ligne. Mais sur un écran de petite taille, nous ne sommes pas des e-mails qui arrivent rapidement en haut en bas, nous allons mettre le goût. Alors allons-y. Je vais juste commencer par le visqueux. Créons donc une balise d'en-tête avec la classe Theta. Cela va donc tout contenir. Il s'agit donc de l'élément parent Nous allons y ajouter une couleur d' arrière-plan et utiliser la flexion de l'écran pour placer le contenu à l'intérieur de son centre. Maintenant, à la place, obtenons le conteneur div. Ce sera notre deuxième conteneur flexible. À l'intérieur de ce contenant, nous sommes parvenus à définir le DBS qui contiendra tout le goût. Un autre contiendra l'image. Alors allons-y. Au lieu de cela, ils ont dîné. Créons un div et je vais juste lui donner une classe de contenu de conteneur. OK, très bien. Maintenant, au lieu de cela, il y a plus tard Susan Sontag et a mis tous les goûts. Je vais juste copier et coller ceci. OK, on y va. maintenant à la technologie Prager, nous allons ajouter un texte factice, comme Lorem Ipsum. Ensuite, nous avons eu deux boutons différents. Il s'agit en fait d'un EMS. Je vais juste donner à Steve le nom de classe Hero. Boutons Hero. OK, inséré comme il s'agit d'un bouton ou d'un lien, nous allons utiliser la balise d'ancrage ici et l'insérer, les feuilles scellent les images. Et je pense que le nom de l'image est stocké au format PNG. Je vais juste copier et coller ceci parce que nous avons deux éléments différents ici. Le deuxième terme est le Play Store. OK, très bien. Il s'agit du serveur live et nous pouvons voir les éléments ici. Maintenant, le second est bon, au fond du récipient. Ce sera donc un conteneur flexible et voici l'objet flexible rapide et l' ensemble de couches, le deuxième élément retournant, qui sera une image de héros. Donnons-les, regroupons-les , héros Amos, dedans. Ajoutons les images des héros point PNG. Nous l'avons. Et par défaut, ce sera une ligne comme celle-ci. Je ne sais pas pourquoi le curseur clignote comme ça. D'accord, passons maintenant au fichier style.css que j'ai déjà ajouté. OK, je n'ai rien fait, donc je vais juste minimiser cela. Et comme vous pouvez le constater, il existe une marge et un rembourrage par défaut. Donc, si nous utilisons simplement l' esthétique pour supprimer le style par défaut, vous pouvez faire tout cela en zéro. Maintenant, il n'y a plus d'écart à gauche et à droite. Ajoutons donc une marge de zéro. Sois juste prudent. Ciblons maintenant le héros ici, qui est l'élément parent, qui va contenir tout ce qu'il contient. Avec le héros. Je vais juste lui donner une hauteur minimale. En fait, définissons d'abord la couleur de fond. Je vais juste mettre un code couleur hexagonal comme D, E, D trois CA. Voici donc la couleur du pelage enregistrée et nous avons obtenu la couleur des cheveux. Maintenant, nous allons lui donner une hauteur minimale de 100 pouces de hauteur vive. Cela va donc prendre la hauteur de la fenêtre d'affichage. Après ça. Faisons en sorte que le héros reste flexible. Mais avant cela, ça lui a donné une couleur au texte, comme si ça allait être un applet, toute cette dégustation Here. C'est un peu noirâtre. Ciblons maintenant le conteneur div. Faisons donc ce contenant. Et nous allons lui donner un maximum de huit pixels sur 13 70. Épargnons. Maintenant. Il a une hauteur de 13 à 70 pièces, mais nous ne pouvons pas voir car il ne se trouve pas réellement au centre. Nous allons donc maintenant appliquer le Display Flex à ce sujet. Vous devez maintenant définir des éléments flexibles. Par défaut, la direction de flexion est la ligne, elle apparaîtra donc après autre dans le sens horizontal. Faisons donc en sorte que l'affichage soit flexible. Épargnons. Comme vous pouvez le voir, cela se présente comme ça. Maintenant, nous ne sommes plus tous les objets au centre, comme le long de l'axe transversal. Nous pouvons donc utiliser le centre d' alignement des éléments. Maintenant, elles sont centrées le long de l'axe transversal, mais aussi, pour être sûr, nous allons également utiliser l' espace de justification entre les deux, afin que l'image se trouve dans le coin supérieur de la zone flexible, qui est le conteneur. Et le texte ici se trouvera au point de départ du conteneur flexible. Utilisons donc la justification du contenu entre. Cela ne changera rien car tous les éléments vont prendre tout ce que l'explicite peut avoir. Il y a également un petit espace entre les articles. Je vais juste utiliser la fenêtre d'affichage phi. Cela représentera donc cinq pour cent de l'OID total. Maintenant, nous allons le placer au centre. Je pense donc que nous l'avons vu dans le projet précédent. Nous allons donc cibler le héros qui ne contient que des éléments enfantins. Et offrez-lui un étalage de flocons. Alors allons-y. Affichez les contrefaçons et justifiez le contenu du centre. Alignez les éléments au centre. Il va donc être centré à la fois le long l'axe X et le long de l'axe transversal. Maintenant, faisons un petit coup de style. Je vais juste copier et coller ceci parce que je ne vais pas vous faire perdre du temps ici, et ainsi de suite. Un fils qui l'est est le texte du titre. J'ai une police, une police familiale, hauteur de ligne, une marge et un bas pour combler les lacunes avec le texte général. Pour la balise de paragraphe, nous avons ici une famille de polices Poppins. Et aussi une taille formée ou une marge en bas pour créer un espace avec les images ici. OK, donc tout est bien compris. Maintenant, ajoutons également un rembourrage avec le conteneur car nous ne pouvons rien voir de différent ici. Mais pour les écrans les plus petits, nous allons juste ajouter un peu plus. Surtout parce que si on le réduit. Comme vous pouvez le constater, chaque fois que la hauteur est inférieure à la hauteur maximale , par exemple 13 ou 70 pixels, ce sera comme au point final, début du conteneur ou, désolé, dans le navigateur. Maintenant, si nous ajoutons un peu de rembourrage avec le conteneur en haut et en bas, disons 50 pixels et de gauche à droite. Il y a ces 30 pixels. Épargnons. Ok, maintenant vous avez ce petit espace avec le rembourrage. Faisons donc en sorte qu'il soit réactif. Donc, pour le rendre réactif, nous allons utiliser la requête média. OK, alors allons-y. Je vais juste taper le support est nettoyé et nous allons lui donner une largeur maximale. Ainsi, lorsque la taille de l'écran sera inférieure à cette hauteur maximale, elle s'appliquera. Donnons-lui donc une hauteur maximale de 12 70 pixels. Je vais juste le détailler dans ce navigateur en particulier. Donc, dans la première liste, je reçois le conteneur et nous allons le déplacer dans la direction de la colonne. Donc, si nous orientons la flexion vers la colonne. Qui vient de se trouver dans cette rangée se trouve par défaut, donc ils sont plus heureux dans la rangée. Et si nous orientons la flexion vers la colonne, elles apparaîtront à la verticale les unes après les autres. Alors allons-y. Je vais juste cibler le conteneur et lui donner une direction flexible vers la colonne Enregistrer. Et comme vous pouvez le voir, ce sera jumelé et la colonne existe, c'est-à-dire que la verticale existe maintenant, c'est le flux principal qui existe maintenant parce que nous avons changé la direction de flexion par défaut. Mais comme vous pouvez le voir ici, par défaut, la commande s'affichera de la manière dont nous l' avons codée ici. Donc, dans cette division de conteneurs, nous avons trouvé le premier élément, contenu du contenant qui a le goût et le bouton qui s'y trouve , pour qu'ils arrivent rapidement. Ensuite, il y a le deuxième élément. Désormais, par défaut, tous les éléments contenus dans le conteneur flexible doivent être dans l'ordre de zéro. Pour que nous puissions, nous allons cibler ces e-mails ici, et nous allons le faire rapidement. Et nous pouvons le faire de deux manières différentes. Nous pouvons soit réduire l' ordre de cet EMS à zéro. C'est ainsi que nous allons le placer avant la zone de texte ici, comme le contenu du conteneur. Maintenant, le conduit du conteneur l'a fait tomber d' ordre zéro et il va être comme moins un, ce qui est inférieur à zéro. Il va donc apparaître rapidement. De plus, nous pouvons lui donner le contenu du conteneur si le mode bonjour est supérieur à zéro. C'est ainsi qu'il sera supérieur à l'ordre du héros EMS, qui est nul par défaut. Nous allons donc cibler l'image du héros et lui donner l'ordre de moins un, pour qu'elle soit inférieure à zéro. Alors allons-y. Hero va juste le mettre dans la ligne suivante. Bonjour, e-mails. Et il faut garder le même ordre de moins, économiser, et maintenant les États-Unis arrivent vite, puis il y a le goût. OK, donc allons-la encore plus, plus petite. Et comme vous pouvez le voir sur cette image, c'est comme si elle débordait. Si sexy que je vais faire, c'est juste ajouter l'image d' un héros en forme de cheveux EMS. Et ciblons la technologie EMS, en particulier pour la SEP. Et nous allons lui donner un OID maximum à cent pour cent, afin qu'elle ne survole plus. Voici donc notre section consacrée aux héros. Et ça a l'air bien. Vous pouvez également réduire légèrement la taille de police pour cet écran de plus petite taille. Mais là n'est pas le problème. Nous allons simplement voir comment s'organise l'ordre des éléments et propriétés. Alors maintenant, c'est totalement réactif sur un écran de plus grande taille. Les goûts viennent vite, puis il y a les images. Et si nous réduisons la taille de l' écran, ce sera le contraire. L'EMS compte donc rapidement après le point de rupture, qui est de 1 270 pixels. Et puis les EMS arrivent rapidement. Voilà donc tout ce qui concerne ce projet. J'espère que cela vous a plu et à bientôt dans la prochaine vidéo. 12. Distribution d'espaces supplémentaires : flex-grow: Dans cette vidéo, nous allons parler de la croissance des flocons. Donc, comme vous pouvez le voir ici, insérez la phrase container. Nous avons reçu quatre articles différents et ils n'en prennent que ce dont ils ont besoin. Par ailleurs, les cheveux sont gratuits. Ce sont donc des espaces vides et les flocons poussent. En utilisant Flex Grow, nous pouvons réellement utiliser les dépenses supplémentaires. Voyons donc comment nous pouvons le faire. Par défaut, tous les éléments appelés éléments flexibles par défaut augmentent de zéro. La valeur par défaut de la phrase grow est donc zéro. Maintenant, si nous disons à un article ou à un élément en particulier qu'un autre type de lieu pousse, il faudra passer à la radiographie. Voici donc comment ça va se passer. Ciblons donc un élément en particulier, comme l'élément quatre. Si nous donnons une phrase à cela, grandissez en pensant à ce qui va se passer. Désormais, par défaut, tous les autres éléments, comme l'élément correspondant à la troisième phrase, ont augmenté de zéro. Ils ne vont donc pas supporter le stress au lieu de n' en prendre que ce dont ils ont besoin. Mais maintenant, l'objet de la phrase Kata a grandi et le groupe d'amis parle de l'excédent de clientèle, d'accord ? Maintenant, comme le groupe de phrases est activé, il faudra donc tout le SPSS supplémentaire. Alors, sauvegardons-le. Et comme vous pouvez le constater, cela va prendre toutes ces pièces qui ont survécu. Nous pouvons maintenant diviser les espaces d'état entre plusieurs éléments flexibles. Comment pouvons-nous le faire ? Donc, cet objet est pour Dieu, s'ils se trompent sur cette cible et s'ils s'enfuient. Disons donc le point deux, le deuxième terme. Et nous allons donner à cela une phrase de trois. Alors maintenant, ce qui va se passer, c'est que nous allons simplement commenter cela. C'est donc le bus express qui va être divisé en quatre parties. La version en trois parties sur quatre sera donc attribuée au deuxième élément, car il contient l' expression arbre de croissance. Cette portion restante sera donnée à l'article, car des flocons ont grandi dessus. Je vais donc simplement supprimer tout commentaire. Et comme vous pouvez le constater, tous ces espaces ont été réservés au quatrième et au deuxième élément. Le deuxième élément a reçu un groupe de phase trois. Il va donc prendre les trois quarts des espaces et le photon n'en aura qu'une partie. Donc, si nous ciblons l' article ici et nous conservons la même valeur que l'objet pour. Veuillez donc augmenter la taille de l'article car l'article 1 obtiendra la même quantité. Et maintenant, dans ce cas, il va être divisé en cinq parties parce que sur deux plus trois, cela signifie que cinq par portion, ou l' inapte en particulier, sera donné à l'article pour la même personne ou le même article sera donné spécialement à l'article et trois cinquièmes seront données au second article. ne s'y développe sur le troisième élément. Il a donc conservé la valeur par défaut de zéro. Et il n'en faudra que trop, c'est parce qu'il en aura besoin. C'est tout ce qui concerne la croissance des flocons. 13. Aligner un élément particulier différemment : s'aligner: Bon, parlons maintenant de la cellule aérienne. Nous avons donc déjà parlé de l'alignement des éléments. L'alignement des éléments est donc appliqué au conteneur de phrases ou à l'élément parent. Mais les ventes des compagnies aériennes seront appliquées à l'élément enfant, à savoir les flocons. Donc, pour le démontrer, je vais simplement supprimer le commentaire de la hauteur de l'article. Maintenant, par défaut, il a détecté l'alignement des éléments, ses goûts, donc il coche. Tous les éléments explicites peuvent être placés le long de l'axe transversal car les articles de la compagnie aérienne situés le long de la croix existent. D'accord ? Supposons maintenant que nous allions au centre des articles des compagnies aériennes et la compagnie aérienne ne vend que des arcs le long de l'axe transversal. Donc, ici, tous les objets en forme de flocons ont été placés au centre parce que nous avons appliqué l'alignement des éléments avec le container div, qui est l'expression container. Maintenant, supposons que nous voulions une compagnie aérienne par article séparément. Alors, comment pouvons-nous y parvenir ? Pour ce faire, il y a donc la compagnie aérienne elle-même. Ainsi, en utilisant des cellules de lentille, nous pouvons cibler un élément flexible particulier et l'aligner séparément. Supposons donc que nous ayons le troisième élément et les cheveux, et que nous voulions les aligner différemment des autres articles. Alors allons-y. Ciblons l'arbre des objets et attribuons-lui une cellule d'alignement. Et pour le palais, la valeur par défaut est auto. Cela signifie que l'article aura le même alignement que celui indiqué avec un conteneur flexible, qui est le centre. C'est donc un moyen automatique. Maintenant, si vous voulez le faire différemment, nous pouvons également le faire. Ciblons donc les flocons. Cela signifie que vous savez déjà que ce sera au point de départ de l'axe transversal, qui se trouve en haut. Cela lui fera fléchir l'extrémité. Ce sera au bout de l'axe transversal. Maintenant, le prochain que nous avons ici est le centre. Et je pense que ce sera comme avant, parce que c'est le centre. De même, si vous souhaitez l' exprimer par le biais du, tout au long de l'axe transversal. Vous pouvez donc également le faire. Appuyons sur Enregistrer. Nous l'avons. Également. Nous pouvons utiliser la base de référence ici. Telles sont donc les valeurs. Nous pouvons donc utiliser les ventes des compagnies aériennes pour aligner les articles séparément du reste des articles qui seront alignés en utilisant la propriété align items avec le conteneur à flocons. Il est donc également très pratique chaque fois que vous allez créer des cartes. Disons que nous voulons installer carte NIC LAN séparément à l'intérieur du conteneur. Tout cela concerne donc la compagnie aérienne elle-même. 14. Modifier la taille par défaut: Parlons maintenant de la base flexible. Je ne pense pas que nous allons l'utiliser dans la vraie vie ou dans la vraie vie. Mais on apprend que je vais simplement le supprimer et disons que j'ai également supprimé la hauteur. En fait, je vais juste le garder mais aligner les objets. Faisons en sorte que ça démarre rapidement. La base fixe sera utilisée pour donner son élément flexible distinct et son type d'huile distinct. Ou ils peuvent l' espacer le long de l'axe X. Disons donc que nous allons cibler le deuxième élément ici, le point deux. Et nous avons des espaces supplémentaires, non ? Supposons donc que nous allions donner à l'objet une hauteur de 50  %. Comment pouvons-nous le faire ? Nous pouvons le faire en utilisant la base flexible. Et nous pouvons donner une valeur en pixels ou une valeur en pourcentage à tout. Mais la valeur par défaut de la base flexible est auto. Cela va donc répondre à autant de besoins spécifiques. Et en fonction des flocons, alignez les éléments ou justifiez le contenu. Il s'agit de la valeur par défaut. Si vous voulez lui attribuer un type de valeurs distinct comme une densité de 50 % en personne, cela occupera 50  % de l'espace total. Disons que nous avons obtenu plus de valeurs que cela, comme 100 %. Ensuite, il va passer à la ligne suivante parce que les ingénieurs doivent obtenir le 100 % le long des sorties des flocons, c' est-à-dire que cela existe. Essayons-le donc avec d' autres propriétés ici, comme l'élément trois, désolé, nous l'appelons un point ici. D'accord, donnons-lui une base de 50  % de flocons. Épargnons. Cela va prendre du temps, je vais juste réduire un peu 48 phases. Nous pouvons donc y mettre deux objets. Donnons également l'article pour le même jaune. En fait, je pense que nous devons le réduire davantage que cela. Comme si 45 n'était pas un arc. Encore une fois, notre point de départ. Si vous souhaitez créer une mise en page complexe comme celle-ci, nous pouvons utiliser la base de phrases, mais je pense que ce n'est pas très pratique car dans le cas de ce type de mise en page complexe, nous pouvons toujours utiliser la grille CSS pour cela, mais il vaut mieux savoir autre chose. Bon, voici tout ce qui concerne les passes de phase. Vous pouvez le voir dans la vidéo suivante.