Les mises en page de mastering : les bases de la grille CSS et de la flexbox

1. Introduction du cours: Bonjour et bienvenue sur nos nouvelles mises en page de création de classes, grille CSS et Flexbox Bonjour. Je m'appelle Jota Short Car, table Steck complète et instructeur en ligne Ce cours complet est conçu pour vous aider à créer un site wavesite réactif, flexible et professionnel, l'aide de deux des outils Ces les plus puissants. Grille CSS et CSS Flexbox. La grille CSS est un système de mise en page bidimensionnel révolutionnaire qui permet un contrôle précis des lignes et des colonnes, Flexbox simplifie la mise en page unidimensionnelle En créant un alignement et un espacement parfaits pour des conceptions dynamiques et adaptables, nous allons commencer ce cours avec la grille Ces Qu'est-ce que la disposition en grille CSS ? Ensuite, nous apprenons à utiliser la grille, construire des lignes et des colonnes. Ensuite, nous allons apprendre le putorial de Ces grid gap Ensuite, grep, nom de la ligne de grille Grit Spani, grille am, fonction minmax, grille explicite implicite, alignement du ruban quadrillé, alignement des pistes , pieds automatiques en haut, pieds de grille, propriété de l'eau du réseau, grille imbriquée, éléments de grille superposés, etc. Ensuite, nous allons passer à la section CSS Flexbox. He bar, flexbox reaction, flexbox wrap, flexbox flow, flexbox justify content, flexbox alignment, flexbox an content, flexbox ansel, flexbox order, flexbox brown property, flexbox basics, string, margin ato, C flexbox, nested flex, enfin, nous basics, string, margin ato, C flexbox, nested flex, enfin, créons ici un projet en utilisant CSS Flexbox . Il créera une liste déroulante, la navigation principale. Il s'agit du cours complet sur Sess grit et Sess À la fin du cours, vous serez en mesure d'utiliser Sess Greet and Pledge Box pour créer une mise en page réactive et flexible qui s'adapte simplement à n'importe quel appareil Que vous soyez débutant ou cherchiez à améliorer vos compétences en b des, ce cours vous fournira tout ce dont vous avez besoin pour rassembler des joueurs Qu'est-ce que tu attends ? Commençons ensemble. 2. Qu'est-ce que la mise en page de grille CSS: Bonjour, les gars, bon retour. Dans ce tutoriel, je vais vous présenter ce qu'est la grille CSS et comment elle fonctionne. Pourquoi devrions-nous utiliser une grille CSS ? Le premier besoin, c'est un système de grille bidimensionnel. C'est un nouveau système de mise en page. Nous l'appelons bidimensionnel parce que nous pouvons gérer des colonnes roses ensemble. Notre deuxième avantage est que disposition en grille remplace la disposition flottante. Nous n'avons plus besoin d'utiliser la propriété flottante, comme le niveau de marge, et nous n'avons pas besoin de nous concentrer sur le flottement à gauche et le flottement à droite. Nous pouvons créer des mises en page très facilement. Notre troisième avantage est qu'il crée notre code tout d'abord et dix. Parce que nous n'avons pas besoin de nous concentrer sur les propriétés flottantes, cela augmente la lisibilité du code Notre quatrième avantage est que nous n'avons pas besoin d'utiliser de framework CSS, comme bootap, foundation, materialized Cass, etc. Parce que si vous comprenez bien la grille, vous n'avez pas besoin d'utiliser de framework. Parce que vous pouvez tout gérer avec Css Grid. Essayons de comprendre comment fonctionne réellement le réseau. Supposons que ce soit une profondeur. À l'intérieur de cette profondeur, nous avons six profondeurs différentes, et nous appelons cette structure un système de grille Sans utiliser de flottement ni de marge, nous pouvons créer des lacunes ici, et nous pouvons les gérer ensemble. Nous appelons ce conteneur parent un conteneur quadrillé. Pour créer ce conteneur de grille, nous devons utiliser une propriété CSS dans notre parent, qui est propriété d'affichage, grille d'affichage. Lorsque nous utilisons la grille de propriétés d'affichage, elle suppose automatiquement que ce conteneur parent un conteneur de grille. Comme vous pouvez voir tous les éléments de ce fichier, nous l'appelons éléments de grille. Ici, vous pouvez voir un deb individuel, que nous avons appelé cellule de grille, et ici vous pouvez voir quelques lignes entre ces profondeurs, et nous l'appelons ligne de grille. Vous pouvez voir ici quatre lignes de quadrillage. Ce sont toutes des lignes verticales. Ici, vous pouvez voir un espace entre ces deux cellules, nous l'appelons gouttière De même, ces lignes sont travaillées à la verticale. Comme je vous l'ai dit, cela fonctionne en deux dimensions, et nous pouvons le gérer très facilement, et cela fonctionne comme les cellules, les lignes et les colonnes d'un tableau. Ici, vous pouvez voir que selon la structure, nous avons deux lignes de grille dans notre image. Ici, vous pouvez voir en bordure jaune que nous appelons des colonnes quadrillées. Ici, vous pouvez voir un écart entre les lignes et les colonnes, que nous avons appelé zone quadrillée. Dans nos prochaines vidéos, nous allons comprendre comment créer des grilles. Dans notre prochaine vidéo, je vais aborder toutes les propriétés de la grille dans cette série de didacticiels. Nous allons également apprendre comment créer une belle mise en page en utilisant les propriétés de la grille. Vous pouvez voir ici le nom du navigateur, qui peut prendre en charge notre système de grille. Internet Explorer ne prend pas en charge système de grille, H est compatible, Firefox est compatible, Chrome est compatible, Safari est compatible avec Safari et prend également en charge les opérateurs. La plupart du temps, nous travaillons avec Chrome Safari et Firefox. Merci d'avoir regardé cette vidéo, Statute pour notre prochain tutoriel. 3. Création de grille CSS avec des lignes et des colonnes: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre comment créer des grilles. Nous allons commencer par deux propriétés. Notre première propriété est la colonne de tablette grecque, et notre deuxième propriété est la ligne de tablette grecque. Commençons par l'aspect pratique et essayons de comprendre comment cela fonctionne. Vous pouvez voir ici que je crée déjà un document esteml, et j'ouvre ce document estel en utilisant l'extension Live Server Sur le côté droit, vous pouvez voir notre navigateur Web. abord, je vais créer un D où je vais créer un conteneur quadrillé. Dep De plus, je vais attribuer une classe à ce conteneur de classes profondes Et dans cette profondeur, je vais créer six autres profondeurs, D, et je vais définir un élément de classe et un élément un Je vais reproduire cette profondeur cinq fois. Ici, j'utilise plusieurs classes, et je vais changer le nom de la classe. Point deux, point trois, point quatre, point cinq et point six. Dans cette profondeur, je vais taper du texte. Le premier, le deuxième, le troisième, quatre pi, et le dernier vaut six. Si je place ce fichier, vous pouvez voir ici toutes les profondeurs, première, deuxième, troisième, quatrième, cinquième et sixième Tout d'abord, je vais définir une couleur d' arrière-plan pour ce conteneur, le fond du conteneur à points étant gris. J'ai défini ce fichier, ici vous pouvez voir le résultat, et je vais également attribuer un w à ce conteneur. W, 700 pixels. Je vais également fournir une marge à ce conteneur. Marge, pour le haut, je vais utiliser 50 pixels. Pour Lp, je vais utiliser zéro. Pour le bas, je vais utiliser zéro, et F p, je vais utiliser 50 pixels. Si je définis ce fichier, vous pouvez voir le résultat ici, et maintenant je vais fournir une couleur différente pour différents éléments. Je vais donc créer un point de sélection. Je vais également définir un arrière-plan pour cet article. Si je définis ce fichier, vous pouvez voir le résultat, et maintenant je vais dupliquer cet élément plusieurs fois. Pour le deuxième point, je vais dire couleur orange. Pour le troisième point, je vais dire couleur verte. Ou point quatre, je vais dire couleur jaune. Au point 5, je vais dire couleur bleue. Pour le point 6, je vais dire couleur violette. Si je configure ce fichier, vous pouvez voir les résultats. Larry peut voir toutes les couleurs de notre t. Revenons au parent D, quelle classe est un conteneur ? Je vais utiliser une propriété, qui est l'affichage, et je vais utiliser la grille d'affichage. Si je définis ce fichier, vous pouvez voir ici n' y a aucun changement car nous ne créons pas de ligne et de colonne dans cette grille. Tout d'abord, je vais créer des colonnes, donc je vais utiliser un modèle de colonne de grille. Ici, nous pouvons mentionner le nombre de colonnes que nous voulons. Avec cela, nous pouvons mentionner les largeurs de colonnes. Supposons que je veuille deux colonnes, O premières colonnes, 200 pixels de largeur, et nos deuxièmes colonnes, 250 pixels Si je définis ce fichier, nous pouvons voir ici qu'il crée nos colonnes. Notre première colonne prend une largeur de 200 pixels et notre deuxième colonne prend une largeur de 250 pixels. Ici, vous pouvez voir sur une ligne que nous créons deux colonnes. Supposons que je veuille changer le poids de la première colonne, quelque chose de 350 pixels. Si je définis ce fichier, vous pouvez voir la largeur de la colonne. De même, nous pouvons définir la hauteur en utilisant une autre propriété. Laisse-moi te montrer. Créez des rangées d'états. Ici, nous pouvons définir le nombre de lignes que nous voulons. Ici, vous pouvez voir que nous avons un total de trois lignes dans notre conteneur parent t. Pour notre première ligne, je souhaite définir une hauteur de 100 pixels. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. Cela s'applique uniquement à notre première rangée. Pour notre deuxième ligne, je souhaite définir une hauteur de 200 pixels. Pour notre troisième ligne, je souhaite définir une hauteur de 100 pixels. Si je sauvegarde le fichier, vous pouvez voir le résultat ici. Si vous le remarquez, cela n' affecte pas la largeur de notre conteneur, qui est de 700 pixels. De plus, nous pouvons ajouter une autre colonne à ce d. Pour cela, je vais d' abord réduire la valeur de cette première colonne. 150 pixels. Pour notre troisième colonne, je vais encore une fois prendre 150 pixels. 150 pixels encore une fois. Si je place ce fichier, nous pouvons voir ici le résultat. Maintenant, il crée trois colonnes. Ici, nous pouvons voir que pour notre première ligne, elle a défini une hauteur de 100 pixels, et pour notre deuxième ligne, elle a défini une hauteur de 200 pixels, et il n'y a pas de troisième ligne dans ce conteneur. Si nous avions une troisième ligne dans notre conteneur, il définirait une hauteur de 100 pixels. Laisse-moi te montrer. Je souhaite dupliquer cet article une fois de plus. Si je mets ce fichier, désolé, nous devons doubler notre profondeur, pas cet électeur Si je double cette profondeur et que je définis ce fichier, vous pouvez voir le résultat ici Ici, vous pouvez voir que notre troisième ligne crée une hauteur de 100 pixels. Parce que nous avons mentionné une hauteur de 100 pixels pour notre troisième ligne. Ici, vous pouvez voir un espace vide, et maintenant je veux remplir cet espace vide avec notre troisième colonne. Pour cela, nous devons utiliser une propriété, qui est automatique. Si je place ce fichier, vous pouvez le voir ici, il remplit la zone avec notre dernière colonne. Il va remplir tout l'espace restant avec notre troisième colonne. Supposons que je veuille changer notre deuxième colonne avec 100 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Si j'utilise auto pour le poids de notre deuxième colonne, et si j'utilise cette valeur pour le poids de notre troisième colonne, et si je définis ce fichier, vous pouvez voir ici un résultat. Vous pouvez maintenant voir que notre première colonne prend poids de 150 pixels et que notre dernière colonne prend 100 pixels. Et notre espace fade est recouvert d'une deuxième colonne parce que nous utilisons une valeur automatique pour notre deuxième colonne Laissez-moi vous montrer une chose. Si vous utilisez le navigateur Firefox ou Chrome, appuyez simplement sur E 12. C'est une option de développement ouverte dans votre navigateur. Si vous surlignez le continent profond, vous pouvez voir ici une option nommée grit. Vous pouvez également voir la propriété, afficher le grain. Vous pouvez également voir une icône en forme de grain en forme d'air. Cela s'appelle Grit Editor. Si vous cliquez dessus, vous pouvez voir ici de nombreuses options. Pour l'instant, je ne vais pas l'expliquer. J'expliquerai tout cela plus tard, alors je le ferme. Mais si je clique sur cette option de grille, vous pouvez voir ici une ligne, et vous pouvez également voir les numéros de ligne, et nous l'appelons lignes de grille. Cela n'est possible que si vous utilisez la propriété de la grille d'affichage. Ici, vous pouvez voir que nous utilisons des pixels, mais nous pouvons également utiliser des pourcentages. Laisse-moi te montrer. Supposons que je veuille utiliser deux colonnes. Pour la première colonne, je veux utiliser 40 %. Pour notre deuxième colonne, je veux utiliser 30 %. Si je place ce fichier, vous pouvez voir ici le ds. Notre première colonne couvre 40 % de la largeur totale de notre conteneur. Et maintenant, je veux utiliser la troisième colonne, et pour notre troisième colonne, je vais utiliser le gain automatique. Si je configure ce fichier, vous pouvez voir le résultat. Notre première colonne prend 40 % ou la deuxième colonne 30 %, et notre troisième colonne prend également 30 %. Parce que nos première et deuxième colonnes en prennent 70 %. Si je passe de 100 % à 70 %, la valeur restante est de 30 % C'est pourquoi il faut 30 %. Non seulement cela, nous pouvons utiliser des pixels avec des pourcentages. Supposons que pour notre première colonne, je souhaite utiliser 100 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Notre première colonne mesure 100 pixels et notre deuxième colonne occupe 30 % de la largeur de notre conteneur et notre troisième colonne couvre l'espace restant. Non seulement il existe une autre unité, qui est Afer signifie fraction. Supposons que j'ai 12 colonnes d'un Afer et qu'une autre soit une colonne A. Si je sauvegarde ce fichier, vous pouvez voir ici la moitié notre conteneur d. Notre première colonne prend, la première moitié et notre deuxième colonne prennent ou la seconde moitié. Si j'utilise une autre valeur et que j'enregistre ce fichier, vous pouvez le voir ici créer un total de trois colonnes, et toutes les colonnes ont une largeur et une largeur similaires. Il divise également la largeur du conteneur, qui est de 700. Si j'utilise une valeur de deux pour notre troisième colonne, puis que j'enregistre le fichier, nous pouvons voir ici que notre troisième colonne prend deux fois plus d'espace que notre première colonne et notre deuxième colonne. Ici, vous pouvez voir que nous pouvons contrôler les grilles sans utiliser de flotteur Ensuite, je vais utiliser une autre propriété qui est grid gap. Laisse-moi te montrer. Je vais utiliser 15 pixels. Si je définis ce fichier, vous pouvez le voir ici, c'est fournir un écart égal entre les lignes et les colonnes. Si je clique sur cette option de grille, vous pouvez la voir. Maintenant, vous pouvez le voir clairement. Dans le prochain tutoriel, je vais vous expliquer clairement, et il existe une autre unité que nous pouvons utiliser comme valeur de colonne de modèle de grille, qui est la répétition. Laisse-moi te montrer. La répétition est essentiellement une fonction. Supposons que vous vouliez deux colonnes de même largeur. Dans notre premier paramètre, nous devons transmettre le nombre de colonnes que nous voulons. Dans notre cas, deux, puis vous devez transmettre la largeur, qui est de 150 pixels. Si je place ce fichier, nous pouvons voir ici le résultat. Ici, nous devons taper la valeur de largeur plusieurs fois. Si nous voulons quatre colonnes, il suffit d'en taper quatre ici. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. Il crée quatre colonnes de même largeur. Pour l'instant, je vais utiliser deux colonnes. Avec cela, je veux en utiliser une par colonne. Oui, nous pouvons le faire. Tapez un de R. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. Tout d'abord, nous en créons deux de taille égale avec une colonne, puis nous avons recouvert l' espace restant avec notre troisième colonne. De même, nous pouvons utiliser la valeur en pourcentage et la valeur en pixels ici. Laisse-moi te montrer. Supposons que je veuille une colonne de 40 %. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. De même, nous pouvons utiliser notre unité de fraction dans nos règles. De plus, nous pouvons utiliser l'unité de fraction pour nos règles. Mais avant de définir la hauteur de notre conteneur parent. Hauteur. 700 pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, je veux deux rangées de même hauteur. Je vais donc utiliser la fonction refit, deux rangées avec une hauteur f. Si je place ce fichier, vous pouvez voir le résultat ici. Ici, vous pouvez voir qu'il est également divisé en rangées. Cette valeur ne s'applique qu'à deux lignes, la première et la deuxième. Si j'utilise trois puis que je définis le fichier, vous pouvez voir ici que les trois lignes sont réparties de manière égale. Leur hauteur est égale. De même, nous pouvons utiliser la valeur des pixels ici. Supposons que pour notre première ligne, je vais utiliser 100 pixels. Pour notre deuxième rangée, je vais utiliser 30 %. Pour notre troisième rangée, je vais utiliser une unité AR. Si je place ce fichier, vous pouvez y voir le résultat. J'espère que le concept est maintenant clair pour vous. Ces deux propriétés sont très importantes pour créer une structure de grille. Notre premier nom de propriété est colonne de modèle de grille, et notre deuxième nom de propriété est rôle de modèle de grille. Dans notre prochain tutoriel, nous allons comprendre ce qu'est le grid gap. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 4. Tutoriel sur la grille CSS: est bon de vous revoir, dans ce tutoriel, nous allons apprendre une nouvelle propriété, grille CSS rouge, qui est CSS grid gap. Nous avons un écart de réseau lié à trois propriétés au total. Notre première propriété est l'écart entre les lignes de la grille, notre deuxième propriété est l'écart entre les colonnes de la grille, et la dernière est l'écart entre les lignes de la grille. Essayons de comprendre comment fonctionne la propriété Grid Gap. Ici, vous pouvez voir un écart entre les éléments de la grille, que nous avons appelé écart de grille. S'il est livré avec row is, nous l'appelons row gap. S'il est fourni par colonne, nous l'appelons espace de colonne. Commençons par l'aspect pratique et essayons de comprendre ce que c'est. Ici, vous pouvez voir côte à côte que j'ouvre mon visa studio Creator et mon navigateur en utilisant l'extension Light server, et j'ai déjà créé un document eSTEML dans mon répertoire Vous pouvez voir ici le total deux colonnes de la grille avec une valeur e, et avoir un total de trois lignes dans notre grille, 100 pixels, 150 pixels et 100 pixels. Entre ces éléments, je veux mettre un espace. Peut-être que la ligne est peut-être par colonne. Tout d'abord, je veux utiliser row is gap. Je vais utiliser un écart entre les lignes de la grille de propriétés. Et je veux attribuer un écart de dix pixels entre ces rôles. Laissez-moi vous montrer dix pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Augmentons la valeur, 30 pixels. Vous pouvez voir ici les écarts entre les rôles. Vous pouvez augmenter la taille de l'écart, comme vous le souhaitez. Il s'agit d'un écart entre les lignes. Si vous souhaitez espacer les colonnes par colonne, vous devez utiliser la propriété d'écart entre les colonnes de la grille. Laisse-moi te montrer. Je vais taper grid column gap. Je vais utiliser un écart de 20 pixels entre les colonnes. Si je sauvegarde ce fichier, comment voyez-vous le résultat ? Ici, nous pouvons voir que l'écart entre les lignes est 30 pixels et l' écart entre les colonnes est de 20 pixels. Non seulement cela, nous pouvons utiliser certaines propriétés pour ces deux propriétés. Pour cela, nous devons utiliser la propriété d gap. Laisse-moi te montrer Gap. abord, nous devons transmettre la valeur de la ligne, puis la valeur de la colonne. Pour la ligne, je vais utiliser 20 pixels. Pour la colonne, je vais utiliser 30 pixels. Si nous utilisons la propriété d gap, nous devons continuer à utiliser cette propriété. Je vais le retirer. Si je place ce fichier, nous pouvons voir ici le résultat. La distance entre les lignes est de 20 pixels et la distance entre les colonnes est de 30 pixels. Si j'utilise une valeur égale pour l'écart de ligne et l'écart de colonne, 30 pixels pour la ligne et 30 pixels pour la colonne, et que j'enregistre ce fichier, vous pouvez voir le résultat ici. Maintenant, je veux montrer trois colonnes dans notre conteneur. Je veux taper, répéter la colonne C. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. Vous pouvez également voir cet écart similaire entre les éléments de la grille. Ici, vous pouvez voir un espace vide car nous utilisons trois côtés de ligne différents. Si je supprime celui-ci, je veux dire le dernier, et que je place ce fichier, vous pouvez maintenant voir qu'il n'y a pas d'écart. hauteur de notre première ligne est de 100 pixels et celle de notre deuxième ligne HT est de 150 pixels. J'espère que vous comprenez maintenant ce qu'est la propriété GID gap Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 5. Tutoriel de positionnement des éléments de la grille CSS: Encore une fois, je suis de retour avec un nouveau tutoriel Reed Css Grid. Dans ce tutoriel, nous allons apprendre à positionner la grille C. Essayons de comprendre ce que sont les éléments de la grille. Que signifie la position des éléments de la grille ? Ici, vous pouvez voir un parent deep et nous l'avons appelé Grid Container. Tout au plus profond du conteneur parent, nous l'avons appelé éléments de grille. La question qui se pose maintenant est la suivante : quel est le sens du positionnement ? Supposons que vous souhaitiez déplacer les éléments de la grille 3 à la place du PP. Vous décidez également de déplacer Pi 1 à la troisième place, quelque chose comme ça, et nous l'avons appelé positionnement par grille. Comme vous pouvez le constater, nous déplaçons le troisième élément à la cinquième place. De même, nous déplaçons le cinquième élément à la troisième place. Liées à cet alignement, nous avons quelques propriétés sess. Laisse-moi te montrer. Comme vous pouvez le voir, nous avons des propriétés proto seven seses, comme le début de la ligne de grille, fin de la ligne de la grille, la ligne de la grille, le début de la colonne de la grille, e. Enfin, nous avons une propriété abrégée nommée zone de grille Sautons dans les vaisseaux jusqu' au coator et essayons de comprendre comment il en est ainsi Vous pouvez voir ici que je crée déjà un document d'estimation, et j'ouvre mon navigateur et mon chauffe-froid côte à côte. Si je vous montre, vous pouvez voir ici que nous avons un conteneur pour parents. À l'intérieur de ce conteneur parent, nous en avons six de profondeur au total. Je veux dire six éléments de la grille. Comme vous pouvez le constater, la couleur de chaque élément de la grille est différente. Dans un premier temps, je vais placer le premier élément de la grille à la sixième place. De même, je vais déplacer les six éléments de la grille en premier lieu. Comme vous pouvez le constater, nous avons déjà créé nos sélecteurs. Point un, point deux, point trois. Comme je vous l'ai dit plus tôt dans cette série de didacticiels, nous avons une option de navigateur dans notre console, savoir les lignes quadrillées. Laisse-moi te montrer. Sélectionnez simplement votre navigateur et appuyez sur pw me deb per mole. Je vais ouvrir ce panneau en bas de mon navigateur. Je vais appuyer sur cette option. Ici, vous pouvez voir une option dans mon conteneur à stylos, qui est une grille. Si je clique dessus, vous pouvez voir quelques lignes ici. Vous pouvez maintenant voir les numéros des lignes de la grille. Vous pouvez le voir par rangée. Vous pouvez également le voir en colonne. Dans ce tutoriel, nous allons comprendre quel est le cas d'utilisation de ces lignes. Passons à notre premier sélecteur d'objets, W étant le premier élément Comme je vous l'ai dit, je vais déplacer ce premier objet en six positions. Dans un premier temps, je vais utiliser une propriété, qui est greed row start Dans un premier temps, nous devons déplacer cet élément de la grille dans la deuxième ligne. Comme vous pouvez le constater, il s'agit de la deuxième ligne. Je vais en taper deux ici. Si je définis ce fichier, vous pouvez maintenant voir notre article de première année passer dans la deuxième rangée, et nous devons également déclarer la position finale. Pour cela, nous devons utiliser une autre propriété Sess, qui est la ligne n de la grille. Encore une fois, si je vous montre mes lignes de quadrillage, vous pouvez voir ici, ou la position n est trois C'est pourquoi nous devons en passer trois. Si vous utilisez la propriété Grit Ron, cela crée peut-être des problèmes lorsque vous réagissez du côté OF. Si je place ce fichier, vous pouvez voir ici qu'il n' y a aucun changement. Mais c'est une bonne façon d'utiliser cette propriété. Nous devons maintenant travailler avec des colonnes. Comme vous pouvez le constater, nous devons déplacer cet élément de la grille en troisième position. Pour cela, je vais utiliser une autre propriété cess, grid column third. Ici, je vais en mettre trois. Si je configure ce fichier, vous pouvez voir le résultat. Nous avons réussi à placer notre premier article lu à la sixième place. Nous devons également déclarer la position n de cette colonne, lire la colonne. Comme vous pouvez le constater, notre ligne se termine en quatrième position. Tu dois passer quatre. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Ce n'est pas obligatoire, mais dans un souci de réactivité, c'est très important. Maintenant, je veux déplacer ce quatrième élément en première position. Pour cela, je vais copier le code, passer au quatrième sélecteur d'éléments, et je vais transmettre le code Pour les lignes de départ, tapez un, et la ligne de fin est deux. De même, comme vous pouvez le constater, notre colonne commence par un et se termine par deux. Donc, pour taper colonne début un et colonne deux. Si je place ce fichier, vous pouvez voir le résultat ici. Nous avons réussi à déplacer notre quatrième conteneur en première place. Mais l'important, c'est que nous ne modifiions pas notre structure éternelle Vous pouvez voir ici notre structure éternelle. En utilisant les propriétés d'accueil CSS, nous pouvons modifier leur position sans changer leur structure réelle. Je vais maintenant vous montrer la méthode abrégée, toutes ces propriétés Maintenant, je veux déplacer le cinquième élément à la première place. Je passe au cinquième sélecteur d'éléments, puis je vais utiliser une autre propriété de grille de cas Si vous souhaitez créer un raccourci pour une ligne, vous devez utiliser la propriété grid row Laisse-moi te montrer. Ligne quadrillée. abord, nous devons fournir la position de la ligne de départ , qui est une, puis vous devez utiliser s, puis vous devez fournir la position de la ligne de fin , qui est deux. De même, nous avons une propriété abrégée pour la colonne, qui est une colonne de grille Laisse-moi te montrer. Nos colonnes commencent par la ligne numéro un et se terminent par la ligne numéro deux. Si j'ai lu ce fichier, vous pouvez voir ici que nous avons réussi à déplacer notre article de cinquième année en premier lieu. Mais qu'en est-il de l'article de quatrième année ? Nous ne retirons pas les articles de quatrième qualité de ce contenant. Il existe toujours en premier lieu. Juste le point 5, superposez le quatrième. C'est pourquoi nous ne pouvons pas voir le quatrième. Non seulement cela, nous avons un autre raccourci pour désigner cette propriété En utilisant ce raccourci, nous pouvons transmettre quatre valeurs à la fois, qui sont la zone de la grille Laisse-moi te montrer. Supposons que je veuille déplacer le sixième élément à la deuxième place. Pour cela, nous devons fournir le point de départ de la ligne et le point de départ de la colonne. Notre point de départ de ligne est un, et notre point de départ de colonne est deux, puis nous devons fournir fin de ligne et le point de fin de colonne. Notre point de fin de ligne est deux et notre point de fin de colonne est trois. Si je place ce fichier, vous pouvez voir ici que nous avons réussi à déplacer nos six conteneurs à la deuxième place. Il vous suffit d'utiliser une propriété de grille CSS, qui est la zone de grille. Rappelez-vous simplement que vous devez d'abord fournir le point de départ de la ligne, puis le point de départ de la colonne. Ensuite, vous devez fournir le point de fin de ligne et le point de fin de colonne. J'espère que vous comprenez maintenant comment fonctionnent les lignes et les colonnes. Il existe de nombreuses méthodes pour positionner nos grilles. Dans mes prochaines vidéos, je vais vous les apprendre toutes. Dans notre prochain didacticiel, nous allons apprendre comment répartir les éléments de notre grille. Supposons que vous souhaitiez couvrir votre troisième objet. Je veux juste remplir cette zone vide avec ce troisième élément. Cela signifie qu'il va falloir deux colonnes huit. Je me souviens de cette méthode span. Restez donc à l'affût de notre prochain tutoriel. Merci d'avoir regardé cette vidéo. À bientôt. 6. Tutoriel sur les éléments de la grille CSS: C'est bon de vous revoir, je suis de retour avec une nouvelle grille de processus liée au tutoriel. Dans ce tutoriel, nous allons apprendre à utiliser ces grid spanning. Mais avant de commencer la pratique, nous devons comprendre quelle est la signification du terme span ? Simplifions-le. Ici, vous pouvez voir un conteneur quadrillé. À l'intérieur de ce conteneur quadrillé, nous avons proto six objets Si vous remarquez, vous pouvez voir que chaque élément d w est identique, et maintenant je veux étendre d1w Je souhaite étendre l'article numéro un à deux articles. De même, je veux étendre l'élément deux, row is, quelque chose comme ça. Pour le premier élément, nous utilisons l'envergure des colonnes. Pour le deuxième élément, nous utilisons l'envergure des lignes et les autres éléments sont automatiquement disposés à sa place. Commençons par l'aspect pratique et essayons de comprendre comment cela fonctionne. Ici, vous pouvez voir, côte à côte, que j'ouvre mon site au clavier et mon navigateur en utilisant l'extension Light Server Comme vous pouvez le constater, nous avons au total six articles de la grille dans notre conteneur parent, et nous les classons en série. Commençons par les lignes de la grille. Je vais appuyer sur deux. Si je clique sur cette option, vous pouvez voir les lignes de la grille, et maintenant je veux couvrir notre premier élément Colonne wiles, et je veux étendre cette colonne jusqu'à la ligne numéro trois Je vais taper la colonne de grille n trois. Vous savez déjà que l'article n est notre premier article. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. Étalez avec succès notre premier élément de la grille. Colonne 1. Si vous le remarquez, vous pouvez voir tous les éléments de la grille changer automatiquement de place. Vous pouvez constater que l'article numéro six est descendu et que nous ne spécifions aucune hauteur pour notre troisième brut. C'est pourquoi il a l'air petit. Je vais maintenant spécifier la hauteur de ce troisième dessin, cent pixels. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. hauteur de notre première ligne est de 150 fixels, et la hauteur de notre deuxième ligne est de 150 fixels, mais la hauteur de notre troisième ligne est de 100 pixels Encore une fois, je vais activer mes lignes de quadrillage. Et maintenant, je veux étendre notre deuxième élément par ligne, et je veux l'étendre de ce point à ce point , cela signifie quatre. Pour cela, nous devons travailler avec ces deux propriétés. Je vais copier ces propriétés et les coller ici. Je vais modifier le point de fin de ligne idéal, qui est quatre. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, cela ressemble à une page Web. Voici notre en-tête, et voici notre barre latérale. Non seulement cela, nous pouvons utiliser une propriété courte pour cela. Laissez-moi vous montrer la ligne de lecture. Si je commente ces deux propriétés, et si j'en tape une, slash, quatre, et si je définis ce fichier, vous pouvez voir le même résultat ici. Il n'y a aucun changement. J'espère que vous comprenez maintenant comment fonctionne l'orthographe. Permettez-moi de vous montrer une chose. Ici, vous pouvez voir que nous avons un total de trois colonnes avec une valeur F. Pour cet exemple, je vais commenter cette propriété. Encore une fois, je vais activer les lignes de la grille. Ici, vous pouvez voir que nous avons un total quatre colonnes dans notre structure. Mais que s'est-il passé ? Si nous passons cinq valeurs ici, si je définis ce fichier, vous pouvez le voir ici, il étend notre colonne avec la valeur par défaut. Nous avons maintenant quatre colonnes au total dans notre conteneur. Mais ici, vous pouvez le voir, nous ne déclarons pas quatre colonnes. Nous déclarons simplement trois colonnes. Nous pouvons étendre notre élément de grille au-delà du conteneur. Ensuite, il ajoute automatiquement l'élément de grille en fonction de la valeur de la fraction. Mais ce n'est pas une bonne pratique. Je vais en utiliser quatre. Si je pose ce film, vous pouvez voir le résultat. Je vais maintenant fixer le troisième élément dans sa position absolue. Pour cela, dans le sélecteur d' éléments 3, je vais taper grid row Je vais également activer les lignes de la grille. Notre troisième élément commence par R numéro deux et se termine par deux lignes numéro trois, et la propriété suivante O est la colonne de la grille. Il commence également à la colonne numéro deux et se termine à la colonne numéro trois. Si je configure ce fichier, vous pouvez voir qu'il n'y a aucun changement. Il s'agit de la position absolue du troisième élément. Maintenant, je ne peux pas déplacer cette grille depuis cet endroit, et maintenant je veux étendre la deuxième colonne jusqu'à la ligne numéro trois. Pour cela, je vais utiliser la propriété de colonne de la grille. Et notre colonne part de la ligne numéro un et se termine à la ligne numéro trois Si je place ce fichier, vous pouvez y voir un résultat différent. Comme nous plaçons déjà notre troisième creux dans cette position, notre deuxième élément de la grille ne peut pas le remplacer. Ensuite, il diminue automatiquement. Mais si vous remarquez, vous pouvez voir nous n'utilisons que la propriété de la colonne de grille. Nous n'utilisons pas la propriété Grid Row. Si j'utilise la propriété grid row, laissez-moi vous le montrer. Rangez et essayez de déplacer cet objet à cet endroit. Laisse-moi te montrer. Mais d'abord, je vais activer la ligne rouge. Notre ligne commence à la ligne numéro deux et se termine à la ligne numéro trois. Si je sauvegarde ce fichier, vous pouvez maintenant voir un résultat différent. Maintenant, ils se chevauchent. Si vous souhaitez voir l'élément see dans son intégralité, vous devez utiliser la propriété d'index D. Laisse-moi te montrer. Je vais taper le nom de la propriété. Indice Z. Par défaut, il est livré avec zéro. Alors, saisissez-en un. Si je définis ce fichier, vous pouvez maintenant voir le deuxième élément dans son intégralité. Notre troisième élément existe toujours derrière le deuxième élément, et maintenant je vais vous montrer les différentes valeurs que nous utilisons pour le span, qui est span. Laisse-moi te montrer. Type de somme, span, et je veux étendre notre premier élément jusqu'à quatre colonnes, Span, espace quatre. Si je définis ce fichier, désolé, nous n'avons pas quatre colonnes dans notre conteneur. C'est pourquoi il étend notre colonne et crée une nouvelle ligne de grille. Pour cela, nous devons utiliser span three. Si je définis ce fichier, nous revenons maintenant à notre ancien résultat. Si je vous montre les lignes de la grille, nous pouvons voir ici quatre lignes au total. Cette valeur fonctionne avec les numéros des éléments de la grille, et cela fonctionne avec les numéros des lignes de la grille. C'est la principale différence entre deux valeurs, et nous pouvons également l'étaler judicieusement. Laisse-moi te montrer. Span T. Si je définis ce fichier, maintenant nous couvrons notre premier conteneur, lignes sont également réparties par colonne. Comme nous utilisons la propriété ZD dex pour notre deuxième article, c'est pourquoi notre premier article ne couvre pas le deuxième article Je sais que c'est un peu compliqué. Mais j'essaie de l' expliquer simplement. Non seulement cela, nous pouvons utiliser cette valeur avec cette valeur différente. Laisse-moi te montrer. Espandez deux. Si je définis ce fichier, comment pouvez-vous voir le résultat ? Pour l'instant, je n'en ai pas besoin. Donc, pour l'annuler. Je vais également modifier la valeur de fin de ligne de la grille. Deux. Encore une fois, je vais activer les lignes de la grille. Supposons que nous ayons beaucoup de colonnes dans notre conteneur et que je souhaite étendre l'élément de la grille rouge du début à la fin de ce conteneur. Mais je ne sais pas combien de lignes de colonne nous avons. Pour cela, nous pouvons utiliser des points négatifs. Ici, vous pouvez voir un numéro de ligne moins un. N'oubliez pas que notre numéro de dernière ligne commence toujours par moins un. Nous pouvons utiliser le moins v ici. Laisse-moi te montrer. Si je tape moins un et que je définis ce fichier, vous pouvez voir ici qu'il n' y a aucun changement. J'espère que vous comprenez maintenant comment sont les spannings. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 7. Tutoriel de nommage des lignes de grille CSS: Bonjour les gars, c' est bon de vous revoir. Dans cet arial, nous allons apprendre à nommer les lignes de grille CSS. Dans notre précédent tutoriel, nous avons utilisé des lignes de quadrillage pour couvrir nos éléments de grille Mais dans cet essai, nous allons apprendre comment attribuer un nom de ligne, comment pouvons-nous également utiliser le nom de ligne ? Permettez-moi de le simplifier. Il s'agit de notre élément d'en-tête et de notre élément de barre latérale Pour créer cet élément de la barre latérale, nous devons utiliser la propriété grid ra et la propriété grid column Dans la propriété grid ra, nous devons d' abord passer le point de départ de la ligne, puis le point de fin de la ligne. Mais dans ce tutoriel, nous n' allons pas utiliser de numéros de ligne. Nous allons créer notre propre nom de valeur. Comme vous pouvez le voir pour le point de départ, j'utilise la barre latérale Start, et pour le point final, j'utilise la barre latérale n. Commençons par l' pratique et voyons comment cela se passe. Ici, vous pouvez voir, côte à côte, aspect pratique et voyons comment cela se passe. Ici, vous pouvez voir, côte à côte, que j' ouvre mon studio utilisateur Coraor et mon navigateur en utilisant l' J'ai déjà créé un document similaire pour cet exemple. Vous pouvez voir ici une mise en page Web, que je crée à l'aide de notes. Ici, vous pouvez voir un en-tête, une manœuvre pour différentes cases, un accessoire, et enfin un Ici, vous pouvez voir le contenant et tout ce qu'il contient. Je crée cette mise en page en utilisant le spanning. Passons au sélecteur profond du conteneur. Ici, vous pouvez voir que nous avons un total trois colonnes de grille avec une valeur A. Vous pouvez également voir que nous avons une rangée totale de fib de différentes tailles. Pour l'en-tête, j'utilise une hauteur de 150 pixels. Pour la manœuvre, j'utilise une hauteur de 50 pixels, et pour notre troisième rangée, encore une fois, j'utilise une hauteur de 150 pixels fixes. Pour le pied de page, encore une fois, j'utilise une hauteur fixe de 50. Ici, vous pouvez voir que j' étale mon en-tête du début à la fin de un à moins un. Ici, vous pouvez voir que nous utilisons la valeur de la grille pour cela. Je vais activer mes lignes de quadrillage en mode développeur. Et vous pouvez voir les numéros de ligne. Ce n'est pas un modèle très complexe, mais nous devons parfois faire face à modèles difficiles ou à un modèle très complexe. Dans ce cas, il est très difficile de se souvenir de ces chiffres, et cela peut créer de très gros problèmes. Pour résoudre ce problème, nous attribuons un nom à ces lignes, et nous appelons ce processus la dénomination des lignes de grille. Voyons donc comment cela fonctionne. abord, je vais commencer par les règles, et nous devons attribuer ces valeurs à ces noms de ligne. Pour la première ligne de note, je vais utiliser un nom qui est header start. Laisse-moi te montrer. Tout d'abord, je vais utiliser des bases carrées. Au lieu du carré***, je vais attribuer un nom à notre première ligne, header start. N'oubliez pas que vous ne pouvez pas donner de rythme entre deux mots. Et je vais activer le rap. Sinon, tu ne peux pas voir mes lignes. Vous pouvez utiliser des crayons hauts, soulignement ou tout autre caractère Si je commence cet en-tête, nous devons également le terminer, et je veux terminer cet en-tête dans la salle numéro deux. Je veux utiliser à nouveau des versets carrés. Dans les versets carrés, je vais taper header end header, end. Si je définis ce fichier, nous pouvons voir ici qu'il n'y a aucun changement. Maintenant, je vais vous montrer comment utiliser ces noms dans notre valeur ? Dans notre propriété gridro, je vais taper l'en-tête Start, car c'est notre point de départ Pour notre point final, je vais utiliser la valeur de fin d'en-tête. Si je sauvegarde ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Nos noms fonctionnent correctement. Passons à la section du menu. Créons un point de départ pour le menu. Pour cela, il n'est pas nécessaire d' utiliser une autre base carrée. Je veux juste utiliser un espace entre fin de l' en-tête et le point de départ du menu. Pour le point de départ du menu, je vais utiliser Menu Start. Je vais utiliser le nom de démarrage du menu. Commencez, et pour terminer ce menu, après 50 pixels, je vais utiliser le nom de fin du menu. Fin du menu. Et je vais utiliser ces noms dans les propriétés de notre grille. Laisse-moi te montrer. Je vais donc copier le nom de démarrage du menu, et je vais en supprimer deux avec ce nom Pour la valeur finale de notre menu, je vais utiliser menu n name. Si je définis ce fichier, vous pouvez voir ici qu'il n' y a aucun changement. Cela a parfaitement fonctionné. De même, vous pouvez donner un nom à toutes les règles. Cette méthode de dénomination des lignes est très utile lorsque nous travaillons avec des mises en page complexes, et je vais maintenant nommer nos colonnes Ici, vous pouvez voir que nous avons trois colonnes. Mais si vous remarquez, vous pouvez voir nous utilisons une valeur de répétition ici, et j'en utilise une pour la valeur de trois colonnes. Comment attribuer un nom aux valeurs répétées ? Il existe deux méthodes pour attribuer un nom à vos colonnes. Soit vous tapez un F trois fois et à chaque fois que vous utilisez ces crochets. Sinon, nous pouvons attribuer un nom avec cette valeur de répétition. Laisse-moi te montrer. Avant un F pour valeur, je vais utiliser un nom , appelé Start. Après une valeur F, je vais taper call nd. Vous pouvez taper n'importe quel nom comme vous le souhaitez. Mais il y a un problème. Il va utiliser Cal start et appeler N trois fois. abord, il va utiliser call Start here, puis il va utiliser call end here. Encore une fois, il utilisera le début de l'appel ici, puis il utilisera la fin de l'appel ici et il continuera. Comment l'utiliser correctement ? Pour cela, nous devons d'abord taper cool start. Ensuite, nous devons attribuer le point de départ de nos colonnes. Nos colonnes commencent par un, alors saisissez-en un. Pour le point final, je vais utiliser call end, call end. Parce que je couvre jusqu' à trois colonnes, je vais donc utiliser trois cheveux. Vous n'avez pas besoin de remarquer le numéro de ligne ici. Vous devez noter le nombre de colonnes que vous souhaitez utiliser. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Il n'y a aucun problème. Cela a parfaitement fonctionné. Maintenant, je veux étendre notre en-tête à deux colonnes. Je veux utiliser deux héritiers. Si je configure ce fichier, vous pouvez voir le résultat. Il utilise une valeur de deux colonnes pour l'élément d'en-tête. Je veux revenir à mon ancien poste. Certains pour en utiliser trois. Nous pouvons utiliser la même valeur pour les colonnes de nos menus. Laisse-moi te montrer. Certains pour copier la valeur, et je vais le remplacer par celui-ci. Comme notre élément de menu occupe la même surface de colonne, nous pouvons utiliser cette valeur. Si je sauvegarde ce fichier, vous pouvez voir qu'il n'y a aucune modification. Ainsi, vous pouvez attribuer n'importe quel nom à vos lignes, et vous pouvez l'utiliser plusieurs fois. J'espère que le concept des noms quadrillés est clair pour vous. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 8. Tutoriel de nom de zone de grille CSS: C'est bon de vous revoir , je suis de retour avec un tutoriel sur la grille CSS Dans ce tutoriel, nous allons apprendre le nom de la zone de grille CSS. Dans notre précédent tutoriel, nous avons découvert le nom de la ligne de grille. Mais dans ce tutoriel, nous allons apprendre le nom de la zone quadrillée. Nous utilisons cette méthode pour positionner les éléments de notre grille. Voyons quel type de propriétés nous pouvons utiliser pour le positionnement. Notre première propriété est les zones du modèle de grille, et notre deuxième propriété est la zone de la grille. Commençons par l'aspect pratique et essayons de comprendre comment cela fonctionne. Comme vous pouvez le voir dans notre précédent tutoriel, nous créons une mise en page de base à l'aide des propriétés de la grille, et ici nous attribuons des noms aux lignes de la grille. À l'aide de ces noms, nous positionnons notre article et nous répartissons nos articles. Je vais maintenant créer le même modèle sans utiliser les propriétés de ligne de grille et de colonne de grille. Nous n'avons pas besoin d'utiliser des noms de ligne pour cela. Ici, vous pouvez voir, j'ai un autre fichier stable, grid Atmel, et je vais utiliser ce modèle Au début, nous divisons cette grille en trois colonnes avec une valeur, et nous avons déjà des lignes fib pour l'en-tête du menu, pour les boîtes et pour le pied Je vais maintenant attribuer un nom différent chaque élément de la grille. Pour cela, je vais utiliser la propriété de la zone de grille. Dans cette zone de grille, vous pouvez prendre n'importe quel nom. Je vais utiliser le même nom pour cela, qui est header. Et nous n'avons pas besoin d'utiliser des codes inversés pour cela. De même, je vais utiliser la même propriété pour chaque élément de la grille. Pour le menu, je vais utiliser le même nom Menu. Pour la boîte, je vais utiliser la boîte 1. Pour la boîte deux, je vais utiliser la boîte deux. Pour la case 3, je vais utiliser la case 3. De même, pour la case 4, je vais utiliser la case 4. Pour la barre latérale, je vais utiliser le même nom, qui est barre latérale. Pour le pied de page, je vais utiliser un poster. Si je sauvegarde ce fichier, vous pouvez voir ici que tout a disparu. Parce que nous n' utilisons aucun positionnement, c'est pourquoi les articles ont disparu. Dans notre département parent, je vais utiliser une nouvelle propriété. Permettez-moi de vous montrer que le nom de notre propriété est un excellent modèle de zones. Superbes zones de modèles. Dans les zones de ce modèle de grille, je vais utiliser des codes doubles. Permettez-moi de vous montrer une chose. Je vais retourner à mon ancien dossier. Vous pouvez voir ici ma mise en page précédente. Si j'appuie sur le bouton égal et que j'active les lignes de la grille, vous pouvez voir ici trois colonnes dans notre structure, et notre section d'en-tête utilise trois colonnes pour cela. Je reviens donc à ma nouvelle mise en page, et ici je vais utiliser ce nom d'en-tête trois fois. Laisse-moi te montrer. Je dois copier le nom, et je veux le coller ici. En-tête, en-tête et en-tête. Pour trois colonnes, j'utilise ce nom trois fois. Si je dis ce fichier, vous pouvez voir le résultat ici. Mais si vous remarquez, cela laisse un espace vide car il prévoit six rangées dans notre structure d'accueil. Ici, nous n'utilisons qu'une seule ligne. Encore une fois, si je vous montre mon ancienne mise en page, vous pouvez voir ici notre menu, utilise également trois colonnes. Dans les codes doubles, je vais utiliser le nom du menu trois fois. Si je sauvegarde ce fichier et que je vous montre ma mise en page, vous pouvez voir le résultat ici. Encore une fois, je reviens à mon ancienne mise en page. Ici, tu peux le voir. Dans notre première colonne, nous utilisons la case 1. Dans notre deuxième colonne, nous utilisons la deuxième case, et dans notre troisième colonne, nous utilisons la barre latérale. Je vais truquer cette ligne. Pour notre première chronique, je vais utiliser le nom de la case 1. Pour notre deuxième colonne, je vais utiliser le nom de la case 2. Pour notre troisième colonne, je vais utiliser le nom de la barre latérale Nous utilisons ces noms de colonnes pour notre troisième ligne. Encore une fois, je vais prendre cette ligne. Ici, vous pouvez voir, notre quatrième rangée, commencer par la case trois, puis venir par la case quatre, puis revenir à la barre latérale une fois Je vais taper la case trois, case quatre, puis la barre latérale. Dans notre dernière rangée, vous pouvez le voir ici, nous utilisons trois colonnes pour notre pied de page Je vais utiliser ce nom de pied trois fois. F double TER, pied de page, pied de page et pied de page. Et un point-virgule sur cette ligne. Si je prends ce fichier et vous montre ma mise en page, vous pouvez voir ici que nous avons réussi à créer notre ancienne mise en page sans utiliser les propriétés de ligne de grille et de colonne de grille. Il s'agit de la deuxième méthode que nous pouvons utiliser pour positionner les éléments de notre grille. Il suffit d'utiliser deux propriétés pour cela. Notre première propriété est la zone quadrillée et notre deuxième propriété est la zone quadrillée des tablettes. Ce type de technique de positionnement est très utile pour les petits projets. Si votre mise en page n'est pas complexe, vous pouvez utiliser ce processus. Mais si votre projet est plus complexe et plus paresseux, je ne recommande pas d' utiliser ce processus. Si vous remarquez, vous pouvez voir ici que nous utilisons trois noms de colonne pour chaque ligne. Si je supprime l'une des colonnes, n'importe quelle ligne, je vais donc supprimer le menu Si je place ce fichier, nous pouvons voir ici que tout a disparu. Parce que nous utilisons trois colonnes, c'est pourquoi nous devons transmettre le nom de trois colonnes. Si j'ai configuré ce fichier, encore une fois , vous pouvez le voir, maintenant il a l'air parfait. Et maintenant, supposons que vous vouliez utiliser deux colonnes pour la section du menu. Dans ce cas, vous devez faire passer les cheveux à pois. Si j'ai défini ce fichier, il fonctionne maintenant. Si vous souhaitez utiliser l'élément de menu uniquement dans la deuxième colonne, dans ce cas, il vous suffit de passer un autre point avant le point de menu. Si je configure ce fichier, vous pouvez voir le résultat. Nous pouvons aligner notre élément de grille et nous pouvons positionner en utilisant simplement des points. Mais vous ne pouvez pas utiliser ce point, au milieu de ces deux colonnes. Laisse-moi te montrer. Si je supprime l'en-tête de cet endroit, que j'utilise un point pour définir ce fichier, cela peut détruire votre mise en page. Encore une fois, je vais répéter ce processus, comment il fonctionne. premier temps, vous devez utiliser une zone de grille de nom de propriété pour chaque élément de la grille, puis vous devez attribuer un nom. Vous pouvez utiliser n'importe quel nom pour cela. Ensuite, dans le sélecteur de conteneur parent, vous devez utiliser une propriété, à les zones du modèle de grille Ensuite, vous devez vous souvenir du nombre de colonnes que vous attribuez à cette structure de grille. D'après ma mise en page, vous pouvez le voir ici, j' utilise trois colonnes. Dans chaque ligne, nous devons passer trois u, et ici vous pouvez voir que nous nous étendons également sur notre ligne de barre latérale C'est pourquoi j'utilise ce nom de barre latérale dans les lignes numéro trois et quatrième J'espère que vous comprenez maintenant ce qu'est la dénomination des zones de sable. Merci d'avoir regardé ces vidéos et restez connectés pour notre prochaine visite. 9. Tutoriel de la fonction CSS Grid MinMax: Hey, c'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié à cess grit. Dans ce tutoriel, nous allons apprendre la fonction cess grid minMax. En utilisant cette fonction, nous pouvons modifier dynamiquement la hauteur des roses et des colonnes. Commençons. Dans ce tutoriel, nous allons apprendre deux autres valeurs sans minmax. Le premier est Max content, et le second est Men Content. Voyons comment modifier dynamiquement la taille et le poids. Ici, vous pouvez voir côte à côte que j'ouvre mon Visto Cortor et mon navigateur en utilisant l'extension de serveur Lp Et je crée déjà un document stable. Comme vous pouvez le voir dans mon conteneur parent, nous avons huit ventes de grille différentes, et nous déclarons quatre colonnes pour nos échelles de grille avec une valeur F. Nous avons également deux lignes d' une hauteur de 175 pixels. Commençons par l'aspect pratique. Commençons par l'aspect pratique. Comme vous pouvez le voir dans mon premier élément de grille, il y a d'abord un nom de texte. Je vais insérer d'autres textes dans cet élément de la grille. Luram, 20 ans. Il va ajouter 20 mots dans cet élément de la grille. Si je place ce fichier, vous pouvez voir le résultat ici. Permettez-moi de réduire quelques mots, puis je vais configurer ce fichier. Ici, vous pouvez voir qu'il décompose nos lignes en fonction de cet élément de la grille. Mais que s'est-il passé ? Si j'utilise la valeur maximale du contenu pour notre première colonne, utilisons-la. Je vais utiliser la valeur maximale du contenu pour notre première colonne. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir qu'il n'y a pas de saut de ligne pour ce paragraphe et qu'il déborde également du conteneur en termes de taille Si nous utilisons cette valeur, elle ne cassera pas nos lignes. Il va imprimer tous les paragraphes sur une seule ligne. Ce n'est pas très utile pour nos vrais projets. Je vais réduire un peu le monde à partir de ce paragraphe. Ensuite, je vais enregistrer ce fichier. Réduisons encore quelques mots. Maintenant, ça a l'air parfait. Je vais maintenant ajouter du texte dans notre quatrième contenu. Lam dix, et je vais dire ce fichier, puis je vais utiliser notre valeur suivante pour cette colonne, à savoir que les hommes contiennent. Si je place ce fichier, vous pouvez voir le résultat ici. Il change dynamiquement le huitième en fonction du plus gros mot de cette phrase. Je vais également ajouter du texte dans cet article. Ajoutons du texte. Huit lampes. Si je définis ce fichier, vous pouvez voir ici notre texte chevaucher l'élément de la grille. Pour résoudre ce problème, nous pouvons ajouter une valeur de contenu minimale dans notre ligne. Laisse-moi te montrer. Je vais supprimer la valeur de 170 pixels, et ici je vais taper la valeur du contenu Man. Si je définis ce fichier, vous pouvez maintenant voir définir la bonne hauteur de l'élément, fonction de la zone de texte. Supposons que je veuille ajouter 51 paragraphes dans notre septième article. Je vais passer au septième élément, et je vais taper Lum, 50. Si je configure ce fichier, vous pouvez le voir ici, ici vous pouvez voir, fonction de la taille du texte, qu'il change de hauteur et de poids. Il consommera une hauteur minimale et un minimum de huit selon ce texte. C'est pourquoi ce vueme est le contenu principal. Maintenant, je veux fixer la hauteur minimale de notre rôle. Je vais donc supprimer une partie ou une partie de ce texte. Ensuite, je vais configurer ce fichier. Je vais maintenant utiliser la fonction minmax pour définir une hauteur fixe Laisse-moi te montrer. Je vais utiliser la fonction Mn Mx ici. Minim/maximum. Insérez ces parenthèses, et ici nous devons transmettre les deux valeurs Pour la taille minimale du pro et pour la taille maximale du pro. Supposons que notre hauteur de ligne minimale soit de 175 pixels. Au maximum, je vais utiliser la propriété de contenu men. Parce que je souhaite modifier la hauteur fonction de cette taille de contenu. Si notre contenu prend plus de 170 pixels de hauteur. Si je sauvegarde ce fichier, vous pouvez voir ici par défaut notre ligne a une hauteur de 170 pixels. Mais comme vous pouvez le voir dans notre première rangée, il faut plus de 170 pixels de hauteur. Que la taille du contenu prenne plus de 170 pixels. Pour optimiser notre valeur, nous utilisons le contenu principal. C'est pourquoi il peut prendre autant de hauteur qu'il le souhaite. La fonction Min Max est très utile pour nos lignes. Ici, nous définissons une valeur minimale pour la hauteur de notre article. Mais si notre contenu prend plus de hauteur, nous pouvons utiliser la valeur du contenu principal comme valeur maximale. Mais que s'est-il passé ? Si je définis une hauteur maximale de 200 pixels ? Laisse-moi te montrer. Si je configure ce fichier, vous pouvez voir que par défaut, notre deuxième ligne prend 175 pixels de hauteur. Mais notre première ligne s'étend jusqu'à 200 pixels, puis notre contenu déborde de cet élément C'est pourquoi nous parlons d'utiliser le contenu principal comme taille maximale. Contenu principal. Maintenant, il peut contenir tout le contenu de notre ligne, et maintenant je vais utiliser la fonction MinMax comme valeur de colonne. Utilisons-le. Pour notre première colonne, je vais utiliser la fonction MinMax. Et je vais définir une largeur minimale de cette colonne, qui est de 150 pixels. De plus, je vais prendre 200 pixels pour la largeur maximale. Ici, vous pouvez voir que nous avons déjà défini la largeur maximale du conteneur, qui est de 700 pixels, mais je vais utiliser une valeur en pourcentage à cet endroit, 80 %, cela rendra notre page Web plus réactive. Si je place ce fichier, vous pouvez voir le résultat ici. Ajoutons du contenu à notre première colonne. Euh six. Ici, vous pouvez voir que notre première colonne a une largeur maximale de 200 pixels. Si j'augmente la largeur maximale de 300 pixels, puis que je définis ce fichier, vous pouvez maintenant voir les modifications. Par défaut, la largeur sera de 150 pixels et elle peut s'étendre jusqu'à 300 pixels. Ensuite, il va décomposer nos lignes, et maintenant je vais utiliser 200 pixels pour notre largeur minimale. Si j'active mon option de développeur et que je sélectionne ce contenu. Ici, vous pouvez voir que la largeur maximale de ce contenu est de 300 pixels. Si j'essaie de le rendre réactif, puis que je sélectionne cet élément, vous pouvez voir ici que la largeur minimale de cet élément est de 200 pixels. Parce que nous avons déjà défini une taille minimale pour cette colonne. De même, si nous redimensionnons notre fenêtre, laissez-moi vous montrer. Et puis sélectionnez cet élément, vous pouvez voir qu'il ne peut pas s'étendre de plus de 300 pixels. J'espère que maintenant vous comprenez un peu comment cela fonctionne. Si j'utilise une valeur en pourcentage dans notre taille maximale, laissez-moi vous montrer. 60 %. Ensuite, définissez ce fichier, vous pouvez maintenant voir un résultat différent. Cela va prendre 60 % de largeur de ce conteneur. Nous pouvons utiliser la valeur en pourcentage, la valeur e, la valeur en pixels, etc. Mais si je réduis la taille du navigateur, il s' arrêtera à 200 pixels de largeur. Nous ne pouvons pas réduire notre première colonne de plus de 200 pixels. J'espère que maintenant le fonctionnement de la valeur principale et de la valeur maximale est clair . Merci d'avoir regardé cette vidéo et restez connectés pour notre prochain tutoriel. 10. Tutoriel explicite et implicite sur la grille CSS: C'est bon de vous voir, encore une fois, je suis de retour avec un Nutririal, et dans ce sural, nous allons apprendre la grille implicite et la grille explicite Voyons voir ce que c'est ? Ici, vous pouvez voir, côte à côte, que j'ouvre mon visuo studio coreor et mon navigateur en utilisant l' Comme vous pouvez le voir dans mon conteneur parent, nous avons un total de huit cellules de grille. Au début, je vais dire en hauteur. Dans un premier temps, je vais utiliser la valeur de colonne du modèle de grille. Colonnes du modèle Greed, et je vais créer deux colonnes avec une valeur e. Pour cela, je vais utiliser une valeur de répétition. Répéter. Deux colonnes avec une valeur e. Si je configure ce fichier, vous pouvez voir le résultat. Je vais également dire hauteur de ligne. Pour cela, je vais utiliser une excellente propriété racinaire tempérée. Mais je vais dire trois rangées de hauteur à partir de ces quatre rangées. Je vais utiliser la valeur de répétition une fois de plus. Répétez la valeur de 100 pixels sur trois lignes. Si je configure ce fichier, vous pouvez voir le résultat. Je vais également créer un espace entre ces cellules. Donc, tapez, lisez, écartez la propriété. 20 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir que nous venons de définir deux tailles de colonne et trois tailles de lignes. Mais nous avons au total huit cellules dans cette structure. Nous ne stylisons pas notre septième élément de grille et notre huitième élément de grille. Supposons que nous extrayons dynamiquement les données du serveur et que je souhaite afficher ces données dans nos septième et huitième colonnes. Pour cela, nous devons régler la hauteur. Mais nous avons déjà défini la hauteur en utilisant la propriété des lignes du modèle de grille. Quelles sont ces colonnes ? Comment régler la hauteur des colonnes ? Laisse-moi te montrer quelque chose. Si j'appuie sur p t et que je vous montre la barre d'outils de mon développeur et que je clique sur cette icône en forme de grille. Vous pouvez voir ici quelques lignes de quadrillage. Comme vous pouvez le constater, nous mettons en forme o et deux colonnes. Nous appelons cette structure cupidité explicite parce que nous définissons explicitement cette zone en utilisant ces deux propriétés, et celle que nous n'avons pas définie, et nous l'avons appelée cupidité implicite Pour styliser cette grille implicite, nous avons de nouvelles propriétés. Allons voir ça. Ici, vous pouvez voir nous avons un total de trois grilles implicites liées aux propriétés. Le premier concerne les grilles automatiques, second les colonnes automatiques à grain et le dernier les flux automatiques au réseau Commençons par l'aspect pratique et essayons de comprendre comment cela fonctionne. Après un trou dans le réseau, je vais utiliser notre nouvelle propriété, qui est grid auto ose. Certains types de peignoirs automatiques à grille. Ici, nous pouvons définir la hauteur de ligne implicite de notre grille. Pour notre élément implicite, je vais définir une hauteur de 50 pixels. Si je définis ce fichier, vous pouvez maintenant voir que la hauteur implicite de l' élément de la grille est de 50 pixels. Si nous ajoutons plus de cellules à ce conteneur, laissez-moi vous en montrer quelques-unes pour dupliquer cette ligne deux fois et définir ce fichier. Vous pouvez maintenant le voir définir automatiquement une hauteur de 50 pixels pour ces éléments de la grille. Pour l'instant, je vais supprimer ces colonnes. Je n'en ai pas besoin et j'ai configuré ce fichier. Ici, vous pouvez voir que lorsque nous ajoutons une nouvelle cellule, elle ajoute une ligne. Mais maintenant, je veux ajouter une nouvelle cellule par colonne. Pour cela, nous devons utiliser une autre valeur, à flux automatique de la grille, le type de sol, la cupidité, le flux automatique Il est livré avec deux types de valeur. Ligne et colonne. Par défaut, cela fonctionne avec une ligne. Mais ici, je vais utiliser la colonne. Si je dis ce fichier, vous pouvez maintenant voir le résultat. Parce que nous en avons déjà défini trois dans notre grille explicite. Ensuite, au bout de trois heures, il ajoutera tous les wiles de la colonne des articles de vente Harry, vous pouvez le voir, ne définissez aucune taille de colonne pour cet élément de la grille. C'est la hauteur de la pile en fonction de cette taille, et maintenant je veux l'attribuer à notre grille implicite Pour cela, nous devons utiliser une propriété, qui est grite auto columns Et ici, je vais fournir une valeur de 0,5 f pour notre note implicite. Si je place ce fichier, vous pouvez voir le résultat ici. Notre colonne de grille explicite prend une valeur f, et notre colonne de grille implicite prend une valeur f. Si j'ajoute une colonne supplémentaire à ce conteneur, laissez-moi vous montrer puis définir ce fichier. Maintenant, vous pouvez voir qu'il faut également une valeur de 0,5 selon cet élément de la grille. Il s'agit de notre grille implicite et de notre note explicite. J'espère que c'est clair pour toi maintenant. Merci d'avoir regardé cette vidéo, je suis à l'affût de notre prochain tutoriel. 11. Tutoriel d'alignement des éléments de la grille CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre l' alignement des éléments de la grille CSS. Dans notre vidéo précédente, nous allons découvrir comment créer des mises en page à l'aide d'éléments de grille CSS et comment positionner ces éléments Mais dans ce didacticiel, nous allons en apprendre davantage sur l'alignement horizontal et l'alignement vertical. Nous avons un total de six alignements de grilles CSS liés aux propriétés. Alignez l'article, justifiez l'article, placez l'élément, alignez-vous, justifiez-vous et placez-le vous-même. Commençons par l'aspect pratique et essayons de comprendre comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon codaor ESOS Tough et mon navigateur en utilisant l'extension de serveur Lp J'ai déjà créé un document STE ML nommé index point STL. Ici, vous pouvez voir que nous avons un total de dix éléments de la grille. Nos six premiers éléments de grille sont des éléments grille explicites et nos quatre derniers éléments de grille sont des éléments de grille implicites. Ici, vous pouvez voir que notre élément de grille explicite HT est de 100 pixels, et notre élément de grille implicite HT est de 50 pixels. Maintenant, je veux étendre mon cinquième élément de la grille, et je veux l'étendre par ligne. Pour cela, je vais passer au cinquième sélecteur d'éléments, et ici je vais utiliser la propriété Sess, qui est une ligne de grille Ici, je vais étendre cet élément sur deux lignes, taper, étendre, puis je vais en transmettre deux. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir notre objet en grille métallique, et je voudrais étendre cet objet rouge par colonne. Je vais passer dans le sélecteur Tent Ten, et ici je vais utiliser la propriété Sess, qui est une colonne de grille Je vais taper grid, column, et je veux l' étendre sur deux colonnes. Si je configure ce fichier, vous pouvez voir le résultat. H est l'élément d'envergure, en termes d'élément, et voici l'élément d'envergure en colonne. Commençons l'alignement. Tout d'abord, je vais aborder l'alignement vertical. Pour cela, nous devons utiliser Align item et align self property. Ces propriétés sont fournies avec quatre valeurs. Laisse-moi te montrer. Le premier est le début, la fin, le centre et l'étirement. Si nous utilisons une valeur de départ, cela placera notre contenu, début de ce conteneur, c'est-à-dire à cet endroit. Si nous utilisons la valeur n, notre contenu sera placé à cet endroit. Si nous utilisons center, cela placera notre centre de contenu dans l'élément de la grille, et Stretch est notre valeur par défaut. Encore une fois, je suis de retour à mon codateur Visual Studio, et maintenant je vais me lancer dans le conteneur parent Tout d'abord, je vais utiliser une valeur Sass, qui est align items Donc, pour taper Align items. Je vais utiliser notre première valeur et notre première valeur est le centre. Si j'enregistre ce fichier, vous pouvez le voir ici aligner notre centre de contenu. Et voici notre processus d'alignement vertical. Si je vous montre mes lignes de quadrillage, vous pouvez les voir clairement ici. Comme vous pouvez le voir, il s'agit de notre élément de grille, et voici le contenu de cet élément de grille. Comme vous pouvez le voir, il appuie sur notre contenu au milieu de cet élément car nous utilisons l'option aligner les éléments au centre. Mais qu'est-il arrivé à notre cinquième article ? Selon cette ligne, cela aligne notre contenu, la fin de cet élément de la grille, mais ce n'est pas le cas. Parce que nous avons atteint notre niveau de cinquième année. C'est pourquoi il utilise deux objets. Selon l'article, il centre le contenu. Vous pouvez également voir le même alignement pour nos éléments de grille implicites. Maintenant, je vais utiliser la valeur finale, un certain type , et D. Si je place ce fichier, vous pouvez maintenant voir l'alignement. H vous pouvez le voir aligner votre contenu, fin de cet article. De même, si nous utilisons la valeur de départ, laissez-moi vous montrer. Et puis définissez ce fichier, vous pouvez voir l'alignement. Ici, vous pouvez voir le contenu de l'aligneur, le début de cet article. valeur de notre dernier article d'alignement est Stretch. Laisse-moi te montrer. Si j'utilise cette valeur et que je définis ce fichier, il s'agit d'un positionnement d' alignement par défaut. Ce n'est pas très important. Il s'agit d'une valeur par défaut. Pour l'instant, je vais utiliser la valeur centrale. Je vais maintenant parler d'Align self. Qu'est-ce que align self ? Ici, vous pouvez voir que tout le contenu de l'article est aligné au centre. Maintenant, je décide d'aligner différemment notre article de troisième année. Je tiens à dire que je souhaite utiliser la valeur finale d' alignement pour ce troisième élément. Je vais passer au troisième sélecteur d'objets. Pour ce type d'alignement, nous devons utiliser la propriété align self. Certains tapez, align self, et ici je vais utiliser la valeur finale. Si je configure ce fichier, vous pouvez voir le résultat. Si j'active les lignes de ma grille, vous pouvez voir ici que tout le contenu est aligné au centre, mais que notre troisième élément de grille est aligné à la fin. Nous ne pouvons utiliser cette propriété que pour la vente individuelle, pas pour le conteneur entier. Maintenant, c'est clair pour toi. Si nous voulons appliquer l'alignement à tous ces éléments pour cela, nous devons utiliser la propriété Aligned item. Si nous voulons appliquer des articles individuels pour cela, nous devons utiliser une propriété de vente alignée. Je vais maintenant parler de l'alignement horizontal. Pour l'alignement horizontal, nous devons utiliser deux propriétés, ify item et justify self. C'est similaire à notre précédent. Nous devons utiliser la même valeur pour cela. Commencez au centre et étirez-vous. Commençons par l'aspect pratique. Encore une fois, je suis soutenu par iso studio correator. Je vais sauter dans le conteneur pour parents. Maintenant, je veux aligner notre contenu horizontalement au centre. Pour cela, nous devons utiliser une propriété, qui est un article justifié. Et notre valeur est centrale. Si je place ce fichier, vous pouvez voir le résultat ici. Si j'active mes lignes de quadrillage, vous pouvez le voir clairement. Il a centré notre contenu horizontalement. De même, si j'utilise une valeur différente, puis que je définis ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant voir la fin du contenu de cet élément de la grille. De même, nous avons une autre valeur, qui est start. Si j'ai configuré ce fichier, vous connaissez le résultat. Il aligne horizontalement votre contenu, commencez par cet élément. Si vous souhaitez déplacer votre contenu, côté gauche, vous devez utiliser le bouton Démarrer. Si vous souhaitez déplacer votre contenu, sur le côté droit, vous devez utiliser end. Comme vous le savez, le stress est notre valeur par défaut, je ne vais donc pas l' expliquer ici. Je vais maintenant parler de l'autopropriété justifiée. Supposons que vous ayez centré votre premier élément horizontalement. Pour cela, nous devons utiliser une propriété personnelle justifiée. Laisse-moi te montrer. Ici, je vais utiliser une propriété personnelle justifiée. Je vais utiliser la valeur centrale. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Si j'active mes lignes de quadrillage, vous pouvez le voir clairement. Si vous devez aligner votre contenu individuellement, vous pouvez utiliser une propriété de vente justifiée. De même, vous avez un total de trois valeurs pour cela. Centre, début et fin. Je voudrais maintenant parler de deux nouvelles propriétés. Placez l'article et concluez la vente. Placer l'article est un raccourci, aligner l'article sur l'article justifié. Si vous souhaitez utiliser cette valeur une seule ligne, vous pouvez l'utiliser. Dans cette propriété, d' abord unité en pus, aligne la valeur de l'élément, puis devez appuyer pour justifier la valeur de l'élément, et entre les deux, vous devez fournir un espace De même, nous avons un lieu de vente de biens immobiliers. Cela concerne les éléments individuels de la grille. D'abord unité à plus, alignez la valeur de vente, puis unité à plus, justifiez la valeur définie. Voyons comment cela fonctionne dans la pratique. Une seconde, Ivaci s'adresse au créateur. Pour l'instant, je vais commenter ces deux lignes. Tout d'abord, je vais utiliser la propriété de l'élément de lieu. Je dois donc attacher les objets. Comme vous le savez, nous devons d'abord transmettre la valeur de l'article alignée, puis vous devez justifier la valeur de l'article par pz Notre première valeur est le centre. Et notre deuxième plus bas niveau est celui d'une étoile. Je vais maintenant configurer ce fichier. Si je définis ce fichier, vous pouvez voir ici le même résultat. n'y a aucun changement. Vous pouvez utiliser cette valeur de cette façon ou d'une autre. C'est entièrement de ta faute. Voyons ensuite comment fonctionne la valeur de la cellule de position. Comme vous le savez, il s'agit d'un travail individuel. Dans notre deuxième article, je vais utiliser cette propriété. Placez-vous. abord, nous devons ajouter la valeur de la cellule Aligner , puis vous devez ajouter la valeur de cellule justifiée. Je veux fournir le centre, et j'ai justifié que la valeur de la cellule est également le centre. Si je configure ce fichier, vous pouvez voir le résultat. C'est le centre ou le contenu horizontalement et verticalement. J'espère donc que vous comprenez maintenant en quoi place self et place items sont du travail. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 12. Tutoriel d'alignement des pistes de la grille CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons découvrir l' alignement des rails sur le réseau de CS. Pour aligner notre piste, nous avons au total trois propriétés Alignez le contenu, justifiez le contenu et placez le contenu, et la propriété Place content est une version abrégée de Aligner le contenu et la propriété de contenu justifié. Essayons de comprendre ce qu'est le suivi des éléments de la grille. Ici, vous pouvez voir, côte à côte, que j'ouvre mon dos à votre coordinateur et mon navigateur en utilisant l'extension Lip Server, et je crée déjà un document STL nommé index point Ici, je vais utiliser la même structure de grille que celle que j'ai utilisée dans mon précédent tutoriel. Ici, vous pouvez voir mettre dix éléments de la grille. Comme vous pouvez le voir, nous nous étendons sur notre cinquième ligne d'éléments de grille, et nous nous étendons également sur notre colonne de dix éléments de grille. Dans un premier temps, je vais réduire le nombre de colonnes. Laisse-moi te montrer. Je vais réduire une valeur e et je vais taper 150 pixels. Si je définis ce fichier, vous pouvez voir l'alignement, et je vais également augmenter la hauteur du conteneur. Je vais donc utiliser la propriété de hauteur. Hauteur 750 pixels. Si je configure ce fichier, vous pouvez voir cet espace. Je vais maintenant vous montrer comment nous pouvons utiliser l'alignement du contenu et le justifier. Mais nous devons d'abord comprendre ce qu'est un contenu justifié. Nous utilisons un contenu justifié pour l'alignement horizontal, et nous avons au total sept contenus justifiés liés aux valeurs, à savoir le début, la fin, le centre, étirement, l'espace autour, l'espace entre les deux et l'espacement uniforme. Nos trois dernières valeurs sont utilisées pour la propriété du contenu. Laissez-moi vous montrer comment il est porté. Encore une fois, je reviens à mon éditeur de code Visual Studio. Au début, je vais activer mes lignes de quadrillage, donc je vais faire l'éloge d'EP til, puis je clique sur les grilles, et sur la façon dont vous pouvez voir les lignes de quadrillage Je vais maintenant utiliser la valeur de justification du contenu. Dans un premier temps, je vais utiliser la valeur centrale. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir tous les éléments de la grille ensemble, déplacez-vous vers le centre de ce conteneur. Utilisation d'une propriété d'objet justifiée. Nous pouvons centrer notre contenu dans ces éléments. En utilisant la propriété de contenu justifiée, nous pouvons aligner nos éléments de grille à l'intérieur du conteneur. En utilisant un contenu justifié, nous pouvons déplacer l'ensemble de la piste. De même, nous avons une autre valeur, qui est la fin. Si je configure ce fichier, vous pouvez voir le résultat. Horizontalement, il déplace nos éléments de la grille, fin de ce conteneur, et début est un endroit par défaut. Laisse-moi te montrer. Si je configure ce fichier, vous pouvez voir le résultat. Je vais maintenant parler de nos trois nouvelles valeurs. Notre première valeur est l'espace entre les deux. Je vais donc taper un espace entre les deux. Si je configure ce fichier, vous pouvez voir le résultat. Si nous utilisons un espace entre les valeurs, vous allez fournir l'espace restant entre les éléments de notre grille. Comme vous pouvez le voir, cela divise les éléments de notre grille de n en n. Mais si vous avez trois colonnes, laissez-moi vous montrer pour en passer trois ici. Et puis définissez ce fichier, ici vous pouvez voir le résultat. Comme vous pouvez le voir, cela place notre deuxième colonne au centre et divise notre espace vide en deux P. Pour l'instant, je vais utiliser deux colonnes. Notre valeur suivante est l'espace autour. Laisse-moi te montrer. Si je place ce fichier, vous pouvez voir le résultat ici. Si nous utilisons cette valeur, comme vous pouvez le voir, elle fournit d'abord un espace, puis notre élément de grille, puis vous pouvez voir la taille similaire de l'espace deux fois. Encore une fois, notre colonne et un espace aveugle. Vous pouvez voir l' espace égal à gauche et à droite. Vous pouvez également voir la même quantité d' espace après la première colonne. De même, vous pouvez voir cet espace avant la deuxième colonne. Vous pouvez voir plus d' espace au centre, et notre valeur suivante est l'espace uniforme. Donc, pour taper l'espace de manière uniforme. Si je définis ce fichier, vous pouvez voir ici qu'il est assez similaire à l'espace autour de la valeur. Mais il y a une différence fondamentale. La principale différence est que vous pouvez voir la même quantité d'espace entre nos meilleurs articles. Si cette taille d'espace est un a, vous pouvez voir la même quantité d' espace avant et après la colonne. Il s'agit de notre propriété de contenu justifiée. Nous l'utilisons essentiellement pour l'alignement horizontal, et cette propriété fonctionne avec des astuces de grille. Parlons de l' alignement de la valeur du contenu. Nous utilisons la propriété align content pour l'alignement vertical. Comme vous pouvez le constater, cette propriété possède au total sept valeurs  : début, fin, centre, étirement, espace autour, espace entre les deux et espacement uniforme. Nous connaissons déjà ces quatre valeurs. Mais dans ce tutoriel, nous allons apprendre l' espace autour de l'espace entre les espaces et les espaces de manière uniforme Revenons-en à l'aspect pratique. Ici, vous pouvez voir que la hauteur de notre conteneur en grille est de 750 pixels. Je vais taper le nom de cette propriété, qui est align content, notre première valeur est center. Si je place ce fichier, vous pouvez voir le résultat ici. Si j'active mon mode développeur, vous pouvez maintenant le voir clairement. Comme vous pouvez le constater, il a centré verticalement notre contenu. De même, si j'utilise la valeur finale puis que je définis le fichier, vous pouvez maintenant voir qu'il met notre structure de grille à la fin de ce contenu. Comme vous le savez, start est notre valeur par défaut. Mais maintenant, je vais utiliser un espace de nom de valeur entre les deux. Alors tapez, espace entre les deux. Si je place ce fichier, vous pouvez voir le résultat ici. Ici, vous pouvez le voir mettre bout notre article de première qualité et notre article de dernière qualité. Vous pouvez voir ici les espaces entre tous les éléments de note. C'est le cas d'utilisation de l'espace entre les valeurs. Passons à la valeur suivante, qui est l'espace autour. Alors tapez, espace autour de vous. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Cette valeur fournira l'espace, en haut du contenu et en bas du contenu. Supposons qu'il fournisse dix pixels au-dessus de cet élément de la grille, et qu'il fournisse également dix pixels au-dessus du bas de cet élément, puis qu'il vienne une zone d'écart de Encore une fois, en plus de ce troisième élément, il fournit une pause de dix pixels. De cette façon, c'est du travail. Notre dernière valeur est l'espace pair. Donc, pour égaliser le rythme. Si je définis ce fichier, vous pouvez voir ici qu'il offre la même quantité d'espace, en haut et en bas de cet élément. C'est le cas d'utilisation de ces valeurs. Permettez-moi de vous montrer une chose. Ici, vous pouvez voir que nous parcourons notre colonne 102 fois. Je vais supprimer la propriété de la colonne de grille de l'élément dix. Et maintenant, je vais aborder le point sept. Donc, pour le coller ici. Si je sauvegarde ce fichier, vous pouvez voir ici une lacune. Ici, vous pouvez voir l'espace vide. Si vous travaillez avec une structure de grille complexe, le type de problème est parfois acceptable. Si vous souhaitez résoudre ce type de problème, nous avons une autre propriété, savoir le flux automatique du réseau. Laisse-moi te montrer. Donc, tapez, flux automatique du réseau. Comme vous le savez, nous avons mis en place deux types de flux, ligne par ligne et colonne. Je vais utiliser Row is. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Mais si j'utilise une autre valeur avec cela, laissez-moi vous montrer. Je vais utiliser une nouvelle valeur, qui est dens. Si je place ce fichier, vous pouvez voir ici qu'il place notre huitième élément de la grille dans l'espace vide. Si nous utilisons cette valeur, l'espace vide ne sera pas vide J'espère que vous comprenez maintenant ce qu'est le suivi par réseau. Restez à l'affût de notre prochain tutoriel. Merci d'avoir regardé cette vidéo. 13. Tutoriel de remplissage automatique de la grille CSS et de l'ajustement automatique: Bonjour, le gars est content de te revoir. Dans cet utérus, nous allons apprendre le champ automatique et les propriétés d' ajustement automatique. À l'aide de ces propriétés, nous pouvons contrôler la largeur de la grille. Commençons par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir, côte à côte, que j'ouvre mon ISO sur un code ou mon navigateur en utilisant l'extension psaver, et j'ai déjà créé Ici, vous pouvez voir un conteneur, et à l'intérieur du conteneur, nous avons au total quatre éléments de la grille. Comme vous pouvez le voir, notre conteneur mesure 700 pixels et nous utilisons la propriété dis the grit. Et maintenant, je vais dire à hauteur de ces objets. Pour l'instant, je souhaite utiliser deux colonnes avec une valeur f. Je vais utiliser la propriété de colonne du modèle grit et je vais utiliser la valeur de répétition Répétez deux avec une valeur F. Si je configure ce fichier, vous pouvez voir le résultat. De plus, je vais fournir la hauteur de notre rangée. Je vais utiliser la propriété de ligne de colonne du modèle de grille. Encore une fois, je vais utiliser une valeur de répétition. Deux lignes d'une hauteur de 150 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Supposons que je ne veuille pas utiliser la valeur de fraction. Je vais taper 100 pixels. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Notre colonne est maintenant de 100 pixels. Sur ce, je veux montrer trois colonnes dans notre chambre. Si je configure ce fichier, vous pouvez voir le résultat, et maintenant je veux ajuster notre quatrième élément de concert à cet endroit Pour cela, nous devons utiliser deux valeurs, remplissage automatique et le remplissage automatique Laisse-moi te montrer. À cet endroit, je vais taper Auto Fill. Si je configure ce fichier, vous pouvez voir le résultat. Il place automatiquement notre quatrième élément de concert au troisième élément de concert De même, si j'utilise la valeur auto ft, laissez-moi vous montrer que vous acceptez ce fichier. Comme vous pouvez le voir, il n'y a aucun changement, mais il y a une différence fondamentale. Si j'utilise la valeur d'ajustement automatique, cela créera une piste supplémentaire Laisse-moi te montrer. Tapez donc à nouveau le remplissage automatique. Si j'active la barre d'outils de mon développeur et que je clique sur cette icône en forme de grille. Ici, vous pouvez voir qu'il y a un espace pour trois éléments de grille car notre conteneur v mesure 700 pixels, et nous avons défini notre élément de grille avec 100 pixels. C'est pourquoi nous avons un espace pour trois éléments de la grille. Mais si j'utilise la valeur d'ajustement automatique, laissez-moi vous montrer, puis définir ce fichier, puis activer mes lignes de grille. Ici, vous pouvez voir qu'il ne crée pas de lignes de piste supplémentaires. Il crée la piste en fonction des éléments de la grille. Supposons que je veuille déplacer l'extrémité de la quatrième colonne de ce conteneur. Je vais utiliser la valeur finale de la colonne de la grille. Cupidité, colonne n, et je vais prendre la position moins un. Si je définis ce fichier, nous pouvons voir ici qu'il n'y a aucun changement. Parce que la propriété Auto Feet ne crée pas de trace supplémentaire. Mais si j'utilise la propriété de remplissage automatique, laissez-moi vous montrer puis définir ce fichier Vous pouvez maintenant voir le résultat. Si je cours sur les lignes de la grille, vous pouvez maintenant le voir clairement. Comme la propriété de remplissage automatique crée une colonne supplémentaire, nous pouvons déplacer notre article de quatrième année à l' extrémité de ce conteneur C'est la principale différence entre le champ automatique et la valeur automatique des pieds, et maintenant je vais utiliser la fonction Min max pour notre colonne. Je vais supprimer celui-ci et définir ce fichier. abord, je vais attacher les pieds automatiquement, puis utiliser la fonction minmax. Je souhaite définir une largeur minimale de conteneur 150 pixels et une valeur maximale d'une valeur e. Si je configure ce fichier, vous pouvez voir le résultat. Mais que s'est-il passé ? Si je réduis la largeur du conteneur ainsi tapez, 70% de largeur du conteneur. Si je place ce fichier, vous pouvez voir ici que vous pouvez voir notre article de quatrième année se réduire. Si je vous montre la section de mon ordinateur, vous pouvez voir ici que largeur de notre conteneur est maintenant de 546 pixels, et nous avons défini notre largeur minimale d' article de 150 pixels Si nous multiplions 150 pixels par quatre, cela donnera 600 pixels. Comme vous le savez déjà, la largeur de notre conteneur est inférieure à 600 pixels, c'est pourquoi cela réduit notre article de quatrième qualité. Si j'augmente la largeur du conteneur, laissez-moi vous le montrer. Maintenant, vous pouvez le voir, cela a placé notre article de quatrième année dans notre première rangée. Si je vous montre la largeur de mon conteneur, vous pouvez voir ici qu'elle est supérieure à 600 pixels. C'est pourquoi il s'inscrit dans cette rangée. Et de même, si je vous montre la largeur de mon élément de grille, vous pouvez voir ici que largeur de notre élément de grille est de 167 pixels, nous ne pouvons pas réduire la largeur de notre élément de grille dessous de 150 pixels. Si nous essayons de réduire la largeur de notre élément de grille avec force, laissez-moi vous montrer, ici vous pouvez le voir, cela réduit notre élément de grille dans la deuxième rangée Si nous essayons de réduire davantage, vous pouvez voir ici que nous réduisons également notre troisième élément de grille dans la deuxième ligne, réduisons également notre troisième élément de grille dans la deuxième ligne car nous ne pouvons pas réduire la largeur de l'élément de grille en dessous de 150 pixels. Sans utiliser de requête multimédia, en utilisant simplement la valeur d'ajustement automatique, nous créons parfaitement notre conteneur réactif. De même, si j'augmente la largeur du navigateur, vous pouvez voir ici tous les éléments de la grille sur une seule ligne. Si vous remarquez que vous pouvez le voir, cela augmente également la largeur de l'article. La largeur de l'article est désormais de 245 pixels. Si vous souhaitez afficher tous les éléments de la grille sur une seule ligne, vous devez avoir une largeur de conteneur minimale de 600 pixels. Si je réduis trop la largeur du navigateur et que j'augmente le pourcentage de largeur du conteneur , c'est 85 %, et je vais également augmenter la largeur minimale, donc je vais l'augmenter jusqu'à 300 pixels. Si je définis ce fichier, vous pouvez maintenant voir un total de quatre lignes. Maintenant, ça a l'air totalement réactif. Comme vous pouvez le constater, nous définissons la hauteur de deux lignes, 150 pixels de hauteur. J'espère que le concept est maintenant clair pour O, qu'est-ce que la valeur du champ automatique et la valeur d'ajustement automatique. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 14. Tutoriel de contenu dans la grille CSS: Bonjour, les gars, je reviens vous voir. Dans ce didacticiel, nous allons découvrir une nouvelle grille Sess liée aux propriétés, Fit Content Voyons comment nous pouvons l' utiliser dans la pratique. Ici, vous pouvez voir, côte à côte, que j'ouvre mon isoto Codaor et mon navigateur en utilisant l'extension Lip Sever, et je crée déjà un document STML nommé index point STML que j'ouvre mon isoto Codaor et mon navigateur en utilisant l'extension Lip Sever, et je crée déjà un document STML nommé index point STML. Ici, vous pouvez voir qu'à l'intérieur du conteneur parent, nous totalisons six éléments de la grille. Fondamentalement, la propriété de contenu d'ajustement fonctionne comme la propriété Max W. Utilisons cette propriété. Je vais donc supprimer le précédent. Je vais égaler Supposons que je veuille afficher deux colonnes en utilisant un contenu ajusté. Je vais donc taper du contenu adapté, entre parenthèses, et je vais dire 200 pixels largeur maximale pour notre première colonne De même, pour notre deuxième colonne, je vais utiliser la propriété fit content. Pour notre deuxième colonne, je vais utiliser 400 pixels maximum. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. Ici, vous pouvez voir que pour la première colonne, nous prenons une largeur de 200 pixels. Pour la deuxième colonne, nous prenons une largeur de 400 pixels. Mais si vous remarquez, vous pouvez voir notre article est fonction de la taille du contenu. Prenons une autre colonne avec une valeur F. Certains en tapent un F. Si je définis ce fichier, vous pouvez voir le résultat. Si nous définissons une valeur de contenu adaptée, nous ne pouvons pas étendre notre colonne de plus de 200 pixels. De même, nous ne pouvons pas étendre notre deuxième colonne, de plus de 400 pixels. Ajoutons du contenu dans notre premier article. Dans le premier élément, je vais taper euh, 30. Si je place ce fichier, vous pouvez voir le résultat ici. Si j'active mes lignes de grille et que je vous montre la largeur de mes ventes, vous pouvez voir ici notre premier article de la grille s'étendre jusqu'à 200 pixels. Si nous utilisons la propriété fit content, nous ne pouvons pas l'étendre de plus de 200 pixels. De même, si j'ajoute du contenu dans notre deuxième élément de grille, laissez-moi vous le montrer puis définir le fichier, vous pouvez voir ici le résultat. Si je vous montre la taille de ma cellule, vous pouvez la voir ici s' étendre jusqu'à 400 pixels, pas plus de 400 pixels. Par exemple, nous définissons la largeur maximale de cette cellule granuleuse en utilisant la propriété fit content Pour notre troisième colonne, nous utilisons la valeur de fraction. Il peut changer de taille en fonction du contenu. En gros, cette technique est très utile pour la galerie d'images. De plus, vous pouvez remarquer que nous ne pouvons pas voir l'intégralité du contenu de cet article. Pour cela, nous pouvons utiliser fonction minmax dans nos rôles. Laisse-moi te montrer. Donc, pour supprimer celui-ci, je vais dire, Min Max. Au lieu des parenthèses, nous pouvons définir ici la hauteur minimale de notre élément de grille Je souhaite définir une hauteur minimale de 200 pixels. Ensuite, si vous souhaitez étendre la hauteur des cellules de la grille en fonction du contenu. Pour cela, vous pouvez utiliser la fonction de contenu principal. Permettez-moi de vous montrer mon contenu. Si je place ce fichier, vous pouvez voir le résultat ici . Maintenant, ça a l'air parfait. Nous avons découvert la propriété du contenu principal dans nos précédents didacticiels. J'espère que vous comprenez maintenant quel est le cas d'utilisation de la propriété fit content. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 15. Tutoriel de propriété de la grille CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre une nouvelle propriété de positionnement des éléments du réseau, à savoir la propriété l'eau Voyons comment nous pouvons utiliser cette propriété. Comme vous pouvez le voir, côte à côte, j'ouvre ma vidéo sur Cortor et mon navigateur en utilisant l'extension Lp Server, et je crée déjà un document eSTIML nommé index point estim nommé index point Ici, vous pouvez voir qu'à l'intérieur de mon conteneur parent, nous avons un total de six éléments de la grille. En utilisant la propriété de l'eau, nous pouvons modifier la position des cellules de la grille. Supposons que vous souhaitiez déplacer la première cellule de la grille en sixième position. Pour cela, vous pouvez utiliser la propriété de l'eau. Dans nos articles précédents, nous en apprenons davantage sur le positionnement Mais dans ce document, nous allons positionner nos cellules en utilisant les propriétés de l'eau Supposons que je veuille déplacer l' élément une en six positions. Pour cela, je vais accéder à l'élément ou au sélecteur, et je vais utiliser la propriété de l'eau De l'eau. Ici, je vais passer une valeur. Si je place ce fichier, vous pouvez le voir déplacer automatiquement votre contenu en position de poussière. L'arrosage commence dans la direction opposée. C'est pourquoi c'est tombé dans le néant. De même, si j'utilise une valeur nulle puis que je définis le fichier, vous pouvez voir ici qu'il n' y a aucun changement dans l'eau. Zéro est la valeur par défaut de cette propriété. Mais si je passe deux fois l'eau et que je place le fichier, vous pouvez voir que cela revient également au premier plan parce qu' il n'y a pas d'eau. Supposons maintenant que je veuille déplacer notre deuxième objet dans la première eau. Pour cela, je vais passer à l'élément à sélectionner, et je vais taper Water Propriety Une eau. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, c'est notre position sur l' eau. Supposons maintenant que je veuille déplacer le quatrième élément en troisième position. Passons au quatrième sélecteur, et je vais taper Water Three Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. C'est notre position sur l'eau une, voici notre position sur l'eau deux, et voici notre position d'ordre trois. Tout d'abord, nous arrosons notre article un en deuxième position. Passons à la deuxième position, puis nous arrosons notre article deux en première position. Venons-en à la première position. Ensuite, nous arrosons notre quatrième article en troisième position, et vous pouvez voir le résultat. Il est arrivé en troisième position. Comme vous pouvez le constater, nous ne travaillons pas avec le troisième, cinquième et le sixième élément. Il s'est présenté. Supposons maintenant que vous souhaitiez déplacer le troisième élément derrière le quatrième élément. Je vais utiliser à nouveau la propriété de l'eau. De l'eau, et je vais passer à quatre valeurs. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que notre troisième élément est arrivé sixième position parce que nous utilisons quatre valeurs, donc notre première position dans l'eau est celle-ci, et ceci est notre deuxième position dans l'eau, et c'est notre troisième position dans l'eau, et c'est notre quatrième position dans l'eau. Maintenant, c'est normal pour vous, c'est comme ça que ça marche. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 16. Tutoriel sur les grilles imbriquées: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons en apprendre davantage sur le gruau imbriqué Essayons de comprendre ce qu'est une grille imbriquée. Ici, vous pouvez voir un conteneur de grille, et à l'intérieur de ce conteneur de grille, nous avons un total de six cellules de grille. Vous décidez maintenant d'ajouter d' autres cellules de grille à l'intérieur de cette cellule de grille. Ensuite, vous devez convertir cette cellule de grille en conteneur de grille, puis vous pouvez ajouter d'autres cellules de grille à l'intérieur de ce conteneur, quelque chose comme ça. Nous appelons l'ensemble de ce système des grilles imbriquées. À l'aide d'une grille imbriquée, nous pouvons convertir une cellule de grille parent en conteneur de grille Commençons par l'aspect pratique et voyons comment nous pouvons le créer. Comme vous pouvez le voir, côte à côte, j'ouvre mon codaor visual sto et mon navigateur en utilisant l'extension de serveur Lp, et je crée déjà un document eSTL, nommé index Comme vous pouvez le voir dans mon conteneur parent, j'ai quatre cellules de grille, et maintenant je veux ajouter d' autres cellules de grille à l'intérieur de la quatrième cellule de grille. Pour cela, nous devons utiliser la propriété de la grille d'affichage pour l'élément quatre. Dans le quatrième sélecteur d'éléments, je vais utiliser la propriété d'affichage Grille d'affichage Maintenant, il convertit notre cellule en un conteneur quadrillé. Nous pouvons maintenant ajouter d'autres cellules de grille à l'intérieur de ce conteneur. Laisse-moi te montrer. Je vais supprimer ce texte et à l'intérieur de ce d, je vais créer quatre autres sous-sous-un point d d, et je vais dupliquer cette ligne trois fois. Je vais également numéroter leur nom de classe. Sous-deux, sous-trois et sous-quatre. À l'intérieur de cette grille, je vais taper A, B, C et D. En configurant ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, nous créons quatre cellules de grille à l'intérieur du quatrième conteneur. Je vais maintenant m' occuper de nos ventes. Pour cela, je vais utiliser la propriété de colonne du modèle de grille. modèles Greed, et je veux attribuer deux colonnes avec une valeur F, une si R, une F. Si je définis ce fichier, vous pouvez voir le résultat Fixons une couleur d'arrière-plan à cette profondeur. Sinon, il ne sera pas visible. Je vais sélectionner l'élément quatre, à l'intérieur du quatrième élément, je vais sélectionner toutes les profondeurs Puis à l'intérieur de l'arrière-plan CSS. Rad. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, il n'y a pas d' espace entre ces cellules, je vais donc utiliser la propriété grid gap. Écart de lecture, dix pixels. Si je sauvegarde ce fichier, vous pouvez maintenant voir clairement les cellules. Comme vous pouvez le voir à l'intérieur d'un conteneur de grille parent, nous devons appeler quatre cellules, puis nous convertissons notre quatrième cellule de grille en conteneur de grille. À l'intérieur de ce conteneur, nous avons également quatre cellules de grille. Nous appelons ce processus une grille imbriquée. En l'utilisant dans un élément de grille, nous pouvons insérer d'autres éléments de grille. Vous pouvez également insérer d'autres éléments de grille dans cette sous-grille. Supposons que vous souhaitiez insérer quatre autres éléments de grille dans cette cellule A. Encore une fois, vous devez suivre cette procédure similaire. abord, vous devez utiliser la grille des propriétés d'affichage pour cette vente, puis vous pouvez ajouter d'autres éléments de la grille dans cette cellule. Si je vous montre la barre d'outils de mon développeur, vous pouvez voir ici à l'intérieur de cette grille, nous avons une autre structure de grille, et vous pouvez voir les lignes de cette structure de grille. Si je vous montre ma section de mise en page, ici vous pouvez voir dans les superpositions de grilles, nous avons un total de deux systèmes de grilles Notre système de grille de conteneurs principal et ensuite notre système d'éléments de grille superposé, et vous pouvez désactiver et activer vos lignes de grille selon votre choix Merci d'avoir regardé cette vidéo. J'espère que vous savez maintenant ce qu'est la grille imbriquée. Restez à l'affût pour notre prochain tutoriel. 17. Tutoriel sur les éléments de grille qui se chevauchent: bon de vous revoir les gars, c'est notre dernier tutoriel lié à Sess Grid. Dans ce didacticiel, nous allons découvrir ce que sont les éléments de la grille qui se chevauchent À l'avenir, essayons de comprendre ce que c'est ? Ici, vous pouvez voir un conteneur quadrillé. À l'intérieur de ce conteneur de grille, nous avons au total trois éléments de grille. Comme vous pouvez le constater, les éléments se chevauchent, c'est ce que nous avons appelé les éléments de la grille qui se chevauchent, et maintenant vous voulez qu'un élément vert vienne premier, quelque chose comme ça Voyons comment créer les éléments de la grille qui se chevauchent. Nous allons ainsi apprendre comment modifier l' eau de pile des éléments de la grille. Un additionneur de pile signifie un index. Étudions la pratique et essayons de comprendre comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre le code de mon studio de résultats et mon navigateur à l'aide de l'extension Life sero, et que je crée déjà un document eSTIML nommé index Comme vous pouvez le voir, je crée déjà une structure de grille, et cette structure de grille comporte trois éléments de grille. Comme vous pouvez le voir, notre conteneur est de 400 pixels, notre colonne de 200 pixels, et notre ligne T est également de 200 pixels. Essayons de superposer les éléments de la grille. Dans un premier temps, je veux couvrir notre élément de la grille rouge. Je veux l'étendre sur deux colonnes. Pour cela, je vais utiliser la propriété de colonne de la grille. Un, de la première colonne , deux, de la deuxième colonne. Si je configure ce fichier, vous pouvez voir le résultat. Nous couvrons la deuxième colonne de notre article. De plus, je vais étendre cet élément par ligne avec deux colonnes. Laisse-moi te montrer. Je vais utiliser la propriété grade row, grade row. À partir de la première rangée, travée deux, ligne deux. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, notre premier élément s'étend sur deux colonnes et deux pièces, et notre deuxième élément et notre troisième élément sont nos éléments implicites de la grille. Je vais maintenant attribuer une largeur maximale tous ces éléments de la grille. Comme vous le savez, nous utilisons cet élément ainsi que tous ces éléments de la grille. Je vais utiliser la propriété de largeur maximale. Donc, pour taper Mx avec, 200 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Je vais maintenant aligner notre première cellule verticalement. Certains pour taper, aligner, voir étoile. Si je configure ce fichier, vous pouvez voir le résultat. Si je vous montre mes lignes de quadrillage, vous pouvez voir qu'il occupe toute la surface. Parce que nous utilisons la propriété align self, c'est pourquoi elle semble plus petite. Si je commente cette propriété et que je définis ce fichier, vous pouvez voir le résultat. Mais pour créer des éléments de grille qui se chevauchent, ceux qui en ont besoin. Je vais annuler le commentaire et définir ce fichier, et maintenant je veux déplacer notre deuxième élément au centre de cette page. Pour cela, je vais utiliser les mêmes propriétés pour le deuxième élément. Si je place le code et que je définis le fichier, vous pouvez voir ici qu'il chevauche notre élément de première année. Mais je tiens à m'en mêler. Je vais utiliser Align self property, Align self center. Si je configure ce fichier, vous pouvez voir le résultat. Nous alignons verticalement le centre de notre article sur ce conteneur. Je vais maintenant centrer horizontalement cet élément de la grille. Pour cela, je vais utiliser et justifier propriété personnelle, ify Self Center. Si je configure ce fichier, vous pouvez voir le résultat. Pour notre article de troisième année, je vais utiliser la propriété sem. Mais je veux aligner notre extrémité de ce conteneur. Je vais utiliser align self end. Et justifiez également self n. Si je définis ce fichier, vous pouvez voir le résultat. Je n'ai pas besoin de cette couleur de fond orange, je vais donc la supprimer. Maintenant, tous les objets d'accueil occupent la même surface. Nous alignons simplement les éléments, commençons, centrons et terminons. Mais la taille et la position de la colonne sont les mêmes. Je vais maintenant ajouter du texte dans tous les éléments. Dans le premier point, je vais égaler Lam 15. Il va ajouter un caractère de 15 mots. Il peut ajouter un paragraphe de 15 mots dans notre article, et je vais copier le paragraphe, et je vais le coller dans notre deuxième article. Également dans notre troisième article. Si je configure ce fichier, vous pouvez voir le résultat. Hé, nous devons ajouter plus de personnage pour surcharger cet objet. Je vais coller ce caractère une fois de plus. Si je définis ce fichier, vous pouvez maintenant voir qu'il se chevauche. Maintenant, je vais vous montrer comment changer l' eau de pile de cet objet ? Pour modifier l'eau des cheminées, nous devons utiliser notre ancienne propriété , à savoir l'indice Z. Maintenant, je veux mettre le premier élément au premier plan. Pour cela, je vais utiliser la propriété d'index Z. Je veux égaler l'indice Z. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez voir qu'il est arrivé en haut, et maintenant je veux mettre l'article orange en haut du. Pour cela, nous devons utiliser la valeur de l'indice Z deux. Je vais égaler l'indice Z deux. Si je configure ce fichier, vous pouvez voir le résultat. Vous savez maintenant comment nous pouvons contrôler les zones de superposition. Voyons maintenant si je supprime tout l'alignement de ce conteneur. Et puis définissez le fichier, vous pouvez voir le résultat. Désormais, tous les éléments de la grille existent toujours au même endroit. Et maintenant, je veux montrer notre élément de grille verte pour ceux-ci, nous devons à nouveau utiliser la valeur de l'indice Z. Un indice trois. Si je configure ce fichier, vous pouvez voir le résultat. J'espère maintenant qu'il y a un doute clair quant au chevauchement. Merci d'avoir regardé cette vidéo, restez à l'affût pour notre prochaine tâche 18. Qu'est-ce que Flexbox: Bonjour les gars, c' est bon de vous revoir. Voici la vidéo de présentation de CSX Flexbox. Essayons de comprendre ce qu'est Flexbox. En gros, Flexbox est un nouveau module en CSS 3. Cela facilite grandement l'alignement dans différentes directions et dans différentes eaux. Il donne au conteneur la possibilité d'étendre et rétrécir les éléments pour utiliser au mieux tout l'espace disponible. C'est le meilleur moyen d'utiliser tout l'espace disponible. Notre point suivant est que la mise en page CSS Flexbox remplace la mise en page flottante Semblable à la disposition en grille, elle peut également remplacer la disposition flottante. Cela nous a beaucoup facilité la tâche. À l'aide de Textbox, vous pouvez créer une mise en page unidimensionnelle très facilement. CSS grad n'est pas unidimensionnel, il est bidimensionnel, mais Css flexbox est unidimensionnel Vous ne pouvez pas gérer simultanément la hauteur des lignes et la largeur des colonnes. Vous ne pouvez gérer qu'une seule dimension à la fois. Ligne, sinon colonne. Supposons qu'il s'agisse de notre conteneur principal. À l'intérieur de ce conteneur parent, nous avons quatre sous-profondeurs. Nous appelons le conteneur flex container, et si vous souhaitez le créer flexbox, vous devez utiliser la propriété display Écran flexible. Dans notre conteneur parent, nous devons utiliser cette propriété, puis la convertir en conteneur flexible. Tous les articles contenus dans le conteneur flexible sont désormais des articles flexibles. Comme je vous l'ai dit plus tôt, flexbox fonctionnent de manière unidimensionnelle Sinon, lignes par colonne. Si nous parlons de lignes, cela signifie voie horizontale. Pour cela, nous appelons l'axe principal. Sinon, vous pouvez l'appeler ligne. Si je parle de dimension verticale, nous l'appelons axe transversal. Sinon, vous pouvez l'appeler colonnes. Voyons une petite démonstration façon dont nous pouvons utiliser une boîte flexible. Ici, vous pouvez voir, côte à côte, que j'ouvre mon iso so coreor et mon navigateur à l'aide de l'extension Live Sever, et que je crée déjà un document eSTIML, nommé index point estel Comme vous pouvez le voir, il existe un parent profond, il existe un parent profond, À l'intérieur de ce conteneur parent, nous avons au total quatre articles. Comme vous pouvez le constater, nous utilisons différentes classes pour tout cela. Point un, point deux, point trois et point quatre. J'ai déjà défini une couleur d'arrière-plan pour tous les sous-deps. Comme vous pouvez le constater, notre conteneur parent est de 600. J'ai également défini une couleur d'arrière-plan, marge et une bordure pour ce conteneur parent. Maintenant, si je veux en faire un conteneur flexible pour ceux-ci, nous devons utiliser la propriété display. Afficher, et je vais utiliser la valeur flexible. Comme vous pouvez le constater, nous avons un total quatre rangées dans notre conteneur parent. Si je définis ce fichier, comme vous pouvez le voir, il enregistre automatiquement tous les éléments sur une seule ligne. Maintenant, c'est un peu clair pour toi. Lorsque nous convertissons notre conteneur parent en une boîte flexible, quel que soit l'article contenu dans notre conteneur, il arrive sur une rangée. Dans notre prochain tutoriel, nous allons découvrir de nouvelles propriétés. Voyons les propriétés. Un total de 12 propriétés que vous pouvez utiliser avec Flex Box. Flex Direction, flex wrap, flex flow, flex grow, flex shrink, flex basics, flex, justification du contenu, alignement du contenu, alignement du contenu, alignement de l'article, alignement personnel, Atlast water Pour l'alignement, nous utilisons cette propriété, et nous en avons déjà parlé dans notre chapitre sur la grille. Dans notre prochaine vidéo, je vais vous parler de toutes les propriétés. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 19. Tutoriel CSS Flexbox Flex Direction: C'est bon de vous revoir, les gars. Dans cet essai, nous allons apprendre ce qu'est la propriété de direction de flexion. Voyons les valeurs de cette propriété. Comme vous pouvez le voir, nous avons Trotal quatre valeurs liées à la direction de flexion CSS, à l'inversion des lignes, à la colonne et à l'inverse Et row est notre valeur dif dans cette propriété. Commençons par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez le voir côte à côte, j'ouvre mon visuo so Corator et mon navigateur à l'aide de l'extension Life Sever, et je crée déjà un document estim, nommé Comme vous pouvez le voir dans mon document, il existe un conteneur. À l'intérieur de ce conteneur, nous avons au total quatre articles flexibles. Comme vous pouvez le constater, nous transformons déjà notre container flex box. Vous savez déjà que si nous utilisons la propriété flex , nos éléments sont placés sur une seule ligne. Dans ce didacticiel, nous allons parler de la propriété de direction du flex. Cette propriété est liée au conteneur, et non aux articles. Je vais l'utiliser pour afficher la propriété, et je vais taper flex direction. Notre première valeur est row. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Comme je vous l'ai dit, row est la valeur par défaut. Si vous l'utilisez, cela n' aura aucun effet sur votre structure. Par défaut, la ligne suit le tour dans la bonne direction. Mais si j'utilise la valeur inverse de la ligne, laissez-moi vous montrer puis définir le fichier, vous pouvez maintenant voir le résultat. Ici, vous pouvez voir que l'ordre de notre article est inversé. Maintenant, la direction est bonne pour faire le tour. C'est le cas d'utilisation de la valeur inverse de ligne, et notre valeur suivante est la colonne. Laisse-moi te montrer. Je vais taper une colonne. Cette valeur fonctionne verticalement. Si je sauvegarde ce fichier, vous pouvez voir le résultat. En gros, il suit l'eau du haut vers le bas. Comme vous pouvez le voir, premier, deuxième, troisième, quatre. Si vous souhaitez l'organiser de bas en haut, vous devez utiliser une autre valeur, à l'inverse de la colonne. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir que notre premier article est arrivé en bas, puis en deuxième puis en troisième, et que notre dernier article est arrivé en première position. Il s'agit essentiellement de changer la direction de bas en haut. Si j'utilise uniquement la valeur de colonne, la direction sera de haut en bas. Il s'agit de la propriété de direction du flex. Comme je vous l'ai dit tout à l'heure, il s'agit d'un travail unidimensionnel. À la fois, cela fonctionne par ligne, sinon par colonne, et vous ne pouvez pas gérer les lignes et les colonnes ensemble. J'espère que la propriété flex direction est maintenant claire pour vous. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 20. Tutoriel CSS Flex Wrap et Flex Flow: C'est bon de vous revoir, les gars, je suis de retour avec un flexbox lié à un tutoriel Dans ce didacticiel, nous allons découvrir ce que sont Flex AP et Flex Flow. Ces deux nouvelles propriétés sont très importantes dans notre flexbox. Sans plus de discussion, commençons par l'aspect pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon viseur Viso Studio Correor et mon navigateur en utilisant l'extension Live Server, et je crée déjà un document eSTEML nommé Index point eSTEML j'ouvre mon viseur Viso Studio Correor et mon navigateur en utilisant l'extension Live Server, et je crée déjà un document eSTEML nommé Index point eSTEML. Harry, vous pouvez le voir dans notre conteneur, nous avons un total de quatre articles flexibles et la taille de notre conteneur est plus grande que celle des articles flexibles. Si j'augmente l'article flexible dans cette boîte, sinon, si je réduis la largeur du conteneur, dans ce cas, les articles sont survolés vers ce Laisse-moi te montrer. J'ai déjà créé six autres éléments flexibles, et je vais décommenter ces balises profondes, je vais dire ce fichier Vous pouvez maintenant voir que nous avons au total dix articles flexibles dans notre conteneur. Je vais maintenant réduire la largeur du conteneur. Utilisation de la propriété width. Je vais donc taper un 400 pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Vous pouvez voir ici que des articles flexibles sont survolés vers ce conteneur De même, si j'utilise la propriété height , que j'augmente la hauteur de 200 pixels et que je définis ce fichier, vous pouvez voir ce résultat. Mais si je change le sens de flexion, laissez-moi vous montrer le sens de flexion. Colonne puis définissez le fichier. Vous pouvez maintenant constater, une fois de plus, des articles flexibles sont survolés vers ce conteneur Pour résoudre ce problème, nous avons une autre propriété flexible, Flex RAP Fondamentalement, Flex AP a trois valeurs. Appuyez maintenant sur Rap et inversement. Aucun EP n'est notre valeur par défaut. Que vous l'utilisiez ou non, cela débordera de données. Voyons comment cela fonctionne. Pour cela, je vais utiliser la ligne de direction flexible, et aussi, je vais définir une largeur de ce conteneur, W 400 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Et maintenant je vais utiliser la propriété Flex rap. Rap flexible. Dans un premier temps, je n'utiliserai aucune valeur. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement car il s' agit de la valeur par défaut de cette propriété. Cela n' affectera donc pas les éléments flexibles. Si vous souhaitez l'encapsuler, vous devez utiliser la valeur p. Laisse-moi te montrer. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant voir notre conteneur avec ce conteneur en acier de 400 pixels, mais il enveloppe parfaitement notre article flexible à l'intérieur de ce conteneur. Comme vous pouvez le constater, il passe automatiquement à la ligne suivante. Faisons une certaine marge entre cet article flexible. Je vais taper une marge de cinq pixels. Si je configure ce fichier, vous pouvez voir le résultat. Vous savez maintenant que lorsque les données dépassent la première ligne, elles passent automatiquement à la ligne suivante Ensuite, les besoins passent automatiquement à la ligne suivante. Mais si je change la direction de flexion, la colonne, je souhaite également utiliser la propriété de hauteur. Hauteur, 200 pixels. Je vais commenter la propriété width. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Et vous pouvez voir qu'il est situé verticalement dans l'eau, premier , deuxième, troisième, quatrième, cinquième, six, sept, huit, 19e. J'espère que vous comprenez maintenant comment les objets sont placés verticalement dans l'eau. Je vais maintenant utiliser la valeur suivante de cette propriété, qui est ap reverse. Je vais inverser le temps. Si je définis ce fichier, maintenant vous pouvez le voir, il suffit d'inverser les éléments de l'wader, et maintenant il commence par le côté droit et se termine par le côté p. Si je change le sens de flexion, ligne par ligne, et st, lequel de ce conteneur, recommande la hauteur et que je définis ce fichier Comme vous pouvez le constater, nos articles partent de la deuxième ligne de ce conteneur. Premier, deuxième, troisième, quatrième, cinquième, six, sept, huit, 910. En gros, nous utilisons la propriété rap pour contrôler le trop-plein thêta. J'espère que tu as compris. Notre prochaine propriété est le flex flow. Qu'est-ce que Flex Flow ? Il s'agit d'une propriété abrégée de flex rap et de flex direction. En utilisant une propriété, vous pouvez contrôler les deux propriétés, et nous pouvons l'utiliser sur une seule ligne. Je vais utiliser la propriété flex flow. Flax Flow. Ici, nous devons d'abord fournir une valeur de direction de flexion, puis nous devons fournir une valeur de flexion p. Tout d'abord, notre valeur de direction de flexion est column, et notre valeur de flexion p est Ra. Et je vais commenter ces deux propriétés, et je dois également commenter avec propriété parce que nous utilisons la valeur de colonne. Je vais décommenter la propriété de hauteur. Si je définis ce fichier, vous pouvez voir ici qu'il fonctionne parfaitement. Si je n'utilise pas de valeur ici, et que je définis ce fichier. Vous pouvez maintenant voir que nos articles flexibles sont survolés vers ce conteneur Fondamentalement, le flex flow est une combinaison des deux propriétés, flex direction et flex ap. J'espère que les concepts sont maintenant clairs pour vous. Qu'est-ce que Flex ap et Flex flow. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 21. Tutoriel CSS Flexbox: Encore une fois, je suis de retour avec une nouvelle boîte flexible liée au didacticiel, et dans ces deux sections, nous allons apprendre à justifier la propriété du centre. Revenons au magasin de conguos. Fondamentalement, nous utilisons la propriété justify content pour l'alignement horizontal. Cette propriété, d'une valeur totale de six. Laisse-moi te montrer. Notre première valeur est Flex start. Il s'agit également d'une valeur par défaut. Puis viennent Flex N, centre, espace, espace entre les deux, espacement uniforme. Elle est très similaire à notre propriété de grille, justifier le contenu, et nous l'avons déjà découverte dans notre section sur la grille. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre ma porte de studio so et mon navigateur en utilisant l'extension de serveur Lp À l'intérieur du conteneur parent, nous avons produit quatre éléments flexibles, et maintenant je vais l'aligner en utilisant la propriété de contenu justifiée Type de son, justifiez le contenu Dans un premier temps, je vais utiliser la valeur centrale. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il déplace tout le centre flexible de ce conteneur. Ensuite, je vais utiliser flex end value. Extrémité flexible. Si je définis ce fichier, comme vous pouvez le voir, il efface tous les éléments flexibles dans le coin droit de ce conteneur, et Flextir est une valeur par défaut de Si j'utilise cette propriété, laissez-moi vous montrer et définir ce fichier. Comme vous pouvez le constater, il s'agit d'une valeur par défaut. Si j'utilise une valeur de flexion ou non, cela renverra ce résultat. Notre valeur suivante est l'espace entre les deux. Alors attache, espace entre les deux. Si je définis ce fichier, comme vous pouvez le voir, il déplace notre premier et dernier élément de bout en bout de ce conteneur. Si je supprime la marge, c'est maintenant plus clair pour vous. Je vais également retirer le rembourrage. Vous pouvez maintenant voir le résultat, et il va ajouter tout l' espace entre ces éléments. Il a également divisé cet espace entre les éléments fixes. Ou la valeur suivante est l'espace autour. Laisse-moi te montrer. Si je définis ce fichier, vous pouvez maintenant voir qu'il fournit un espace égal en premier et en dernier de cet élément. Et entre ces éléments, il offre un double espace. Comme vous pouvez le constater, il fournit un espace égal avant le premier élément et après le premier élément. De même, il fournit un espace égal avant le deuxième élément et après le deuxième élément. C'est pourquoi l'écart entre les éléments développe ce premier écart, et notre dernier est un espace uniforme. Si je l'utilise, définissez ce fichier, comme vous pouvez le constater, il fournit un écart similaire entre les éléments flexibles. J'espère que vous comprenez maintenant comment nous pouvons aligner horizontalement nos articles flexibles. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 22. Tutoriel d'alignement des éléments CSS Flexbox: Low eyes, c'est bon de te revoir. Encore une fois, je viens avec un nouveau tutoriel , lié à CSS Dans ce tutoriel, nous allons apprendre à aligner les propriétés des objets Nous utilisons la propriété Align item pour l'alignement vertical. Nous avons un total de cinq propriétés d'alignement liées à la valeur. Flextrt, extrémité flexible, centre, contrainte et ligne de base. Si nous utilisons la valeur flextat, sera placé mon article flexible sera placé au-dessus de ce conteneur Si nous utilisons la valeur flex n, mon article flexible sera placé au bas de ce conteneur. Si vous souhaitez l'aligner verticalement au centre, dans ce cas, vous pouvez utiliser la valeur centrale, et l'étirement est notre valeur par défaut. Mais la valeur de référence est différente. Commençons par le C pratique, sa forme. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Cortor et mon navigateur en utilisant l'extension ipse. Comme vous pouvez le constater, vous créez déjà un continent et à l'intérieur de ce conteneur, nous avons quatre éléments flexibles du portail Comme vous pouvez le voir, nous utilisons la propriété display flex. Grâce à cette propriété, nous pouvons convertir notre conteneur en conteneur flexible. Je vais utiliser cette propriété, qui est align item, Align items. Notre première valeur est l'étirement. Si je définis ce fichier, vous pouvez voir ici y a aucun changement car il s'agit d'une valeur par défaut. Nous travaillons avec un alignement vertical, nous devons donc augmenter la hauteur du conteneur de 500 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Par défaut, l'élément Aligner utilise la valeur d'étirement. Je vais maintenant utiliser la première valeur, qui est flex start. Si je définis ce fichier, comme vous pouvez le voir, l'alignement vertical de cet article se situe maintenant en haut du conteneur. De même, si j'utilise flex end value et que je définis ce fichier, comme vous pouvez le voir, tous les éléments sont alignés en bas de ce conteneur. Si vous souhaitez aligner cet élément au centre de ce conteneur, vous pouvez utiliser la valeur centrale. Alignez le centre de l'article, vous pouvez voir le résultat. Il aligne tout le centre flexible de ce conteneur. Ajoutons un peu de hauteur dans notre troisième article. Je vais utiliser la propriété de hauteur dans notre troisième article. Hauteur, 50 pixels. Si je définis ce fichier, comme vous pouvez le voir, hauteur de notre troisième élément est maintenant de 50 pixels, et maintenant je vais parler du concept de base. Si j'utilise flex end value, flex end et que je définis ce fichier, comme vous pouvez le voir, éléments se terminent à la ligne de base. Mais si j'utilise la valeur de départ et que je définis ce fichier, maintenant la ligne de base se termine en haut. Je vais maintenant parler de notre dernière valeur, qui est la valeur de référence. Mais dans un premier temps, je vais augmenter la taille de police du troisième élément. Taille de police. Je souhaite utiliser la propriété de taille de police. Taille de police, 34 pixels. Maintenant, je vais également réduire la taille de police du deuxième élément. Je vais utiliser à nouveau la valeur de la taille de police, et je vais utiliser dix fixels pour cela Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que l'alignement de la ligne de base du texte est différent. Je souhaite maintenant aligner ce texte dans la même ligne de base. Pour cela, nous devons utiliser la propriété de base. Laisse-moi te montrer. Alignez les éléments, je vais utiliser la valeur de référence. Base de référence. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, tout le texte est dans la même ligne de base. Si vous souhaitez utiliser l'alignement horizontal, oui, vous pouvez l'utiliser. Il vous suffit d'utiliser la propriété justify content. Utilisons-le. Justifiez le centre de contenu. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez également modifier le sens de flexion. Comme vous le savez, par défaut, notre direction de flexion est erronée. Changeons le sens de flexion. Direction de flexion. Je vais utiliser la valeur de colonne. Si je définis ce fichier, comme vous pouvez le voir, notre propriété lenitd fonctionne maintenant horizontalement, et non Si j'utilise la propriété flex N et que je définis ce fichier, comme vous pouvez le voir, il est aligné horizontalement. Parce que nous changeons la direction de l'axe x et la direction de l'axe y en utilisant la propriété de direction de flexion. Suivons maintenant l'axe transversal opposé. C'est tout pour ce tutoriel. J'espère que le concept est maintenant clair pour vous, qu'est-ce que la propriété align item. Merci d'avoir regardé cette vidéo, soyez au courant de notre prochain tutoriel. 23. Tutoriel de CSS Flexbox Align: Bonjour, les yeux rivés sur CO. Dans ce tarial, nous allons apprendre la propriété de contenu Css Align Dans notre précédent tutoriel, nous allons découvrir la propriété d'un objet Aline. Cette propriété est également utilisée pour l'alignement vertical. Comme vous pouvez le constater, nous avons de nombreuses propriétés de contenu Alan liées à des valeurs différentes. Démarrage flexible, flexion N, centre, étirement, ligne de base, espace autour, espace entre les deux et espacement uniforme. Dans notre précédent didacticiel, nous allons découvrir comment aligner des éléments. Les deux propriétés sont utilisées dans le même but, mais il existe une différence entre ces deux propriétés. Alignez l'élément utilisé pour l'alignement d' une seule ligne, mais alignez le contenu utilisé pour l'alignement de plusieurs lignes. Supposons que votre contenu ne soit pas couvert par un seul rôle. J'ai terminé et je passe au rôle suivant. Ensuite, nous devons utiliser la propriété du contenu allié. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mes visas au Coretor et à mon navigateur en utilisant l'extension Light Sever Comme vous pouvez le voir, j'ai déjà créé document eSTEML nommé index point Ici, vous pouvez voir que dans mon conteneur parent, nous avons au total dix articles flexibles. Dans un premier temps, je vais l' attribuer à ce conteneur. Après la hauteur, je vais taper V égal à 450 pixels. Comme vous pouvez le constater, nos données sont transportées par avion vers ce conteneur. Dans ce cas, nous devons utiliser la propriété flex wrap, quelqu'un pour taper flex rap. Et je vais utiliser la valeur du rap. Si je configure ce fichier, vous pouvez voir le résultat. Dans nos articles précédents, nous allons en apprendre davantage sur la propriété Flex Rap Vous pouvez maintenant voir que les articles surfluents passent au suivant et, comme vous pouvez le constater, nos articles sont déjà étirés. Utilisons notre contenu d' alignement des propriétés. Tapez d'une manière ou d'une autre Align Notre première valeur est l'étirement. Si je définis ce fichier, comme vous pouvez le voir, il n'y a aucun changement car stretch est notre valeur par défaut. Mais si j'utilise une valeur flexible et que je définis ce fichier. Maintenant, vous pouvez voir qu'il se déplace verticalement vers le haut. De même, si j'utilise flex et value et que je définis ce fichier. Les objets sont maintenant déplacés verticalement. De même, si j'utilise la valeur centrale, définissez le fichier. Maintenant, tous les articles sont au centre de ce conteneur. Notre prochaine propriété est un espace entre les deux. Alors, établissez un espace entre les deux. Si je configure ce fichier, vous pouvez voir le résultat. Cette valeur va remplir tout l'espace entre deux lignes. Si j'utilise l'espace autour de la valeur, laissez-moi vous montrer puis définir ce fichier. Ici, vous pouvez voir que quel que soit l'espace que nous avons en haut de la ligne, il sera doublé entre cette ligne, puis il y aura le même espace en bas de la dernière rangée. Puis vient notre valeur suivante, qui est un espace uniforme, un certain type, un espace uniforme. Si je définis ce fichier, maintenant vous pouvez le voir, il ajoute la même quantité d' espace entre les lignes. Cette propriété ne fonctionne que lorsque nous avons plusieurs lignes. Si je supprime un élément flexible de ce conteneur, laissez-moi vous le montrer puis définir ce fichier. Ici, vous pouvez voir que tous les éléments sont plus au centre vertical. Maintenant, cette propriété ne fonctionnera pas correctement. Si j'utilise une valeur différente, quelque chose entre les deux, puis que je définis ce fichier, vous pouvez le voir ici, ne fonctionne pas. Cette propriété fonctionne exactement lorsque nous avons plusieurs lignes. Sinon, ça ne marchera pas. Si nous avons une seule ligne, dans ce cas, nous devons utiliser la propriété de l'élément Allen. J'espère que vous savez maintenant ce qu'est la propriété d'Alan Gon Den. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 24. Tutoriel de self-alignation CSS Flexbox: Bonjour les gars, Tsu Back. Dans ce tutoriel, nous allons apprendre le CSS ex box, Align sale property. Cette propriété est également utilisée pour l'alignement vertical, similaire à la propriété d'alignement des éléments. Comme vous pouvez le constater, pour cette propriété, nous avons des valeurs similaires. Nous avons juste une nouvelle valeur pour cette propriété, qui est automatique. Viennent ensuite Flex start, flex end, center, stretch et baseline. La question qui se pose maintenant est la suivante : quelle est la différence entre Align Item Property et Allen Sale Property ? Propriété de vente Allie essentiellement utilisée pour des objets individuels. Supposons que vous souhaitiez aligner verticalement un élément flexible individuel. Dans ce cas, vous devez utiliser cette propriété. Comme vous pouvez le voir sur cette image, il ne reste qu'un élément flexible, tous les articles fléchis arrivés en haut du conteneur Parce que pour cette cellule particulière, nous utilisons la propriété align cell. C'est grâce à cela que nous avons pu nous différencier. Commençons par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir, côte à côte, que j'ouvre mon visto correor et mon navigateur en utilisant l' Je vais utiliser mon ancien fichier esemal pour cet exemple Comme vous pouvez le voir dans notre conteneur flexible, nous avons au total cinq articles flexibles. Comme vous pouvez le constater, les éléments sont étirés par défaut. Tout d'abord, je veux aligner tous les articles sur le dessus du conteneur. Je vais utiliser la propriété align item. Alignez l'article Flex Start. Si je configure ce fichier, vous pouvez voir le résultat. Je vais maintenant utiliser la propriété Align cell car je veux maintenant aligner une cellule individuelle. Supposons que je veuille déplacer l'extrémité de la cellule numéro trois de ce conteneur. Ensuite, nous devons accéder au sélecteur d'éléments 3 et utiliser cette propriété Aligner la cellule Et je vais utiliser flex end value, flex end. Si je configure ce fichier, vous pouvez voir le résultat. Nous avons réussi à déplacer une extrémité cellulaire individuelle de ce conteneur. N'oubliez pas que cette propriété est utilisée pour l'alignement vertical. Déplaçons le centre de la cellule numéro deux de ce conteneur. Pour cela, encore une fois, je passe dans le sélecteur numéro deux et je vais taper Ansell property Et un centre sexuel. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Parlons de notre nouvelle propriété, qui est l'automobile. Si j'utilise la valeur automatique dans notre deuxième élément, puis que j'enregistre ce fichier, vous pouvez voir ici qu'il est de retour dans le groupe. Maintenant, cette valeur est liée à la valeur d' alignement du conteneur parent. Modifions l'alignement du conteneur parent. Alignez les éléments au centre. Si je définis ce fichier, comme vous pouvez le voir, notre valeur automatique suit automatiquement cet alignement. Si nous utilisons Align self auto, cela fonctionne relativement bien avec la valeur des éléments alignés. La valeur centrale de l'IOU est également agir comme une valeur centrale A. IO Ue flex et value, c'est aussi agir comme A flex et value. N'oubliez pas que Allan Sal Property ne fonctionne qu'avec les ventes Flexbox, non avec le conteneur Flexbox. J'espère que vous savez maintenant ce qu'est propriété d' Allenal et quel est l'intérêt de cette Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 25. Tutoriel de commande CSS Flexbox: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons en apprendre davantage sur les propriétés de l'eau. Cette propriété fonctionne de la même manière que nous le faisions dans la grille. Commençons par l'aspect pratique et voyons comment cela fonctionne. Et vous pouvez voir, côte à côte, que j'ouvre mon Viso Stockor et mon navigateur en utilisant l'extension L Lifesaver. J'ai déjà créé un document eSTIML nommé Index do ATML. Comme vous pouvez le constater, au lieu du conteneur flexible, nous avons un total de six articles flexibles. Si vous vous souvenez d'avoir utilisé la propriété de l'eau, nous pouvons modifier la position des cellules. Supposons que vous souhaitiez déplacer la quatrième cellule en position numéro deux. Dans ce cas, nous devons utiliser la propriété de l'eau. Je vais donc accéder au sélecteur d'éléments 5, et je vais taper de l'eau Dans un premier temps, je vais passer une valeur nulle. Il s'agit de la valeur par défaut. Si je place ce fichier, vous pouvez voir qu'il n'y a aucun changement dans leur eau. Mais si je passe moins un, laissez-moi vous montrer et configurer ce fichier. Maintenant vous pouvez voir, maintenant vous pouvez voir notre cinquième objet prendre la première place dans cette eau. Par défaut, la valeur de la propriété de l'eau de toutes les cellules est nulle. L'eau commence à partir d'une valeur négative. Pour le point 5, nous utilisons une valeur négative. C'est pourquoi c'est arrivé en premier. C'est moins un. De plus, je vais taper moins un à la cinquième place. Moins un. De même, pour notre troisième article, je voudrais laisser passer moins deux eaux moins deux. Si je mets ce fichier, vous pouvez maintenant voir qu'il est arrivé en première place dans notre eau. B moins deux est inférieur à zéro et moins un. C'est pourquoi c'est arrivé en premier. Comme je vous l'ai dit plus tôt, valeur de la luxure est passée en premier Je veux égaliser moins deux à la troisième place moins deux. D'abord moins deux, puis viennent moins un, puis zéro, zéro, zéro et zéro. Mais si je passe une valeur dans l'élément numéro un, laissez-moi vous en montrer une sur l'eau, puis définir ce fichier. Vous pouvez voir qu'il est arrivé sur le côté droit car un est supérieur à une valeur négative et à une valeur nulle. C'est pourquoi il est tombé à zéro. Je vais passer plus un ici. Son coup a perdu deux fois plus de valeur. Maintenant, si je passe l'eau deux dans notre quatrième article, laissez-moi vous montrer l'eau deux. Si j'ai enregistré ce dossier, comme vous pouvez le voir, il est maintenant à la dernière place. Parce que plus deux est supérieur à zéro, et un. Si j'ai configuré ce fichier, c'est maintenant clair pour vous. Vous pouvez maintenant clairement comprendre comment sont les eaux. Nous ne mettons aucune eau dans les points numéro deux et numéro six. À l'automne, la teneur en eau de ces articles est nulle. J'espère que vous comprenez maintenant l'arrosage. Maintenant, la question est de savoir où utilisons-nous la propriété de l'eau ? Lorsque vous souhaitez rendre votre site Web réactif, l'eau est la propriété la plus importante. Dans DextView, vous voulez suivre cette eau. Mais dans la vue mobile, vous souhaitez déplacer l'élément quatre en premier lieu. Dans ce cas, les propriétés de l'eau sont très utiles. J'espère que tu as compris. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 26. Tutoriel CSS Flexbox Flex Grow: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je viens avec un nouveau tutoriel. Dans ce didacticiel, nous allons apprendre une nouvelle propriété, la flexibilité. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon isle sto cotter et mon navigateur en utilisant l'extension Lip Seal, et je crée déjà un document eSTIML nommé Index doot Comme vous pouvez le voir dans notre conteneur parent, nous avons au total six articles flexibles. Utilisons notre nouvelle propriété. Fondamentalement, la propriété du groupe flexible ne fonctionne pas avec le conteneur. Je travaille avec des articles flexibles. Comme vous pouvez le constater, il existe des éléments de nom de classe communs pour tous les éléments flexibles. Je vais accéder au sélecteur d'objets. Et je vais utiliser notre nouvelle propriété, qui est Flex Grow. Croissance flexible. Ici, nous devons passer une valeur numérique. Si je passe zéro, puis que je définis ce fichier, comme vous pouvez le voir, il n'y a aucun changement. Si je passe une valeur ici, que j'en tape une, puis que je définis ce fichier, vous pouvez voir ici que tous les espaces sont divisés de manière égale en élément flexible. J'espère que vous comprenez maintenant comment fonctionne Flexdro Property. Si j'en passe deux ici, puis que je définis ce fichier, comme vous pouvez le voir, il n' y a aucun changement. Je partage également ce rythme, tous ces articles flexibles. C'est pourquoi ça ne marchera pas. Je reviens à mon ancien poste. Un, et je vais configurer ce fichier. Maintenant, je veux augmenter le nombre d'articles à huit. Oui, nous pouvons le faire. Dans un premier temps, nous devons sélectionner l'élément individuellement, puis utiliser cette propriété. Flex grow, et ici je vais en passer deux. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez le voir ici, maintenant c'est doublé par rapport aux autres ventes. De même, si j'en passe trois puis que je définis ce fichier, sa taille est désormais triple par rapport à tous. De même, je vais utiliser la même propriété dans notre article quatre. Je vais dactylographier, cultiver du lin, et je veux étendre la soudure jusqu'à quatre fois. Je veux en passer quatre ici. Si je configure ce fichier, vous pouvez voir la différence. Si je supprime la marge entre les échelles, c'est maintenant plus clair pour vous. Sans les points deux et quatre, tous les CES ne feront qu'un. Pour l'élément deux, la valeur de la propriété du groupe les est trois, et pour l'élément quatre, la propriété du groupe Kles est quatre Cette propriété ne fonctionnait que pour l'article Flex. En gros, nous utilisons cette propriété, quand devons-nous fournir une largeur égale à toutes les ventes. J'espère que vous comprenez maintenant ce qu'est la propriété du groupe Flex. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 27. Tutoriel CSS Flexbox Flex Basis: Salut, encore une fois, je suis de retour avec une propriété liée à une boîte flexible CSS. Dans ce tutoriel, nous allons apprendre ce qu'est Flex Basic. Cette propriété est assez similaire à Max with property. En gros, il gère Flex item wd. Voyons comment nous pouvons l' utiliser dans la pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon iso sur Cooror et mon navigateur en utilisant l'extension Life Server, et je crée déjà un document STL nommé index point Comme vous pouvez le voir à l'intérieur du conteneur flexible, nous avons au total six articles flexibles. Comme vous pouvez le voir, nous utilisons la propriété display, flex, et nous utilisons également Flex RAP. Nous avons utilisé la propriété Flex Rap car si l'objet survolait, il tombait C'est pourquoi nous utilisons Flex RAP. Pour chaque article flexible, nous définissons une largeur commune. Comme vous pouvez le constater, flex grow one. Nous avons découvert cette propriété dans notre précédent tutoriel. C'est pourquoi tous les objets occupent le même espace. Utilisons la propriété flex bases. Dans le sélecteur du premier élément, je vais taper flex bases Et ici, je passe plusieurs fois 250 pixels. Si je définis ce fichier, comme vous pouvez le voir, notre premier élément flexible fait maintenant 250 pixels. Maintenant, cela fonctionne comme une largeur maximale. Activons la barre d'outils pour les développeurs. Si je prends ce point, comme vous pouvez le voir, la largeur de notre premier article est de 250 pixels. Mais sans notre premier objet, toutes les profondeurs occupent le même espace Mais si j'essaie de réduire la taille du navigateur, laissez-moi vous le montrer. Comme vous pouvez le voir, cela n' affectera pas la largeur de cet article. Si nous réduisons la largeur du navigateur, comme vous pouvez le voir, elle diminue maintenant. Parce que cette propriété fonctionne comme une largeur maximale. Nous pouvons réduire la largeur de cet article en dessous de 250 pixels, mais nous ne pouvons pas insister sur la largeur de cet élément de plus de 250 pixels. Je vais maintenant utiliser la propriété flex basis, tout cet article. Je vais commenter cette ligne, et je vais lier les bases flexibles de 100 pixels. Si je définis ce fichier, dans un premier temps, je vais augmenter la largeur du panneau de mon navigateur. Maintenant, vous pouvez voir que la largeur de notre premier article est de 250 pixels. Mais sans notre premier article, largeur de chaque article est de 100 pixels Si j'essaie d'augmenter légèrement la taille du navigateur, laissez-moi vous montrer, comme vous pouvez le voir, point 5 se trouve dans le coin droit. Parce que sans le premier élément, tous les éléments essaient de conserver une largeur de 100 pixels et essaient également remplir l'espace de ce navigateur. Essayons maintenant de réduire la largeur du navigateur et voyons ce qui s'est passé. Si j'essaie de réduire la largeur du navigateur, comme vous pouvez le voir, la plupart des éléments sont expédiés vers la deuxième ligne car nous utilisons la propriété flexer Sinon, ils vont déborder dans ce conteneur. Mais si je le réduis un peu plus, comme vous pouvez le constater, comme vous pouvez le constater, il n'y a pas de place pour deux éléments sur une même ligne. C'est pourquoi ils rétrécissent. Mais comme vous pouvez le constater, nous réduisons l'article dans un sens. Mais en restant dans le premier élément, toutes les largeurs des éléments sont toujours de 100 pixels car ils ont de l'espace pour s'étendre sur toute leur largeur Mais si je le réduis de plus en plus, comme vous pouvez le constater, tous les articles réduisent leur largeur. J'espère que maintenant c'est clair pour vous, cette propriété fonctionne comme un Max. Non seulement cela, cette propriété fonctionnait également comme une largeur minimale. Laisse-moi te montrer. Si je commente cette ligne, et si nous utilisons la propriété Flex grow pour tous ces éléments et définissons ce fichier, comme vous pouvez le voir, tous les éléments sont placés sur une seule ligne. Nous utilisons la propriété lex Bass uniquement pour le premier article. S'il en reste une, nous utilisons la propriété Flex grow, et O Flex grow value en est une. Comme je vous l'ai dit, cela fonctionne également comme une propriété de largeur minimale. Laisse-moi te montrer. j'essaie de réduire la largeur du conteneur, comme vous pouvez le voir, cela affectera toute la largeur de cet article sans l'article un. Si j'essaie de le réduire davantage, comme vous pouvez le constater, cela n' affectera pas le premier point. Sans le premier élément, tous les articles réduisent leur largeur. Si nous essayons de le réduire davantage, comme vous pouvez le constater, notre dernier article sera expédié à la deuxième rangée. Mais notre article 1 conserve toujours la même largeur, 250 pixels. Si nous utilisons la propriété Flex bases avec flex grow, il y a comme une largeur minimale. Mais si nous utilisons uniquement la propriété flex basis, elle agira comme un maximum avec. Non seulement cela, nous pouvons également utiliser ici une valeur en pourcentage. Supposons que je veuille utiliser 50 %, 50 %. Si je configure ce fichier, comme vous pouvez le voir, il fonctionne toujours correctement. Augmentons le pourcentage de 90 %. Si j'ai configuré ce fichier, vous comprendrez maintenant comment il fonctionne. Maintenant, à chaque fois, notre premier article occupera 90 % de la largeur de ce navigateur. C'est donc à vous de décider du type de valeur que vous allez utiliser. J'espère que vous comprenez maintenant ce qu'est la propriété Flex basis. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 28. Tutoriel CSS Flexbox Flex Shrink: Bon retour, les gars. Dans ce pterio nous allons découvrir ce qu'est le Flex Store Passons à l' écran de l'ordinateur et voyons ce que c'est. Ici, vous pouvez voir, côte à côte, que j'ai ouvert mon visotrio Correor, en utilisant l'extension Lib Sever, en utilisant l'extension Lib Sever, et j'ai déjà créé un document STL nommé Index Dot STML. Et lui, vous pouvez utiliser C pour article flexible différent, un, deux, trois, quatre. Voici notre conteneur flexible. Si je vous montre Heric C, nous utilisons le flex distant Dans notre classe commune, j'utilise la propriété flexro, Flexro, one. C'est pourquoi ses largeurs sont réparties de manière égale. Mais dans ce tutoriel, nous allons apprendre une nouvelle propriété, qui est flex strnk, alors commençons Rapidement, je vais supprimer la propriété flexro, et je vais définir wi wi, 200 pixels Si je configure ce fichier et que je redimensionne mon navigateur avec, vous pouvez voir le résultat Ici, vous pouvez voir que notre conteneur est plus grand que les articles. Comme vous pouvez le constater, tous les éléments ont une résolution de 200 pixels. Maintenant, je souhaite utiliser cette propriété de chaîne Flex dans notre premier élément. Mais dans un premier temps, je veux vous dire ce que signifie le flex sing. Fondamentalement, nous utilisons la propriété de flexion pour créer notre élément flexible réactif Si vous souhaitez rendre vos articles rétractables, vous devez utiliser cette propriété Ici, vous pouvez le voir rétrécir l'article. Permettez-moi de clarifier le concept. Dans notre premier article, je vais utiliser cette propriété, flex shrink. Un est la valeur par défaut. Si je définis ce fichier, vous pouvez voir ici qu'il n' y a aucun changement. Mais si j'utilise une valeur nulle et que je définis ensuite ce fichier, maintenant vous pouvez voir, hé, j'ai fait du cinema. Nous devons utiliser cette propriété à l'intérieur de l'article, pas de tous les articles. Je souhaite déplacer cette propriété dans notre article 1. Si j'ai défini ce fichier, vous pouvez voir ici que premier élément n'a pas changé cette forme. Maintenant, notre article 1 n' est pas rétractable. Maintenant, il a maintenu la largeur fixe, 200 pixels. Si j'augmente la largeur du navigateur, vous pouvez voir le résultat. Si je réduis au maximum la taille d'un autre article flexible, laissez-moi vous montrer comment vous pouvez voir notre autre article flexible survoler ce conteneur Comme vous pouvez le constater, notre premier article n'a pas rétréci car nous avons utilisé la valeur de flexion zéro Maintenant, c'est clair pour vous, pour ce qui est de la réduction, nous pouvons utiliser zéro et une valeur. Si nous utilisons une valeur et que nous définissons ensuite ce fichier, vous pouvez maintenant voir le résultat. Ici, vous pouvez le voir, maintenant nous réduisons notre article. Si vous souhaitez désactiver le rétrécissement, vous devez utiliser une valeur nulle. Maintenant, je vais vous montrer autre chose. Vous savez déjà que si j'utilise une valeur nulle, nous pouvons désactiver le rétractable. Mais si nous utilisons une seule valeur, nous pouvons réduire nos éléments flexibles. Maintenant, sans zéro ou un, nous pouvons utiliser des valeurs différentes. Laisse-moi te montrer. Si j'utilise deux cheveux, je place ce fichier, vous pouvez voir le résultat. Cela réduit notre premier article par rapport aux autres articles. De même, si j'utilise trois valeurs, puis que je définis ce fichier, vous pouvez voir, encore une fois, qu'il réduit notre élément un. Si nous n'utilisons pas de valeur nulle, notre article est toujours rétractable Et maintenant je vais vous montrer la deuxième méthode. Comment pouvons-nous utiliser cette propriété de chaîne d'une manière différente ? Pour cela, dans un premier temps, je vais retirer l'aile de l'objet. Ensuite, j'ai configuré ce fichier. De plus, je vais utiliser la valeur 1 de la chaîne. Et maintenant je vais utiliser la propriété flex basis. Base flexible. Base flexible 200 pixels. base flexible signifie dynamique w. Maintenant, vous pouvez voir nous ne pouvons pas appliquer de largeur à tout l'article. Nous appliquons w dans notre premier article en utilisant la propriété flex basis. Maintenant, si j'enregistre ce fichier et que j'essaie de réduire la largeur du navigateur, comme vous pouvez le voir, lorsque cet espace est épuisé, et si j'essaie de le réduire, vous pouvez voir notre article 1 également diminuer. Maintenant, la question est de savoir pourquoi réduire la taille parce que nous utilisons une seule valeur. Mais si j'utilise une valeur nulle, acceptez ce fichier. Vous pouvez maintenant voir que nos articles ont été survolés depuis ce conteneur Mais si je passe deux valeurs puis que je définis ce fichier, comme vous pouvez le voir, cela ne fonctionnera pas. Si j'utilise Value 1 et que je définis ce fichier, vous pouvez voir qu'il n'y a aucun changement. Dans cette méthode, nos autres valeurs ne fonctionneront pas. Si vous souhaitez couvrir l'espace restant, vous pouvez dans ce cas utiliser Flex Grove Vue. Laisse-moi te montrer. Dans notre quatrième article, je vais utiliser Flex Grove Vue. Le lin pousse. Premièrement, si je pose le sol, comme vous pouvez le constater, notre quatrième article couvre tout le vide. Si je réduis la largeur du navigateur, vous pouvez voir notre article 4 se réduire automatiquement. D'un seul rétrécissement, cela se répercute maintenant sur le premier article. J'espère qu'à ce moment-là, c'est clair pour vous. Et maintenant je vais définir la largeur de ce conteneur. Comme vous pouvez le constater, nous n'utilisons aucune largeur pour ce conteneur. Je vais maintenant définir le conteneur w. Ici, je vais lier WIDTH W 600 pixels. Si je définis ce fichier et augmente la largeur de mon navigateur, maintenant vous pouvez voir, maintenant vous pouvez voir que la taille de notre conteneur est fixe, et maintenant je vais réduire la largeur du conteneur. Je vais utiliser 300 pixels. Si je définis ce fichier, vous pouvez le voir réduire tous les éléments. Également l'article 1. Si je réduis le conteneur un peu d'esprit, quelque chose à 50 pixels, puis que je configure ce fichier. Ici, vous pouvez voir que cela fonctionne également. Parce que nous utilisons une seule valeur ici. FlexSN un Mais si j'utilise une valeur nulle puis que je définis ce fichier, vous pouvez voir un résultat différent. Vous pouvez voir ici que d'autres objets sont survolés depuis ce conteneur J'espère que vous comprenez maintenant ce qu'est la propriété Flex Shrink. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 29. CSS Flexbox avec Margin Auto Tutoriel: Aujourd'hui, dans ce didacticiel, nous allons apprendre ce qu'est la marge automatique dans Flex Box. Passons à l' écran de l'ordinateur et voyons comment travailler. Ici, vous pouvez voir site par site, j'ouvre mon codaor Visa Sudo et mon navigateur en utilisant l'extension Live Server, et je crée déjà un index de noms de documents estil Comme vous pouvez le voir dans mon navigateur, il existe un conteneur parent. À l'intérieur de ce conteneur parent, nous avons un article D. Voici notre conteneur flexible, et voici notre article flexible. Je vais maintenant vous montrer comment obtenir différents résultats en utilisant la valeur automatique des marges. Dans notre article, je vais taper une marge. Margin et je vais utiliser auto v. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez le voir horizontalement et verticalement au centre de la ligne. Mais la raison en est la raison, car il y a beaucoup d' espace libre à l'intérieur de ce conteneur. C'est pourquoi c'est une ligne centrale. Maintenant, je vais utiliser la marge gauche automatique gauche gauche. Si je définis ce fichier, comme vous pouvez le voir, vous pouvez le voir être automatiquement expédié sur le côté droit de ce conteneur. L'article quitte l'espace sur le côté gauche et est expédié sur le côté droit. Si j'utilise margin top auto top, définissez ce fichier. Vous pouvez maintenant voir qu'il descend du haut car il y a de l'espace libre en haut. Sur ce, je vais utiliser Margin Late Property. Marge en retard. Encore une fois, je vais utiliser Auto Vu. Si je définis ce fichier, vous pouvez maintenant voir notre article flexible formé dans le coin inférieur droit de ce conteneur. J'espère que vous pouvez maintenant comprendre comment nous pouvons obtenir un alignement différent simplement en utilisant Auto Vu. Permettez-moi de vous donner un autre exemple. Supposons que nous ayons un conteneur. À l'intérieur de ce conteneur, nous avons au total quatre articles flexibles. Vous pouvez voir ici les articles, l'article un, l'article deux, l'élément trois et le point quatre. Je dis une couleur de fond différente pour ces articles. Maintenant, je vais utiliser notre marge automatique Vu. Je vais l' utiliser dans notre article 2 Margin, right auto. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir que notre article deux occupe tout l'espace disponible à l'intérieur du conteneur, et qu'il fournit une marge d'utilisation et déplace l'article trois et l'article quatre du côté droit de ce conteneur. De même, si j'utilise la propriété margin lept, laissez-moi vous montrer la marge p puis définir ce fichier Maintenant, vous pouvez voir, c'est fournir tout le côté espace de cet article deux. Si j'utilise la même propriété que celle du premier élément, je vais donc couper cette propriété et la coller ici. Si je définis ce fichier, vous pouvez maintenant voir qu'il fournit tout l' espace avant le premier élément et qu'il déplace tous les éléments du côté droit de ce conteneur. Lorsque vous travaillez avec le site adaptatif, vous pouvez utiliser cette arborescence pour aligner votre élément flexible. J'espère que vous comprenez maintenant comment créer une mise en page différente dans Flex Box en utilisant la valeur automatique . Merci d'avoir regardé cette statue du tutoriel pour notre prochain tutoriel. 30. Tutoriel flexible imbriqué dans CSS Flexbox: Bonjour, il s'agit de la dernière propriété flexbox liée au didacticiel. Dans notre tutoriel suivant, nous allons aborder certains projets similaires Dans ce didacticiel, nous allons découvrir ce qu'est le flex imbriqué Passons à l' écran de l'ordinateur et voyons comment cela fonctionne. Comme vous pouvez le voir, il y a un contenant et à l'intérieur de ce contenant, y a un article en trois D. Si nous convertissons notre conteneur parent en conteneur flexible, nous appelons cet élément de flex. Mais si nous utilisons la propriété display flex dans un élément en particulier, il s'agira dans ce cas d'un conteneur flexible imbriqué Ce sont également des articles flexibles à l'intérieur de ce conteneur. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon code Visual Studio ou mon navigateur à l'aide de l'extension Light Server, et je crée déjà un point d'index de nom de document sable sur. Vous pouvez voir ici un article parent et un conteneur. À l'intérieur de ce conteneur, nous avons mis les quatre articles Flexbox. Comme vous pouvez le voir dans notre classe de conteneur, nous utilisons la propriété display flex. abord, je vais changer la direction des éléments flexibles. Ici, je vais utiliser la propriété flex direction. Direction de flexion. Je vais utiliser une colonne. Si je configure ce fichier, vous pouvez voir le résultat. Nous avons déjà défini une hauteur de cent pixels pour deux de nos articles. Maintenant, je vais en ajouter trois autres dans notre deuxième article. Ici, je vais ajouter au total trois autres de. Dans un premier temps, je vais créer un d avec la classe Sub item. Article de classe S. De plus, je vais utiliser un autre nom de classe S item un pour notre premier d. Ensuite, je vais dupliquer cette ligne au total deux fois. Je vais donc faire l'éloge d'une vieille flèche descendante en forme de vieille flèche. Sous-élément deux et sous-élément trois. Comme vous pouvez le voir, j'ai défini un sous-élément de nom de classe commun, et nous disons également un nom de classe différent pour chaque élément. Ensuite, insérez cette démo, je vais taper A, B et C majuscule. Si je définis ce fichier, comme vous pouvez le voir, il a renvoyé nos articles. Maintenant, je vais convertir notre deuxième article Flexbox en conteneur Flexbox Ici, je vais utiliser un affichage du nom de propriété. Présentez le lin. Si je définis ce fichier, comme vous pouvez le voir, par défaut, il organise notre élément dans un seul rôle. Maintenant, disons une couleur de fond pour nos articles. Pour cela, point point deux, supérieur au point sinusoïdal, le nom de notre classe, qui est un sous-élément. Ensuite, à l'intérieur des cives, je vais dire couleur de fond Fond y. Je vais aussi dire une couleur de texte. Couleur, noir. Si je configure ce fichier, vous pouvez voir le résultat. Et maintenant, je veux diviser également notre article flexible imbriqué dans ce conteneur Pour cela, je vais utiliser un nom de propriété Plex grow. Groupe Flex. Vin Plex Drop. Si je configure ce fichier, vous pouvez voir le résultat. Permettez-moi de donner une marge à nos articles qui peuvent vous hiérarchiser. Marge d'un pixel. Si je définis ce fichier, vous pouvez voir le. Comme vous pouvez le constater, nous avons un conteneur flexible parent. À l'intérieur de ce flex contin parent, nous avons placé Protal quatre éléments flexibles, et nous convertissons notre deuxième élément flexible en un conteneur flexible imbriqué, et à l'intérieur du flex contin imbriqué, nous avons placé trois éléments flexibles Protal, A, B et C. J'espère que vous savez maintenant comment créer des comment Ce n'est pas très difficile. C'est un processus très simple. Merci d'avoir regardé cette vidéo, je vous prépare pour notre prochain tutoriel. 31. Comment créer un menu de navigation déroulant en utilisant Flexbox: Bonjour, c'est bon de te revoir. Bienvenue dans notre premier projet CSS Flexbox. Dans ce projet, nous allons créer un menu de navigation déroulant à l'aide de la propriété CSS Flexbox. Comme vous pouvez le voir, après la section du service Hoberm, vous pouvez le voir ouvrir un menu déroulant Ensuite, si une section de développement Web suit également, ouvrez une autre section déroulante, un Strep S PHP et Java Voyons comment nous pouvons créer celui-ci. Comme vous pouvez le voir, nous sommes enfin dans mon éditeur de code Visa Studio. De plus, je suis dans mon répertoire de travail actuel. ce répertoire, nous avons deux fichiers, dans le fichier Des point Stable, et le fichier style point Sess, et nous avons une image de nom de dossier, et dans ce dossier, nous avons une image, nature point JPG Et comme vous pouvez le voir dans mon document d'estimation, nous avons déjà lié notre dossier de thèse, style point Sess. Je vais d'abord terminer la section Stable. À l'intérieur de la balise body, je vais d'abord prendre une balise profonde, point B, et je vais prendre un nom de classe, et notre nom de classe est Menu AA. Soulignez la zone. À l'intérieur de ce DIP tag, je vais d' abord prendre le tag UL. Comme vous le savez, les étiquettes UL ne sont pas utilisées pour les cuissardes. Pour les éléments de menu, nous avons besoin d'une balise LI, L. À l'intérieur de la balise LI, je vais ajouter une balise NCA. Nous n'avons pas besoin de la rediriger vers aucune page. C'est pourquoi je vais utiliser le signe de texte H. Ensuite, je vais taper le nom de notre premier élément de menu. Le premier nom de menu est. Alors je dois faire en sorte que nous obtenions cette ligne. Et notre prochain élément de menu est ci-dessus. Et notre troisième élément de menu concerne les services. Je vais donc supprimer les services de type ci-dessus et Hem. Et notre quatrième élément de menu est le portfolio. Il tape Portfolio. Et notre dernier élément de menu signifie « contact contact ». Il s'agit de notre section de menu principal, et nous devons maintenant créer une option déroulante pour les services. À l'intérieur du tag LI, je vais prendre un autre tag UL. Je vais également attribuer une classe à cette balise UL. Claus en liste déroulante. Soulignez-en un Pour les éléments de la liste déroulante, encore une fois, nous devons étiqueter la balise LI, L. Nous devons également étiqueter et la balise Gut, A, et je ne veux pas la rediriger vers aucune page C'est pourquoi j'utilise le tag Has. Quel type de services nous fournissons, nous fournissons la conception de logos, conception Web et le développement Web. Type HM, conception de logo, conception de logo. Alors je vais dupliquer cette ligne. Notre prochain service est la conception de sites Web. Sa typographie et tous les services de développement Web. Dans cette section de services, nous avons au total trois autres sous-sections. Maintenant, je souhaite ajouter trois autres éléments de menu dans la section de développement Web. À l'intérieur de la balise LI, encore une fois, je vais prendre la balise UL U L. De plus, je vais attribuer un nom de classe A. Deuxième liste déroulante des classes. Soulignez-en deux Encore une fois, à l'intérieur de la balise EL, je vais prendre A A, puis notre balise d'ancrage, et je ne veux pas la rediriger. Moi et je ne veux pas le rediriger. C'est pourquoi j'utilise le tag H. sein des services de développement Web, nous travaillons avec Python, PHP et Java squat Tout d'abord, notre premier élément principal est Python. Ensuite, je vais reproduire cette ligne et notre deuxième élément de menu est PHP, et notre troisième élément de menu est Java SQ Si nous configurons ce fichier et que nous vous montrons mon navigateur. Maintenant, vous pouvez voir à quel point c'est faible. Sans CSS, notre menu ressemble à ceci. Mais ici, vous pouvez voir la structure claire de notre menu. Dans la section des services, nous avons trois autres sections. Dans la section de développement Web, encore une fois, nous avons trois autres éléments, Python, PHP et Java trois. Dans notre première cassette, nous complétons notre partie HTML. Dans la partie suivante, nous allons commencer notre apprentissage du style. Commençons par le style p. Tout d'abord, sélecteur universel Amendo Select, qui est un signe astrologique Ensuite, à l'intérieur des calibrages tapez Amendo ou première fusion de propriétés Fusion de zéro. Ensuite, je vais taper rembourrage, rembourrage, également zéro Notre propriété suivante est la taille de la boîte, la taille de la boîte, la taille de la boîte de bordure, et maintenant je vais sélectionner toutes les balises d' ancrage dans la section de la zone de menu Je vais copier la zone de menu du nom de classe, puis revenir au fichier Sess, à la zone de menu à points de type Ham, ainsi qu'à notre balise d'ancrage Que j'appuie sur A. Ensuite, dans l'actrice, puis à la place de la classe, je vais utiliser notre première propriété, P est display. Affichez le lin, et notre propriété suivante est Aligner l'article. Alignez les éléments, centrez. Notre propriété suivante est de justifier le contenu. Justifiez le contenu. C'est également un centre. Et pour la couleur de police, je vais utiliser la couleur blanche, la couleur, le blanc. Ensuite, je vais prendre la couleur de fond pour notre manœuvre. Arrière-plan, et pour l'arrière-plan, je vais utiliser le RGV RGB Pour le rouge, je vais taper 57. Pour le vert, je vais taper 57 à nouveau. Pour le bleu, encore une fois, je vais taper 57. Si je configure ce fichier, je vous montre mon navigateur, vous pouvez voir le résultat. Ensuite, je vais indiquer la hauteur de toutes ces balises d'ancrage. Avec cela, je vais également changer le style de police. Ici, je vais lier la hauteur de 50 pixels et la famille de polices de la famille de polices sensorielle. Et huit caractères, huit caractères, huit corps. Et je ne veux pas de sous-ligne sur notre étiquette d'ancrage. C'est pourquoi nous devons utiliser une autre propriété, qui est la décoration du texte. Décoration de texte, aucune. De plus, je veux tous les éléments du menu. C'est pourquoi nous devons utiliser une autre propriété, savoir la transformation de texte. Transformation de texte, transformation de texte en majuscules. Si je configure ce fichier et que je vous montre mon navigateur, vous pouvez maintenant voir le résultat. Maintenant, nos téléphones sont bien plus beaux que les précédents. À l'aide de Flexbox, nous alignons horizontalement tous les éléments de menu au centre de cette page Je vais maintenant ajouter l' effet Over à tous ces éléments. Revenons au résultat, donc coor. Maintenant, je vais sélectionner le menu principal à points ou le texte d'ancrage, puis survoler le pointeur de deux points Ensuite, à l'intérieur des étalonnages, notre première propriété est l'arrière-plan, arrière-plan, et notre couleur de fond est le gris Avec cela, je veux la couleur de police blanche, couleur, blanc. Si je configure ce fichier et que je reviens dans mon navigateur, et si j'ouvre mes voitures sur ces objets, vous pouvez voir l'effet. Nous devons maintenant placer tous ces éléments de navigation sur une seule ligne. Pour cela, nous devons sélectionner le tag UL. Ici, je veux lier l'URL de la zone de menu. Ensuite, dans set the cos, le nom de votre première propriété est Lstle, Last style, qui n'est aucun Je ne veux aucun style dans les articles de notre liste. C'est pourquoi je n'utilise aucun de ces styles. cela, nous devons utiliser une autre propriété importante , à savoir le lin de table. Si je place ce fichier et que je reviens dans mon navigateur, vous pouvez maintenant le voir essayer de l' aligner sur une seule ligne. Mais nous n'en fournissons aucun, c'est pourquoi cela ne fonctionne pas parfaitement. Nous devons maintenant fournir à tous les éléments de la liste. Revenons à nouveau à l'éditeur de code Visual Studio. C'est une cravate. La balise LI de la zone de menu, et je vais la voir sur la balise LI. Ensuite, à l'intérieur de l'alvass, première propriété est la position, la position relative, et notre propriété suivante est le poids du poids Et notre troisième propriété est l'alignement du texte. Alignement du texte, centre d'alignement du texte. Si je place ce fichier et reviens dans mon navigateur, vous pouvez voir le résultat. Comme vous pouvez le constater, cela a fonctionné pour tous les éléments les moins présents dans le menu principal. Maintenant, je ne veux pas montrer notre section des services tant que je ne l'ai pas bloquée. Pour cela, nous devons masquer notre balise LI d'un point vers le bas. Revenons au is st . Je vais taper un point dans la liste déroulante, souligner un, et je vais sélectionner toutes les balises LI à partir de celui-ci Ensuite, à l'intérieur des étalonnages, je vais utiliser une propriété d'affichage afficher aucun. Avec cela, je vais utiliser une autre position de nom de propriété. Position relative. Si je configure ce fichier et vous montre mon navigateur, laissez-moi vous le montrer. Comme vous pouvez le constater, notre section déroulante n'est plus visible, mais je veux la voir lorsque je passe la souris dessus Pour cela, nous devons sélectionner toutes les balises LI de D vers le bas. Laisse-moi te montrer. Zone de menu à points, puis je vais sélectionner toutes les balises LI. Sur ce, je veux ajouter le sélecteur O. Ensuite, je vais sélectionner tous les éléments de la liste dans la liste déroulante. Type Hm, point, liste déroulante, sélecteur direct ou nom de tag, K. Alors, la calise ou la première propriété de positionnement se situe en haut de T zéro. De plus, je vais utiliser une autre propriété, qui est display. Bloc d'affichage. Si je place ce fichier et que je reviens à mon navigateur et section qui sont mes voitures en particulier , vous pouvez maintenant voir le résultat. Maintenant, j'affiche tous les menus déroulants, conception du logo, la conception Web et le développement Web. Mais notre deuxième option déroulante ne fonctionne pas parfaitement. Mais avant, nous devons parfaitement organiser notre menu déroulant. Revenons au code de Visual Studio édité à nouveau. Ici, je vais sélectionner un point dans le menu déroulant. Puis il a défini les cas, O première propriété est position, position absolue. Et pour l'organiser par pied, nous devons utiliser une autre propriété, qui est l'affichage. Affichez les scories, et je souhaite organiser les éléments du menu déroulant, par colonne. C'est pourquoi nous devons utiliser une autre propriété, qui est la direction du plex. Direction du jeu, colonne. Nous devons également définir les éléments de notre liste déroulante. Type d'Herm, quoi à 100 %. Si je place ce fichier, que je reviens dans mon navigateur et que je passe mon curseur sur la section service, vous pouvez maintenant le voir parfaitement Ici, vous pouvez voir que nous alignons parfaitement nos éléments du menu déroulant, colonne par colonne. Nous devons maintenant afficher notre deuxième menu déroulant. Pour cela, il faut presque faire la même chose. Revenons au code s studio, et je vais reproduire cette section Dans un premier temps, je vais masquer nos deux menus déroulants. la liste déroulante deux, ceci, et maintenant je n'ai plus besoin de cette propriété de position. Je l'enlève. Nous devons également ajouter un effet de survol déroulante des éléments de la liste Pour l'instant, je n'ai pas besoin d' utiliser le secteur de style direct pour cela et le barrage pour changer la liste déroulante un par deux. De plus, je vais supprimer la zone de menu et taper le menu déroulant à points. Descendez sous le premier objectif. De plus, je n'ai pas besoin de cette propriété supérieure car je veux l' afficher en haut de la page. Je vais configurer ce fichier. Ensuite, je vais changer ce nom d'élection, premier au deuxième menu déroulant, et je vais conserver toutes les propriétés et la même valeur, mais je vais supprimer avec propriété et type de maison en haut de zéro. Là, je vais utiliser une autre propriété, qui se situe dans le top zéro. Notre prochaine propriété est Lip Lap à cent pour cent. De plus, je vais configurer le menu déroulant vers la section du menu. W 200 pixels. Si je place ce fichier et que je reviens à mon navigateur et générale de service et de développement Web section générale de service et de développement Web, cela ne fonctionne pas. Je pense que j'ai fait une erreur. Revenons au fichier stable. Comme vous, nous avons fait une faute d'orthographe dans la deuxième liste déroulante. Nous devons utiliser, non. Si je définis ce fichier et que je définis mon fichier de style reviens sur mon navigateur, que curseur sur les services et que je passe le curseur sur le Vous pouvez maintenant voir le résultat. Maintenant, notre menu fonctionne parfaitement. Comme vous pouvez le voir, nous pouvons créer un menu Db down en utilisant la propriété flex. Ensuite, je vais ajouter une image d'en-tête et un texte à l'aide des propriétés flex. Je vais maintenant ajouter une image d'en-tête. Pour cela, nous devons utiliser une autre balise DIP, point D, et je veux définir une classe pour eux, qui est la zone de bannière. Zone de soulignement de la bannière. À l'intérieur de cette balise DIP, je vais ajouter un H to. Et Hameroty, le pouvoir de Flex Box. Le pouvoir de Flex Box. Et je vais configurer ce fichier. Concevons maintenant la zone de bannière dans notre fichier Sess. Je vais copier le nom de cette classe, la bannière Aa, dans mon fichier Sess, je vais lier la zone de bannière. Ensuite, j'ai défini la première propriété du css O comme image de fond. Image de fond. Pour l'image de fond, je vais prendre cette photo, qui se trouve dans notre dossier d'images, NP. Tapez Ho, R. U R L, puis notre image de dossier. Barre oblique ou nom de l'image (point naturel) JPG. Sur ce, je vais parler de la taille de l'arrière-plan. Taille de fond, taille de fond de couverture. Nous devons également transmettre la position d'arrière-plan. Position du sol, position de l'arrière-plan , centre au centre. Je veux centrer cet arrière-plan horizontalement et verticalement. C'est pourquoi je passe au centre et au centre. Je vais maintenant régler la hauteur de cet arrière-plan. Hauteur cent VH. Si je place ce fichier et que je reviens dans mon navigateur, vous pouvez voir le résultat. Nous devons maintenant aligner le centre de texte de cette image. Pour cela, nous devons utiliser cette propriété flexible. Passons à l' éditeur de code resto et ici je vais taper ce play flex Alignez le centre de l'article. De plus, je vais passer par le centre de contenu de Justify. Si je configure ce fichier et ce tag par navigateur, vous pouvez voir le résultat, la puissance de Flex Box. Nous devons maintenant augmenter la taille du texte et changer la couleur. Pour cela, je vais sélectionner notre étiquette à en-tête. J'ai une zone de bannière H deux. Ensuite, insérez les calibrages ou les premiers textes de propriétés, transformez le texte en majuscules Sur ce, je vais changer de couleur. Couleur, blanc. Je vais également modifier la taille de la police. Taille de police, 60 pixels. Je souhaite également modifier la famille de polices. Famille de polices. Famille de polices monospace. Et je vais configurer ce fichier. Si je retourne dans mon navigateur, vous pouvez voir le résultat. Mais il n'est pas correctement visible à cause de l'arrière-plan. Nous devons maintenant ajouter un dégradé au-dessus de l'effet sur cet arrière-plan. Faisons-le. Ici, je tape, linéaire, gradient linéaire, entre ces deux valeurs, je vais utiliser une virgule. À l'intérieur des entretoises, nous devons transmettre la valeur du gradient des points de départ et de fin Ici, je vais utiliser la valeur RGBA, r G B A, A pour Alpha, qui est utilisée pour la transparence Pour le rouge, je vais utiliser zéro. Pour le vert, je vais également utiliser zéro, et pour le bleu, encore une fois, je vais utiliser zéro. Mais pour la valeur Alpha, je vais utiliser 0,6. Il s'agit d'un côté du gradient v. Nous devons transmettre un autre côté de la valeur du gradient. Ici, je vais utiliser le coma. Et je vais créer cette ligne. Je vais le copier et ici je vais le coller. Si je configure ce fichier et que je le fais dans mon navigateur, vous pouvez maintenant voir le résultat. J'ai réussi à créer un bouton de navigation en utilisant la propriété Flexos C'est l'une des bonnes utilisations et exemple de la propriété de Flexbox. Merci d'avoir regardé cette vidéo, soyez au courant de notre prochain projet.