Le guide complet de CSS flexbox avec un projet complet 2024

1. Introduction du cours et ce que vous allez apprendre: Êtes-vous fatigué d'utiliser des flotteurs que d'avoir le clair ces mêmes flotteurs ? Êtes-vous fatigué d'utiliser le positionnement pour obtenir la couche que vous voulez ? Et puis découvrir que tout tombe morceaux lorsque vous le visualisez sur différentes tailles d'écran. Voulez-vous créer des mises en page réactives avancées et CSS en utilisant simplement des lignes de code simples. Si c'est le cas, alors ce cours est pour vous. Je suis un deck ADSR, un développeur web complet et freelance depuis plus de sept ans maintenant. Et je serai votre instructeur tout au long de ce cours. Dans cette série de leçons, vous apprendrez tout ce que vous devez savoir pour commencer à utiliser flexbox dans vos futurs projets. Nous commencerons par apprendre et comprendre le fonctionnement de la flexbox. Parce que je pense que si vous avez déjà essayé d'utiliser flexbox auparavant, vous pourriez avoir été submergé par le nombre de nouvelles propriétés. Il y a environ 11 ou 12 nouvelles propriétés avec une moyenne de quatre valeurs potentielles. Donc, ça peut être un peu accablant de sauter directement dedans. Mais grâce à ce cours, vous aurez une compréhension claire du fonctionnement de chaque propriété et façon dont chaque propriété spécifique peut être utilisée pour contrôler la mise en page de différentes manières. Je crois en l'apprentissage en le faisant après avoir compris et appris toutes les propriétés de flexbox, nous allons nous salir les mains et commencer par construire deux menus simples, menu de niveau unique et un menu avancé. Et cette partie du cours, vous verrez étape par étape tout ce que vous avez appris dans les leçons d'action précédentes. Une chose que j'ai gardé à l'esprit quand je construisais ce cours, c'est que je voulais qu'il se démarque des autres cours. J' ai remarqué que dans d'autres cours flexbox, vous voyez juste quelques cases sur l'écran et les instructeurs les déplacent simplement en utilisant flexbox. Et à la fin du cours est soudainement terminé et vous êtes laissé penser, ok, c'était bien. J' ai appris les bases de la flexbox. Mais maintenant quoi, comment puis-je utiliser ces connaissances dans des exemples réels ? Parce qu'après tout, les pages Web ne sont pas juste des boîtes qui bougent, non ? Et c'est exactement pourquoi j'ai créé la dernière section de ce cours. Dans cette section, nous allons construire un projet complet à partir de zéro que j'ai construit pour vous. Mon objectif principal pendant que je parvenais avec ce projet est de savoir comment implémenter chaque propriété que nous apprenons sur flexbox dans le cours. Voyez que vous pouvez obtenir une solide compréhension de ce que nous pouvons faire en utilisant ces propriétés. Ainsi, dans le projet, vous apprendrez à créer de nombreuses mises en page d'événements différentes. Vous apprendrez donc ce qu'est la disposition du Saint Graal et comment la construire avec seulement trois ou quatre lignes de code. Avant flexbox, cela était impossible à atteindre avec CSS régulier. Une fois cela fait, nous allons construire un en-tête avec le menu et nous allons apprendre à centraliser le contenu verticalement en utilisant flexbox, qui était autrefois un énorme mal de tête. Après cela, va créer des colonnes de hauteur égale, qui est une mise en page commune que vous verrez beaucoup dans les blogs ou les sites de magazines. Ensuite, créera deux autres sections contenant des mises en page de cartes avancées qui seront très complexes si vous avez essayé de les créer en utilisant CSS régulier. Si vous faisiez cela, vous finiriez par avoir trop de lignes de code et vous trouverez très difficile de gérer ce type de mise en page si vous essayez de le rendre réactif. Enfin, nous allons créer une galerie d'images avec cette mise en page moderne connue sous le nom de maçonnerie horizontale, ce qui signifie fondamentalement que tous les éléments doivent avoir largeurs aléatoires différentes mais la même hauteur. Nous allons apprendre à configurer ces largeurs aléatoires en utilisant des sélecteurs CSS avancés. Et bien sûr, tout sera pleinement réactif. Il aura donc fière allure sur toutes les tailles d'écran, des appareils mobiles aux tablettes et des écrans encore plus larges. Maintenant, je suis là pour vous servir. Donc, pendant ce cours, si vous avez des questions et je veux dire, n'importe quelle question qui vous vient à l'esprit, mettez-la dans le Q et une section et je vous répondrai dès que possible. Je veux aussi en faire un cours cinq étoiles. Donc, si vous avez des suggestions, laissez juste un commentaire avec vos critiques constructives. Je ne crée pas de cours et je les laisse juste là sont régulièrement améliorés et à jour ce cours et peut-être même ajouter un peu plus de contenu si je vois quelques bonnes suggestions. Maintenant, avec tout ce qui dit, j'ai hâte de te voir dans le cours. Alors appuyez sur le bouton d'inscription et plongons et commençons notre flexbox d'apprentissage en voyage. 2. 2 créer notre premier récipient de boîte à flexbox: Bonjour tout le monde. Dans cette leçon, nous allons créer notre premier conteneur flexbox. Alors commençons. Bon, chaque fois que vous voulez utiliser flexbox pour contrôler vos éléments, vous devez passer par trois étapes. Tout d'abord, vous devez spécifier les éléments que vous voulez contrôler. Son alignement sont le dimensionnement ou quoi que ce soit en utilisant flexbox. En d'autres termes, les éléments sur lesquels vous souhaitez appliquer flexbox. Deuxièmement, vous voulez envelopper tous ces éléments à l'intérieur d'un conteneur extérieur. Et troisièmement, vous voulez définir la propriété d'affichage du conteneur à flexion en effectuant ces trois étapes. Maintenant, vous avez un conteneur flex, et à l'intérieur de ce conteneur flex, vous avez des éléments ou des éléments flexibles, ce qui signifie que vous pouvez maintenant utiliser les propriétés flexbox sur ce conteneur ou sur ces éléments, ou sur les deux pour contrôler la façon dont ces devraient regarder sur votre page en fonction de votre mise en page. Laissez-moi vous montrer un exemple de ce dont je parle ici dans mon éditeur de code. J' ai du HTML, C'est juste du HTML de base. Vous pouvez voir que j'ai un div avec une classe de conteneur flex. Et à l'intérieur de cela, j'ai pour les enfants divs avec une classe d'élément flexible à chacun d'eux. Si je les visualisais dans mon navigateur, vous pouvez voir qu'ils sont affichés en tant qu'éléments de bloc, bien sûr, parce que ce sont des divs, ils sont juste assis les uns au-dessus des autres. Mais maintenant, je veux utiliser flexbox sur cette page. Utilisons nos trois étapes. Tout d'abord, choisissez les éléments que vous souhaitez contrôler à l'aide de flexbox. Et bien sûr, nous choisirons ces quatre divs. Deuxièmement, mais tous à l'intérieur d'un conteneur extérieur. On l'a déjà fait. Vous pouvez voir qu'ils sont tous enveloppés avec cette div externe avec une classe de conteneur flex. Et puis, troisièmement, définissez la propriété d'affichage du conteneur sur flex. Passons à notre CSS et faisons cela. Faites défiler un peu vers le bas jusqu'à ce que vous trouviez le conteneur flex et définissez l'affichage sur flex. Vous pouvez maintenant voir qu'en définissant la propriété d'affichage du conteneur sur flex, les éléments flexibles sont maintenant en quelque sorte flottants vers la gauche et affichés côte à côte. Et c'est ce que fait l'affichage flex seul. En outre, la largeur de chaque élément flex dépendra de son contenu. Par exemple, si j'écris du texte supplémentaire ici dans la deuxième div, vous pouvez voir que sa largeur augmente pour gérer le contenu. Et maintenant, le conteneur flexible et les éléments de flux sont prêts à être contrôlés par les propriétés flexbox et nous allons apprendre à les contrôler dans les prochaines vidéos. Mais pour l'instant, c'est tout pour cette conférence. Je te verrai dans la prochaine. 3. 3 axes principaux et croix axes de compréhension et de croix: Je pense que cette leçon est l'une des leçons les plus importantes de tout le cours. Et si vous comprenez cette leçon, alors toutes les leçons à venir, nous ne ferons que construire sur celle-ci. Parce que cette leçon parle de la base CSS flexbox, qui est la compréhension du Maine et de l'axe transversal ou flexbox. Alors commençons. Très bien, donc dans la leçon précédente, lorsque nous définissons le conteneur flex en lui donnant un flex d'affichage, vous remarquez que les éléments flex étaient affichés côte à côte horizontalement. Vous vous demandez peut-être pourquoi horizontalement et pourquoi pas, par exemple, verticalement. Eh bien, il y a une bonne raison. Vous voyez chaque fois que vous définissez un conteneur flexible, cela définira également la direction de flux des éléments à l'intérieur de ce conteneur flexible. Que cette direction soit horizontalement ou verticalement, Il y a deux directions d'écoulement. Une ligne, qui est appliquée par défaut lorsque vous définissez le conteneur flexible et aligne fondamentalement les éléments horizontalement, comme dans la dernière vidéo. Et à la colonne, que vous devez appliquer si vous voulez remplacer la valeur par défaut. Et les colonnes alignent les éléments verticalement. Mais comment puis-je changer la direction de flux des éléments de ligne en colonne ? Eh bien, vous utilisez une propriété appelée flux flexible et l' appliquez au conteneur flexible lui-même et définissez sa valeur sur colonne. Donc, faisons cela et voyons à quoi cela ressemble ici dans mon éditeur de code dans notre fichier CSS, Disons colonne de flux flex. Vous pouvez voir maintenant qu'ils sont juste assis l'un au-dessus de l'autre comme avant. Maintenant, quel est l'intérêt de tout ça ? Et pourquoi ai-je dit toutes ces choses ? C' est la leçon la plus importante. Eh bien, la raison en est que lorsque le flux de flux est réglé sur la ligne, ce qui est encore la valeur par défaut, alors deux axes imaginaires sont automatiquement générés. L' axe principal et l'axe transversal. L' axe principal sera horizontal et l'axe transversal sera vertical. Mais si nous définissons le flux flexible sur colonne, alors l'axe principal dans ce cas sera vertical et l'axe transversal sera horizontal. Mais quand même, quel est le problème ? Pourquoi est-ce si important ? Eh bien, c'est si important parce que plus tard dans le cours, lorsque nous utilisons des propriétés flexbox, certaines d'entre elles affecteront toujours les éléments le long de l'axe principal selon qu'il est horizontal ou vertical. Rappelez-vous, nous avons dit que ce sera horizontal. Le flux est rho et il sera vertical si le flux flexible est colonne. Et d'autres propriétés affecteront toujours les éléments le long de l'axe transversal selon qu'il est horizontal ou vertical. En comprenant cela, lorsque vous apprenez de nouvelles propriétés, vous aurez seulement besoin de savoir quel axe cette propriété affecte. Si c'est l'axe principal ou si c'est l'axe transversal. Et tu es bon d'y aller. Laissez-moi vous aider à mieux comprendre. Réglons le flux flexible pour reléguer. Maintenant, imaginez qu'il y a deux axes qui vont sur l'axe principal et l'axe transversal. L' axe principal dans ce cas sera horizontal car le flux de flux est rho et l'axe transversal sera vertical. Bien sûr. Maintenant, je vais définir justifier le contenu à l'espace entre. Ne vous inquiétez pas pour cette propriété en ce moment. Nous l'explorerons plus tard. Mais ce que je veux que vous sachiez à propos de cette propriété c' est qu'elle est considérée comme une propriété de l'axe principal. En d'autres termes, il affecte seulement l'axe principal, qui dans notre cas est l'horizontal. Donc, si je vais dans mon navigateur et actualise, vous pouvez voir qu'il affecte les éléments horizontalement parce que l'axe principal est horizontal et c'est une propriété d'axe principal. Mais si je vais à mon CSS et changer le flux flex en colonne et actualiser. Oh, regardez, nous, les éléments changent verticalement. Et oui, c'est parce que lorsque le flux de flux est colonne, l'axe principal est vertical et justifier le contenu affecte l'axe principal. J' espère que vous avez compris cette conférence. J' ai peut-être beaucoup parlé et répété quelques choses, mais c'est parce que cette conférence est très importante et cela vous aidera à comprendre tout le cours. C' est ça pour cette conférence, et je te verrai dans la prochaine. 4. 4 autres propriétés de flux flexibles sur la propriété fluides: Bonjour tout le monde. Dans cette leçon, nous allons en apprendre plus sur la propriété de flux de flux et les autres valeurs qu'elle accepte. Alors commençons. Comment les tarifs. Ainsi, vous vous souvenez de la dernière vidéo qu'après avoir créé un conteneur flexible, vous devez ensuite définir la direction de flux de flux afin que vous puissiez définir la direction de l'axe principal et de l'axe transversal. Maintenant, en plus de la ligne et de la colonne, la propriété flux de flux accepte également l'inverse de ligne et l'inverse de colonne. Donc, afin de définir la direction de flux du conteneur, je vais juste ajouter flex flow rho. Vous ne pouvez voir rien ne change car, comme je l'ai dit, le flux de flux est réglé sur la ligne par défaut, ce qui affiche fondamentalement les éléments flexibles horizontalement et les flotte vers la gauche. Examinons maintenant les autres valeurs que la propriété flex flow accepte. En plus de rho, nous pouvons utiliser la ligne inverse, qui retournera les éléments horizontalement et les poussera jusqu'à la fin du conteneur. En d'autres termes, flottez-les vers la droite et retournez-les. Donc, vous pouvez voir maintenant nous avons 432, alors nous pouvons également utiliser la colonne. Donc, je vais aller de l'avant et ajouter une colonne. Maintenant, vous pouvez voir que notre conteneur flex affiche les éléments flexibles sous forme de colonne. Ils sont assis l'un en dessous de l'autre comme des éléments de bloc normaux. Maintenant, nous pouvons également utiliser la colonne inverse. Vous pouvez voir qu'il retournera les articles verticalement et les poussera jusqu'à l'extrémité du conteneur. Vous pouvez voir que nous avons aussi 4321, et c'est tout pour cette leçon rapide. Et maintenant, vous savez quelles valeurs Flex Flow accepte. 5. 5 apprendrez la propriété enveloppée flex wrap: Bonjour tout le monde. Dans cette leçon rapide, nous allons apprendre sur la propriété de flux wrap. Alors commençons. Par défaut, tous les conteneurs flexbox sont des conteneurs à une seule ligne, ce qui signifie que les éléments flexibles seront toujours affichés sur une seule ligne. Et si vous avez beaucoup d'articles, ils ne seront pas enveloppés à la ligne suivante quand il n'y a pas assez d'espace pour eux à l'intérieur du conteneur, ils vont en quelque sorte déborder. Par exemple, si je copie tous les éléments et les colle à nouveau, puis je fais le conteneur avec plus petit. Vous pouvez voir que les éléments sortent maintenant de notre conteneur. Mais la plupart du temps, nous ne voulons pas que cela se produise, surtout quand il s'agit de design réactif. Vous voudrez que les éléments soient enveloppés à la ligne suivante. S' il n'y a pas assez d'espace pour le faire, nous avons juste besoin d'utiliser la propriété flex wrap. Donc, je vais appliquer le rat flexible, rat sur le récipient. Et maintenant, vous pouvez voir les éléments juste envelopper à la ligne suivante quand ils n'ont pas assez d'espace. On peut aussi utiliser un revers rap. Essayons ça et voyons ce qui va arriver. Vous pouvez voir que l'inverse inverse inverse juste les lignes elles-mêmes et n'affecte pas les éléments ou les retourner ou quoi que ce soit comme ça. Et donc c'est tout pour la propriété flex wrap. C' est très facile, mais très important, et vous l'utiliserez beaucoup. 6. 6 éléments d'alignement avec justification des propriétés de contenu: Maintenant, après avoir compris le concept des axes principaux et transversaux, dans ce chapitre, nous allons jeter un oeil aux propriétés flexbox qui affectent l'alignement de l'axe principal et de l'axe transversal. Très bien, donc dans cette leçon, nous allons commencer par les propriétés qui affectent l'axe principal. Commençons par la propriété de contenu justification. Fondamentalement, ce qui justifie le contenu est qu'il contrôle la façon dont les éléments de flux traitent l'espace libre restant à l'intérieur du conteneur. Et comment ces éléments de flux seront affichés par rapport à cet espace restant. Ou en d'autres termes, comment l'espace restant sera distribué autour des éléments. Donc justifier le contenu ne fera rien si votre conteneur n'a pas d'espace libre ou si les éléments remplissent complètement le conteneur ne laissant aucun espace libre. N' oubliez pas que chaque fois que vous voulez utiliser un contenu de justification, votre conteneur doit avoir de l'espace libre. Bon, maintenant, justifier le contenu accepte cinq valeurs. Tout d'abord, flex, start, qui est la valeur par défaut. Il aligne les éléments au début du conteneur flexible. Deuxièmement, Flex end, qui aligne les éléments à la fin du conteneur flexible. Troisièmement, Center, qui centre le contenu à l'intérieur du conteneur flexible. Quatrièmement, l'espace entre lequel sépare les éléments et distribue l'espace restant entre eux, mais pas autour d'eux. Et enfin, l'espace autour duquel sépare les éléments et distribue l'espace restant entre eux et autour d'eux. Et l'espace autour des éléments équivaudra à la moitié de l'espace entre eux. Jetons donc un coup d'oeil et voyons ces valeurs en action. Si je retourne à notre CSS, je peux définir le contenu de justification pour commencer par flex. Et vous pouvez voir que cela ne fait pas grand-chose car c'est la valeur par défaut. Et il aligne les éléments au début du conteneur sans espacement entre eux. Et l'espace libre sera juste ici. Maintenant, essayons de Flex End. Vous pouvez voir qu'il pousse tous les éléments à la fin et l'espace restant que nous serons au début du conteneur. Bon, essayons Center. Vous pouvez le voir juste centre les éléments et l'espace restant est réparti de manière égale entre le début et la fin, le conteneur flexible. Ensuite, essayons de l'espace entre. Vous pouvez voir qu'il sépare les éléments et met un espace égal entre chacun. Mais le premier élément est poussé au début du conteneur, et le dernier élément est poussé à la fin de celui-ci, ce qui signifie qu'il n'y aura pas d'espace entre eux et leur côté du conteneur. Et c'est la différence entre l'espace entre n espace autour. Donc, si je vais de l'avant et ajoute de l'espace autour, vous pouvez voir qu'il sépare les éléments avec des espaces égaux, tout comme l'espace entre cela. La principale différence est qu'il mettra de l'espace au début et de l'espace à la fin du conteneur. Et ces espaces sont égaux à la moitié de l'espace entre les éléments eux-mêmes. Ainsi, par exemple, si l'espace entre les éléments est de 50 pixels, dans l'espace juste ici sera de 25 pixels. Et rappelez-vous, c'est une propriété de l'axe principal, qui signifie tout comme nous l'avons utilisé pour changer les éléments horizontalement, nous pouvons également l'utiliser pour les changer verticalement. Vous remarquez donc que la hauteur du conteneur est de 300 pixels. Ainsi, nous pouvons avoir de l'espace libre et nous pouvons utiliser le contenu justifié verticalement. Donc, si je vais de l'avant et que je mets le flux flexible en colonne, et avant de recharger mon navigateur, vous savez que ce que cela fera est de rendre l'axe principal vertical ici. Donc justifier le contenu fonctionnera verticalement. Dans ce cas. Vous pouvez maintenant voir que l'espace autour fonctionne verticalement, pas horizontalement. Et maintenant bien sûr, toutes les valeurs précédentes peuvent être appliquées et cela affectera les éléments verticalement. Par exemple, utilisons Flex start. Vous voyez maintenant qu'il aligne les éléments au début du conteneur verticalement. Et fin flex les alignera à la fin du conteneur verticalement et le centre les frittera verticalement, Bien sûr. Maintenant, une chose à remarquer est que les propriétés de contenu justifient sont appliquées au conteneur flexible lui-même, pas aux éléments à l'intérieur de celui-ci. Et c'est tout pour cette conférence. J' espère que vous comprenez maintenant pourquoi l'axe principal et l'axe transversal sont importants lorsque nous utilisons des propriétés qui sont appliquées au conteneur flex, comme justifier le contenu. Et nous allons continuer à travailler avec eux dans la prochaine vidéo. 7. 7 en savoir plus sur la justification du contenu: Bonjour tout le monde. Dans cette leçon rapide, nous allons voir comment le contenu justifie fonctionne lorsque le flux flexible est défini sur ligne inverse ou colonne inverse. Alors commençons. Bon, donc maintenant nous avons nos quatre divs et je mets la propriété d'affichage du conteneur à fléchir. Par défaut, le flux flexible est rho, donc les éléments sont alignés horizontalement vers la gauche comme ceci. Maintenant, allons dans notre conteneur et ajouter la ligne de flux flex inverse. En faisant cela, les conteneurs Start se trouvent maintenant à droite. Ce qui signifie que si je vais de l'avant et ajoute du contenu justifié, flex start. Vous pouvez voir que flex start aligne maintenant les éléments vers la droite, pas vers la gauche parce que nous avons notre flux flex est réglé sur la ligne inverse. Et cela signifie également que si je vais de l'avant et ajouter fin flex à la place, bien sûr, les éléments seront alignés à gauche dans ce cas. Maintenant, cela fonctionne de la même manière avec l'inverse de la colonne. Donc, si je change la ligne inversée en colonne inverse, rappelez-vous maintenant justifier que le contenu fonctionnera verticalement, pas horizontalement. Donc, quand je recharge, vous pouvez voir que les éléments sont alignés sur le haut du conteneur parce que maintenant la colonne est inversée. Donc, le début est la fin et vice versa. Donc Flex end aligne les îles au début du conteneur dans ce cas. Et bien sûr, si je change cette fin flex en flex start, vous pouvez voir que les éléments sont maintenant alignés à la fin du conteneur. Et c'est tout pour cette leçon rapide. Et je te verrai dans la prochaine. 8. 8 éléments de aligner avec la propriété des objets d'alignement d'objets: Bonjour tout le monde. Dans cette leçon, nous allons parler d'un élément de ligne, qui est la propriété qui contrôle les éléments le long de l'axe transversal. Alors commençons. Très bien, donc avant de commencer, je dois dire qu'une ligne éléments et justifier le contenu sont vraiment similaires les uns aux autres. Ce qui signifie qu'ils sont tous deux appliqués au conteneur flexible et qu'ils ont tous deux besoin d'espace libre dans le conteneur pour fonctionner. La principale différence est que justifient les éléments de contrôle de contenu le long de l'axe principal, comme nous l'avons vu dans la leçon précédente. Mais aligner les éléments les contrôle le long de l'axe transversal. L' autre différence est que les valeurs qui alignent les éléments sauf sont un peu différentes des valeurs qui justifient le contenu accepte. Maintenant, aligner les éléments accepte quatre valeurs. abord, flex, start, qui alignera les éléments le long de l'axe transversal au début du conteneur. Deuxièmement, fin flex, qui les alignera le long de l'axe transversal jusqu'à l'extrémité du conteneur. Troisièmement, centre, qui centrera les éléments le long de l'axe transversal et en arrière. Extensible. Il s'agit d'une valeur par défaut. Et il étire simplement les éléments pour avoir la même hauteur ou la même largeur que le conteneur. Maintenant, voyons ces valeurs en action. Ici. Dans notre CSS. Le flux flexible est réglé sur la ligne, ce qui signifie que l'axe transversal est maintenant l'axe vertical. Et vous pouvez voir nos divs ou étirer verticalement par défaut. Nous pouvons donc changer cela en utilisant la propriété align items. Donc, si je vais à mon conteneur flex et ajouter un élément de ligne, flex start. Vous pouvez voir que le flex start poussera les éléments tout le chemin vers le haut du conteneur, laissant un espace vide en dessous. Revenons à notre CSS et essayons flex end. Et vous pouvez voir qu'il poussera les éléments à la fin du conteneur verticalement le long de l'axe transversal. Et essayons Center. Et bien sûr, il centrera les éléments verticalement le long de l'axe transversal, laissant des espaces égaux au-dessus et au-dessous d'eux. Maintenant, essayons d'étirer, qui est la valeur par défaut. Il va juste étirer tous les éléments et leur donner la hauteur du récipient. Et il ne considérera pas le contenu, ce qui signifie que tous les éléments finiront avec la même hauteur même si le contenu est différent. Et c'est très soigné et propre lorsque vous voulez faire des colonnes de la même hauteur, même si le contenu est différent en taille. Maintenant, nous allons utiliser ces valeurs lorsque le flux flexible est défini la colonne. En d'autres termes, lorsque l'axe transversal est horizontal, si je mets le flux flexible à la colonne juste ici. Maintenant, les éléments sont affichés comme une colonne et notre étirement horizontalement le long de l'axe transversal, en prenant toute la largeur du conteneur. Maintenant, nous allons utiliser flex start. Vous voyez que les éléments sont maintenant poussés au début du conteneur le long de l'axe transversal à gauche ici. Et au centre. Bien sûr, nous allons les centrer horizontalement et la fin flex. Nous allons les pousser à l'extrémité du conteneur horizontalement le long de l'axe transversal à droite ici. Maintenant, allons de l'avant et ajouter de l'espace de contenu justifié. Par exemple. Hé, essayons quelque chose. Je veux que vous mettiez la vidéo en pause et devinez ce que cela fera à nos éléments. Alors allez-y et faites une pause maintenant et devinez. Ok, on est de retour. Rechargeons notre page et voyons, j'espère que vous l'avez deviné correctement. Ce que cela a fait, c'est qu'il a affecté les éléments le long de l'axe principal, qui est vertical dans ce cas, parce que rappelez-vous, nous avons la colonne de flux flexible en ce moment. Ainsi, il sépare les éléments verticalement le long de l'axe principal. Vous pouvez donc maintenant utiliser à la fois justifier le contenu et aligner les éléments ensemble pour obtenir la mise en page souhaitée. 9. 9 en alignant un élément unique sur la propriété de soi aligner la propriété: Bonjour tout le monde. Dans la leçon précédente, nous avons appris comment contrôler l'alignement des éléments le long de l'axe transversal à l'aide de la propriété align items. Mais dans celui-ci, nous allons apprendre à le faire à un seul élément en utilisant la propriété d'alignement. Alors commençons. Très bien, Donc aligner auto et aligner les éléments sont vraiment similaires les uns aux autres. Ils affectent tous les deux les éléments le long de l'axe transversal. Tous les deux sauf les mêmes valeurs qui sont flex, start, Flex, End, Center et stretch. Mais la principale différence est que l'alignement auto affecte un seul élément flex seulement à l'intérieur du conteneur. Alors que l'alignement des éléments affecte tous les enfants du conteneur flexible. Et pour cette raison, lorsque nous utilisons align self dans notre CSS, nous l'utilisons sur un élément flex spécifique, pas sur le conteneur flex. Bon, donc si je vais ici à notre sélecteur de conteneur flexible et ajouter une ligne éléments flex start. Vous pouvez voir que tous les éléments sont poussés vers le haut du conteneur. Maintenant, c'est bon et c'est pratique. Mais que faire si je veux, par exemple, étirer seulement le premier élément sans affecter les autres éléments. Ou si je veux centrer le second et ainsi de suite. C' est là que l'alignement de soi entre en jeu. Si je vais ici à mon élément flex et ajouter aligner auto-étirement. Vous pouvez voir que le premier élément s'étire et remplit le récipient verticalement. Alors que les autres éléments là, le haut du conteneur. Allons à notre deuxième élément et ajoutez aligner auto centre. Vous pouvez voir est maintenant centré. Utilisons flex end sur le troisième élément. Et bien sûr, cela va le pousser à la fin du conteneur. Maintenant, la dernière valeur est flex start. Et vous pouvez voir qu'il ne fait rien parce que les éléments d'alignement sont configurés pour démarrer là-bas. Donc c'est tout pour cette leçon, tout le monde, et je vous verrai dans la prochaine. 10. 10 aligner multiples lignes avec la propriété de contenu de lignées d'aligner la propriété de contenu: Dans cette leçon, nous allons parler d'une autre propriété qui est utilisée sur le conteneur flex, aligner le contenu. Alors commençons. Alors, que pouvons-nous aligner la propriété de contenu pour nos éléments ? Fondamentalement, aligner le contenu est utilisé lorsque nous avons plusieurs lignes d'éléments. Il contrôle la façon dont ces lignes multiples sont affichées dans notre conteneur. Par exemple, si nous copions nos quatre divs, collez-les quelques fois. Enregistrer et recharger. Allons à notre CSS et définissez flex wrap pour envelopper. Et maintenant, vous pouvez voir que nous avons plusieurs lignes d'éléments à l'intérieur de notre conteneur. Nous pouvons également contrôler l'affichage de ces lignes à l'aide de la propriété align content. Par exemple, si je mets le contenu d'une ligne au centre, vous pouvez voir que les lignes sont maintenant centrées dans le conteneur. Nous pouvons également utiliser flex start. Et vous pouvez voir qu'il va pousser les lignes vers le haut du conteneur. En outre, nous pouvons utiliser Flex N, qui va bien sûr pousser toutes les lignes jusqu'à la fin du conteneur. Nous pouvons également utiliser l'espace entre et l'espace autour. Essayons ça. Disons l'espace entre les deux. Et comme vous vous y attendez, il sépare les lignes et met des espaces égaux entre elles. Enfin, l'espace autour duquel vous pouvez voir sépare les lignes et place des espaces égaux entre elles avec la moitié de cet espace avant la première ligne et après la dernière ligne. Donc, c'est tout pour la propriété align content. Vous ne pouvez l'utiliser que si vous avez plusieurs lignes dans votre contenu à l'intérieur du conteneur. Cela vous aidera à répartir l'espace restant entre ces lignes. 11. 11 apprenant la propriété de commande: Flexbox nous donne le pouvoir de réorganiser les éléments flexibles comme nous le voulons sans changer le code source. Et c'est ce que nous allons faire dans cette leçon. Alors commençons. Très bien, Donc, ici dans notre HTML, nous avons notre conteneur flex avec nos éléments flex à l'intérieur de celui-ci. Et parce que dans l'ordre source, on apparaît d'abord, puis après ça. Puis 34. Si nous les regardons dans le navigateur, nous verrons qu'on vient en premier, alors aussi, puis 34. Maintenant, nous pouvons contrôler l'ordre de ces éléments en utilisant la propriété order. Et la valeur par défaut de la propriété order est 0. Donc, par exemple, si je vais à mon CSS et ajoute l'ordre 0 à mon deuxième élément, vous verrez que rien ne changera car ils ont tous un ordre de 0 par défaut. Donc, l'ordre sera défini par la source. Maintenant, si je vais ici et que je change ce 0 à un, vous verrez maintenant que le deuxième élément sera le tout dernier ici. Nous pouvons également utiliser des valeurs négatives pour nous assurer que notre élément apparaîtra toujours comme le premier. Par exemple, si j'ajoute moins un au lieu de celui-ci, vous pouvez voir que le deuxième élément apparaît ici. À la première position. Nous pouvons aller au-delà et réorganiser tous nos éléments. Par exemple, si je vais à mon premier élément et ajoute l'ordre pour, puis allez à mon second et ajoutez l'ordre trois, puis ajoutez ordonné à, à mon troisième. Et puis après ça, un ordre pour notre dernier élément. Maintenant, vous pouvez voir qu'ils sont tous réorganisés. Maintenant, nous avons 4321, et c'est tout pour cette propriété. C' est facile et rendra votre travail plus flexible. Nous verrons comment l'utiliser en action pendant que nous construisons notre projet. 12. 12 flex croissent: Bonjour tout le monde. Bienvenue dans ce nouveau chapitre. Dans ce chapitre, nous allons apprendre à contrôler le dimensionnement de nos éléments de flux. Vous voyez lorsque nous définissons la propriété d'affichage du conteneur sur flex, nous remarquons que chaque élément flex avec dépendra de son contenu. qui signifie que si l'un des éléments a plus de contenu que les autres, alors la largeur de cet élément sera plus grande que les autres éléments avec, car ils ont moins de contenu. Et l'espace restant du conteneur sera vide. Dans le dernier chapitre, nous avons appris à répartir cet espace restant autour des éléments. En d'autres termes, comment séparer les éléments avec l'espace. Mais dans celui-ci, nous allons apprendre à ajouter l'espace à la largeur de l'élément et faire augmenter les éléments avec augmentation et expansion pour prendre cet espace. Alors commençons. Donc, dans cette leçon, nous allons jeter un oeil à la propriété flex grow. Flex grow est exprimé en utilisant un nombre comme un ou deux et ainsi de suite. Et il est utilisé pour déterminer combien l'élément flexible va croître par rapport au reste des éléments flexibles à l'intérieur du conteneur. En d'autres termes, combien d'espace les éléments prendront de l'espace restant par rapport aux autres éléments. Tous les éléments prendront-ils de l'espace égal, ou l'un d'eux prendra-t-il plus que les autres ? Maintenant assez de parler. Voyons cela en action. Ici. Dans notre éditeur de code. Les quatre divs sont assis l'un à côté de l'autre, et la largeur de chacun d'entre eux dépend du contenu. Vous pouvez voir que le deuxième div est plus grand que les autres. Maintenant, j'ai de l'espace restant ici, et je veux que mes éléments remplissent le conteneur et prennent cet espace restant. Maintenant. Ok, alors définissons la croissance flexible de ces éléments flexibles à un. Donc, avant de recharger mon navigateur, ce qui se passera ici, c'est que cet espace libre sera distribué également entre les quatre divs. Par exemple, si cet espace restant ici est de 100 pixels , chaque élément prendra 25 pixels et les ajoutera à sa largeur. Ce qui est vraiment génial de pouvoir faire avec une seule ligne de code. Nous allons donc recharger et vous pouvez voir que la largeur de chaque élément a augmenté de la même valeur. Par exemple, si la largeur du premier élément était de 50 pixels en fonction de son contenu, sa largeur est maintenant de 75 pixels. Et la largeur du deuxième élément était de 100 pixels, puis sa largeur est maintenant de 125 pixels. Mais ce n'est pas tout. Et si je veux que le troisième élément prenne deux fois plus de l'espace restant. Comme le diraient les autres éléments, définissons flex grow pour le troisième élément à deux. Vous pouvez voir que sa largeur augmente maintenant et l'espace restant est maintenant distribué de manière à ce que ce troisième élément prenne deux fois plus que les trois autres dibs. Maintenant, la valeur par défaut pour flex grow est 0. Et cela signifie simplement que la largeur des éléments dépendra du contenu. Donc, si je vais de l'avant et supprime cette ligne ici, allez à mon sélecteur d'élément flexible et flex grow 0. Vous pouvez voir que les éléments avec dépend du contenu, qui est le paramètre par défaut. Une autre chose intéressante que nous pouvons faire avec la propriété flex grow est que vous pouvez faire un seul élément élargir et prendre l'espace libre tandis que les autres éléments ne changeront pas. Nous pouvons le faire facilement en définissant la croissance flexible de notre élément à importe quelle valeur et en ne le définissant pas pour les autres éléments ou en le définissant simplement à 0, comme nous le faisons ici. Donc, par exemple, si je veux faire que le troisième élément se développer et prendre cet espace libre, je peux aller ici et dire C'est flex grandir à un par exemple, ou 2, ou toute autre valeur. Je vais le mettre à un. Et maintenant, vous pouvez voir qu'il se développe et prend tout l'espace. Maintenant, nous pouvons également utiliser flex grow pour contrôler le dimensionnement des éléments verticalement. Je pense que tu sais déjà comment on peut faire ça. Iep, nous avons juste besoin de changer le flux flexible de ligne en colonne. Donc, si je vais juste ici à l'intérieur du sélecteur de notre conteneur et que je mets flex flow à colonne. Vous pouvez voir qu'il fonctionne verticalement maintenant et affecte la hauteur. Donc, pour envelopper les choses, la propriété flex grow est utilisée pour contrôler la taille des éléments flexibles les uns par rapport aux autres. Flex Flow est la ligne. Il contrôlera la largeur et si c'est la colonne, alors il contrôlera la hauteur. La valeur par défaut est 0, ce qui signifie essentiellement que la taille de chaque élément dépendra de son contenu. Mais si nous le changeons en un pour tous les éléments de flux, lorsque l'espace libre sera ajouté également à chaque taille d'élément. D' un autre côté, si nous définissons le flex grow d'un seul de nos éléments à n'importe quelle valeur, mais que nous laissons tous les autres éléments à une valeur de 0, alors cet élément prendra tout l'espace libre pour lui-même. Et si nous voulons que les éléments changent et grandissent les uns par rapport aux autres, nous pouvons toujours définir le flex grow pour tous à la valeur que nous voulons. Par exemple, si je veux qu'un élément prenne deux fois plus d'espace que tous les autres éléments. Le flex des années 1970 pousse la propriété à deux et dit que c'est un pour tous les autres éléments. Et si je veux qu'il prenne quatre fois plus que les autres, je peux vendre son flex grandir à quatre et les autres à un et ainsi de suite. Donc, je vous mets au défi de jouer avec les valeurs de croissance flexibles et de voir ce que vous obtenez. Et si vous avez des questions, laissez-le dans le Q et une section, et je serai heureux de vous aider. Donc c'est tout pour cette section, tout le monde. Et je te verrai dans la prochaine. 13. 13 shrink de flex shrink: Bonjour tout le monde. Dans cette leçon, nous allons en apprendre davantage sur la propriété flex Shrink. Ne vous inquiétez pas, c'est assez simple. Alors commençons. D' accord. Donc, dans la dernière vidéo, nous avons parlé de la propriété flex grow et dit que cela nous aide à contrôler comment l'espace libre du conteneur est réparti entre la largeur de nos éléments. Dans celui-ci, nous allons jeter un oeil à la propriété flex Shrink, qui détermine fondamentalement combien les éléments vont rétrécir les uns par rapport aux autres à l'intérieur du conteneur. Quand il n'y a pas assez d'espace, on rétrécit tous au même rythme. Ou l'un d'eux rétrécira-t-il plus que les autres et perdra-t-il plus d'espace ? Ici, dans mon éditeur de code, je dois maintenant fléchir les éléments. Vous pouvez voir la largeur de chacun est de 300 pixels. Et j'ai défini la propriété display du conteneur sur flex. Vous pouvez également voir que nous avons de l'espace libre ici. Dans la dernière vidéo, nous avons distribué cet espace libre entre les éléments utilisant la propriété flex grow. Mais maintenant, si je vais de l'avant et rétrécir mon navigateur jusqu'à ce qu'il n'y ait plus d'espace libre et inspecte l'un des deux éléments. Alors voyons. C'est bizarre. Vous pouvez voir les premiers éléments avec environ 300 pixels et les deuxième éléments avec est également d'environ 300 pixels. Alors maintenant, si je continue à rétrécir mon navigateur, vous pouvez voir que les éléments sont maintenant rétrécir aussi. Leur largeur est maintenant inférieure à 300 pixels, parce que la largeur du navigateur lui-même est inférieure à 600 pixels et qu'il ne peut pas gérer les éléments, donc ils se rétrécissent. Mais ce qui est intéressant, c'est que les deux éléments se rétrécissent de la même valeur. Ce qui signifie que si je vérifie la largeur maintenant, ils auront la même largeur. Et cela se produit par défaut. Mais si on veut changer ça ? Que faire si nous voulons faire rétrécir les deuxièmes éléments ? Disons dix fois plus que le premier. Eh bien, nous pouvons le faire en utilisant la propriété flex Shrink. Si je vais au deuxième élément juste ici et ajouter flex Shrink 10, vous voyez déjà que le deuxième élément rétrécit beaucoup plus que le premier. Le sens est de perdre beaucoup plus d'espace par rapport au premier. Supprimons cela et allons au sélecteur d'élément flexible général et ledit flex rétrécissent à un. Vous pouvez voir que maintenant ils agissent comme ils l'ont fait avant, diminuant de la même quantité, ce qui nous indique que l'un est la valeur par défaut pour flex Shrink. Essayons de 0 et voyons ce que nous obtiendrons. Vous pouvez voir que les éléments dans notre débordement hors du conteneur, qui nous vend que 0 force les éléments à ne pas rétrécir en dessous de sa largeur. Mais essayons autre chose. Allons dans notre récipient et réglez le flex wrap pour envelopper. Mais quelque chose d'intéressant se passe ici. Les éléments sont maintenant enveloppés à la ligne suivante et ils ne sortent plus du conteneur. Et honnêtement, j'utilise toujours cette méthode dans mon travail parce que la plupart du temps, je ne veux pas que mes éléments se rétrécissent en dessous d'une largeur spécifique, mais je veux qu'ils passent à la ligne suivante quand ils n'ont pas assez d'espace. C' est très pratique, surtout quand il s'agit de design réactif. Donc, pour envelopper les choses, la propriété flex Shrink est utilisée pour contrôler la façon dont les éléments de flux vont se rétrécir les uns par rapport aux autres à l'intérieur du conteneur lorsqu'ils n'ont pas assez d'espace. Il est appliqué à l'élément flex lui-même, tout comme la propriété flex grow et sa valeur par défaut est un, ce qui signifie que tous les éléments vont se rétrécir de la même valeur. Mais nous pouvons changer ce comportement par défaut. Nous pouvons, par exemple, faire rétrécir un élément spécifique deux fois plus que les autres en définissant simplement Sa propriété rétrécit sur deux. Nous pouvons également forcer les éléments à ne pas se rétrécir en dessous d' une largeur spécifique en réglant simplement leur flex Shrink à 0. Très bien, tout le monde, c'est tout pour cette leçon. J' espère que vous comprenez maintenant ce que le flex Shrink fait, et je vous verrai dans la prochaine. 14. 14 bases de flexions: Bonjour tout le monde. Dans cette leçon, nous allons parler de la propriété flex basis. Alors commençons. Ok, donc la base flexible est très similaire à la propriété width. Il définit fondamentalement la taille principale initiale de l'élément avant que tout espace restant soit distribué. Par exemple, si vous définissez la base flexible d'un élément flexible sur, disons 100 pixels. Vous dites juste au navigateur, hey, tant qu'il reste assez d'espace dans le conteneur flex, je veux que ces éléments flexibles commencent à 100 pixels et soient néanmoins que ça. Et il est exprimé en pourcentages de pixels dans toutes les valeurs que vous utiliseriez pour la propriété width normale. Revenons à notre éditeur de code. Si je mets la base de flex pour ce deuxième élément à 300 pixels, vous verrez que sa largeur a augmenté. Et si je l'inspecte, vous verrez que sa largeur est maintenant de 300 pixels. Mais si je rétrécit ma fenêtre, vous pouvez voir tant qu'il y a assez d'espace, la largeur sera la même. Mais quand j'atteins ce point où il n'y a pas assez d'espace et que je continue à rétrécir, vous verrez que la div commence à rétrécir. Donc flex base indique au navigateur de démarrer la largeur de cet élément à une largeur spécifique s'il y a un espace disponible. Mais s'il n'y en a pas, il suffit de le rétrécir, à moins bien sûr que vous avez dit flex rétrécir à 0. Ok, supprimons ces deux lignes de code. Nous. 15. Aperçu de 15 sections et fichiers de début de fichiers: Bonjour à tous, bienvenue dans cette nouvelle section du cours. Dans cette section, nous allons commencer à utiliser Flexbox sur des exemples réels. Nous allons construire ces deux menus réactifs en utilisant certaines des propriétés flexbox que nous avons apprises dans les vidéos précédentes. Regardons les fichiers de démarrage pour cette section. Vous pouvez voir ici nous avons les os nus pour n'importe quel document HTML. On a un titre ici. Ensuite, j'ai inclus notre fichier de feuille de style ici. Nous allons donc ajouter nos styles dans ce fichier. J' ai aussi un lien CDN pour la bibliothèque Font Awesome juste ici, parce que nous allons utiliser quelques icônes dans notre deuxième menu. J' ai également inclus les polices Google ici. J' ai fait tout cela parce que je suppose que vous êtes familier avec tout cela et je ne voulais pas perdre votre temps à vous faire écrire tout ce code. Puis juste ici à l'intérieur de la balise body, j'ai ajouté un en-tête et à l'intérieur un div avec la classe de centré. Cette classe centre juste tous les éléments à l'intérieur de celui-ci. Ensuite, j'ai ajouté cette rubrique ici. Et puis en dessous, nous avons cette balise principale qui contiendra les menus. Et si je vais à mon CSS, vous pouvez voir certains fichiers CSS inclus. Ces fichiers sont juste responsables des styles généraux pour rendre tout meilleur look. Si je regarde ce fichier HTML dans mon navigateur, vous pouvez voir que nous avons seulement le titre H1 ici. Bon, donc vous pouvez télécharger les fichiers de démarrage après avoir regardé cette conférence et nous pouvons commencer à construire notre premier menu ensemble dans la prochaine leçon. 16. 16 Créer un menu simple avec flexbox: Bonjour tout le monde. Dans cette leçon, nous allons construire notre premier menu en utilisant Flexbox. Alors commençons. accord, tout d'abord, nous allons construire le balisage HTML du menu. Donc, je vais aller juste ici et ajouter une section avec une classe de section de menu. Et à l'intérieur de cela, je vais ajouter un H2 avec une classe de menu Heading. Et nous allons juste dire menu simple. Bonjour, Ce H2, nous allons ajouter une balise nav pour ajouter une classe de nav unique afin que nous puissions utiliser flexbox sur ce menu en ciblant cette classe et lui donner une classe de menu. Pour que nous puissions ajouter nos styles généraux pour tous les menus en ciblant cette classe. Bon, donc à l'intérieur de ce nav, nous allons ajouter U, L, puis LI à l'intérieur, et une étiquette d'ancrage. Et nous allons copier cela et le coller sept fois. Et dire services à domicile, témoignages, portfolio, blog et contact. Vous pouvez voir ici nous avons notre menu. Revenons à notre CSS et commençons à le coiffer. Je vais cibler la classe de section de menu. Ensuite, j'ajouterai le bas de rembourrage à EM, puis la marge inférieure à EM ainsi. Et en dessous, nous allons cibler l'UL. Donc, nous allons dire le menu UL et ajouter list-style none, afin que nous puissions nous débarrasser des puces, puis le remplissage 0, puis la marge 0. Et puis nous allons définir la couleur de fond de cette URL à cette belle couleur grise. Très bien, maintenant, allons cibler les balises d'ancrage de notre menu. Je mettrai la décoration de texte à aucun. Et puis je mettrai sa couleur à cette belle couleur gris foncé. Et en dessous, j'ajouterai un rembourrage de 0,6 m en haut et en bas, un E M à gauche et à droite. Et puis je vais définir sa propriété d'affichage pour bloquer et définir la transition à toutes les 0,5 secondes et faciliter. Et maintenant, vous pouvez voir un menu est beaucoup mieux. Mais ajoutons une belle couleur de fond blanc. Lorsque nous mouseover les liens vers notre CSS, je ciblerai à nouveau les balises d'ancrage. Et quand nous passons la souris dessus, nous voulons définir la couleur de fond à cette belle couleur blanche. Ajoutons également quelques styles au H2. Donc, je vais cibler la classe de menu Heading et ajouter la taille de la police à E, m, et le poids de la police normal. Maintenant, notre menu est superbe sur les appareils mobiles. Les liens sont bien assis l'un en dessous de l'autre. Donc, nous allons le laisser comme ça sur des écrans plus petits. Mais sur des écrans plus larges, nous voulons utiliser flexbox pour faire en sorte que notre menu ressemble à notre démo. Nous allons donc utiliser les requêtes de médias pour cibler des écrans plus larges. Et puis nous allons utiliser flexbox pour changer notre menu. Alors faisons ça en fait. Allons à notre CSS et nous commencerons par définir une requête multimédia lorsque l'écran est plus large que 600 pixels. Et à l'intérieur de cette requête multimédia, nous allons cibler un seul NAV UL et changer la propriété d'affichage pour flex. Et comme ça, nous avons nos éléments de liste affichés horizontalement et nous avons un menu qui est bien disposé. Maintenant que nous avons cette mise en page, nous pouvons commencer à la changer en utilisant Flexbox aussi. Par exemple, tous les éléments de la liste sont désormais alignés sur la gauche. Et si nous voulons les aligner vers la droite à la place ? Vous vous souvenez que la valeur par défaut du flux flexible est la ligne, ce qui signifie que l'axe principal est horizontal par défaut. Et vous vous souvenez également que lorsque nous voulons contrôler l'alignement des éléments le long de l'axe principal, nous utilisions la propriété de contenu justification. Donc, afin de contrôler nos articles de liste horizontalement et de les aligner à la fin du conteneur. Par exemple, nous utiliserons la propriété de contenu justification. Revenons donc à notre CSS. Et en dessous de ce flex d'affichage, nous allons définir justifier le contenu à fin flex. Et maintenant, nous avons tous nos éléments de menu alignés à droite. Maintenant, jouons avec les valeurs de contenu de justification. Allons à notre CSS et essayons le centre. À la place. Vous pouvez voir qu'il centralise maintenant les éléments de la liste. Mais maintenant, il y a une chose importante. Nous devons nous assurer que notre menu est entièrement réactif. Et cela signifie que si l'écran devient assez petit, nous devons nous assurer que nos éléments de menu s'abaissent correctement. Donc, par exemple, si je fais un clic droit sur un élément et aller inspecter l'élément et changer la largeur de l'écran. Vous pouvez voir que nos articles sont écrasés parce que leur conteneur n'a pas assez d'espace pour eux. Donc je pense que vous vous souvenez de ce qu'on devrait faire dans ce cas ? Oui. Nous devrions régler le flex wrap de notre conteneur pour l'envelopper. Alors allons à notre CSS et je vais ajouter flex wrap, wrap. Et maintenant, vous pouvez voir nos éléments de menu s'emballer à la ligne suivante lorsque le conteneur n'a pas assez d'espace pour eux. Maintenant, continuons à jouer avec la propriété de contenu justification. Revenons à notre CSS et je vais changer le contenu de justification à l'espace autour. Et maintenant, vous pouvez voir que nous avons des espaces égaux entre nos éléments de menu. Utilisons aussi l'espace entre. Et aussi il sépare les éléments avec des espaces égaux entre eux. Vous pouvez voir qu'il y a un espace vide juste ici entre les éléments sur lesquels je ne peux pas cliquer. Mais si je ne veux pas ça ? Qu'est-ce qui a ? Je ne veux pas d'espace entre les éléments. Ce qui signifie que je veux que les éléments s'agrandissent et prennent cet espace libre. Eh bien, nous pouvons le faire en utilisant la propriété flex grow. Revenons donc à notre CSS. Nous allons cibler notre liste d'éléments et définir flex grow à un, ce qui signifie que tous les éléments prendront un espace égal à partir de l'espace restant. Puis flex base auto, ce qui signifie que la largeur de l'élément dépendra de leur contenu. Et flex rétrécit à 0. Ce qui signifie que les éléments ne rétréciront pas lorsqu'ils n'ont pas d'espace disponible, mais ils descendront à la ligne suivante à la place. Et maintenant, si je passe n'importe où entre les éléments, vous pouvez voir qu'il n'y a plus d'espace libre car la propriété flex grow force tous les éléments de menu à prendre cet espace libre également parce que nous l'avons défini sur un. Mais maintenant, il y a un petit problème ici. Vous pouvez voir que le texte lui-même à l'intérieur des éléments est aligné vers la gauche. Cela peut être facilement réparé en revenant simplement à notre CSS et en définissant le texte aligné au centre. Donc, maintenant, nous avons un menu simple et agréable qui a l'air bien avec éléments également espacés et il n'y a pas de lacunes entre eux. Donc c'est tout pour cette leçon, tout le monde, et je vous verrai dans la prochaine. 17. 17 Créer un menu avancé avec flexbox: Bonjour tout le monde. Dans cette leçon, nous allons construire notre menu avancé en utilisant Flexbox. Alors commençons. Bon, donc nous allons commencer par construire le balisage HTML. Alors algo juste ici en dessous de la section de menu simple et ajouter une nouvelle section avec une classe de section de menu. Et puis ci-dessous, nous allons ajouter un H2 avec une classe de menu Titre, et nous dirons Menu Avancé. Et puis en dessous, nous allons ajouter une balise de navigation avec une classe de navigation Vance et aussi une classe de menu. Et puis nous allons ajouter UL, LI, puis la balise d'ancrage. Et puis à l'intérieur de cette balise d'ancrage, nous allons ajouter un div avec une classe d'icône. Et à l'intérieur, nous allons ajouter une étiquette I et lui donner une classe de FAS et aussi une classe de football FIFA. Donc, ce sera la div qui contient notre icône Font Awesome. Et en dessous de ce div, nous allons ajouter un autre div et lui donner une classe de texte. Et à l'intérieur, je vais écrire du football. Et puis je vais ajouter une travée et juste dire est un grand sport. Ensuite, je vais copier ceci et le coller deux fois. Nous allons changer la classe d'icônes en F, un film. Et nous dirons que les films vous rendent la vie meilleure. Et ici, je dirai que la caméra capture de grands moments. Alors maintenant, allons à notre navigateur. Vous pouvez voir que nous avons notre menu et il est déjà beau à cause des cours que nous avons appliqués à elle. Vous pouvez voir ici cette section de menu et les classes de menu que nous avons stylisées dans notre vidéo précédente. Maintenant, jetons un oeil à notre balisage HTML. Vous pouvez voir que nous avons un nav, UL, LI et ensuite une étiquette d'ancrage, tout comme notre menu simple. Donc, nous allons contrôler les éléments de la liste eux-mêmes comme nous l'avons fait dans le menu simple. signifie que nous allons faire de notre UL un conteneur flexible, ce qui signifie que les éléments de la liste seront des éléments flexibles. Ensuite, nous pouvons les changer en utilisant les propriétés Flexbox. Maintenant, si vous regardez à l'intérieur de l'étiquette d'ancrage, vous pouvez voir que nous avons deux divs. Le premier contient l'icône et le second contient le texte. Maintenant, vous vous demandez peut-être pourquoi je les mets dans deux divs séparés. Pourquoi je ne les ai pas mis dans un div ? Eh bien, je l'ai fait parce que je vais faire de cette ancre un conteneur flexible. Et en faisant cela, ces deux divs seront des éléments flexibles et je peux les contrôler comme je veux. Va voir cela dans une seconde. Mais maintenant, allons à notre CSS et faisons une autre requête média lorsque la largeur est supérieure à 600 pixels. Et à l'intérieur de cela, nous allons cibler cette navigation avancée UL. Définissez l'affichage sur flex, puis définissez le flex wrap à envelopper. Ainsi, les éléments de liste s'enroulent à la ligne suivante lorsqu'ils n'ont pas d'espace disponible. Voyons à quoi ça ressemble. Vous pouvez voir les éléments de la liste sont maintenant assis les uns à côté des autres et flottant vers la gauche. Mais vous pouvez également voir que nous avons un espace libre sur la droite sur lequel nous ne pouvons pas cliquer. Et je pense que tu sais comment on peut arranger ça. C' est vrai. Nous devrions définir la croissance flexible des éléments de la liste à un afin qu'ils se développent et prennent l'espace restant de manière égale. Allons donc à notre CSS et ciblons nos éléments de liste. Ensuite, définissez flex grow à un. Définissons également la base flexible à 220 pixels. Maintenant, c'est une valeur que j'ai trouvée adaptée à notre contenu. Donc, je veux que les éléments de menu commencent à cette largeur. Réglons également flex rétrécir sur 0 afin que nos articles ne se rétrécissent pas en dessous de 220 pixels. Et maintenant, vous pouvez voir que les articles sont superbes et qu'ils sont réactifs. Donc, si j'inspecte n'importe quel élément, et quand je rétrécit plus mon navigateur, vous pouvez voir qu'il rampe bien à la ligne suivante et ne rétrécit pas dessous de 220 pixels parce que nous définissons flex rétrécir à 0. Et quand je rétrécit le navigateur plus en dessous de 600 pixels, les éléments seront empilés les uns en dessous de l'autre d'une manière agréable. Et cela aura fière allure sur les appareils mobiles. Mais maintenant, continuons à travailler. Si nous regardons notre démo, vous pouvez voir que nous avons notre icône flottante à gauche et le texte à droite, comme ceci. Nous pouvons donc le faire facilement avec Flexbox. Tu te souviens qu'on a deux divs à l'intérieur de la plaque d'ancrage. L' un contient l'icône et l'autre contient le texte. Donc, afin de les contrôler, nous devrions définir la propriété d'affichage de l'ancre pour fléchir. Allons à notre CSS et ciblons la balise d'ancrage et disons display flex. Vous pouvez voir l'icône et le texte s'alignent horizontalement. Mais nous voulons un peu d'espacement entre eux. Nous pouvons le faire en utilisant des marges régulières ou un rembourrage, mais nous le ferons avec Flexbox. Donc, nous allons aller à notre CSS et cibler le div qui contient l'icône. Et puis ajoutez la base flexible 60 pixels, par exemple. Et ajoutons également une taille de police de 35 pixels. Et vous pouvez voir que c'est déjà superbe. Si nous regardons notre démo, vous pouvez voir que ce mot est plus grand et que ce texte est placé en dessous. Alors faisons ça. Allons à notre HTML. Vous pouvez voir que nous avons ce texte div, et à l'intérieur d'une plage contenant ce texte. Alors allons à nouveau à notre CSS et ciblons le texte div. Définissez ensuite sa taille de police à 25 pixels. Et c'est le poids de la police en gras. Maintenant, nous allons cibler la portée à l'intérieur de celui-ci. Définissez sa propriété d'affichage pour bloquer de sorte qu'il descend ci-dessous sont gros mot. Définissez ensuite sa taille de police à 15 pixels. Ajoutez ensuite le poids de la police plus léger. Lorsque le style de police est italique. Et là, vous l'avez. Et menu avancé qui a l'air bien sur les écrans larges. Et quand vous allez à des écrans plus étroits, il enveloppe bien. Et quand vous allez sur les appareils mobiles, il a l'air agréable et serré. 18. 18 aperçu de notre projet final: Bonjour tout le monde. Bienvenue dans cette nouvelle section du cours où nous allons construire notre projet et essayer d'utiliser toutes les propriétés flexbox que nous avons apprises dans les sections précédentes. Donc, ici, nous avons notre projet final, et voici l'en-tête. Nous allons apprendre à centrer facilement ce contenu verticalement. Et aussi comment pousser le menu à la fin de l'en-tête verticalement, comme ceci, fera tout cela avec Flexbox. Ensuite, nous avons notre section Messages. Vous pouvez voir que nous avons deux postes, puis trois postes. Et puis le dernier post qui prend toute la largeur de la zone de contenu. Et vous pouvez voir que les colonnes de chaque ligne sont égales en hauteur même si le contenu est différent. En utilisant flexbox, nous allons réaliser cette mise en page. Ci-dessous, nous avons la section montre aujourd'hui avec l'image d'un côté et le contenu de l'autre. Nous allons apprendre comment changer l'ordre des éléments sur notre page sans changer le code source. Et nous allons le faire ici dans cette deuxième carte. Si vous jetez un oeil, vous pouvez voir que le contenu est sur la gauche et l'image est sur la droite. Mais dans le code source ou dans la page HTML, l'image vient d'abord, puis le contenu. Nous allons donc apprendre à modifier leur ordre en utilisant Flexbox is order property. Ensuite, nous avons la section de téléchargement maintenant. Vous pouvez voir qu'il a cette disposition vraiment complexe avec l'image prenant toute la largeur. Ensuite, la section de contenu en dessous, avec ces trois divs côte à côte. Vous pouvez également voir que le deuxième div ici a plus de largeur que les autres. Mais avec Flexbox va construire cette mise en page facilement. Après cela, nous avons notre galerie d'images avec cette mise en page créative appelée la maçonnerie horizontale. Vous pouvez voir que les images ont des valeurs aléatoires pour la largeur, mais elles ont la même hauteur. Et si nous cliquons sur n'importe quelle image, elle apparaît bien dans un modèle de boîte. Et nous pouvons naviguer à travers les images en appuyant simplement sur les flèches du clavier. Et puis nous avons notre pied de page simple ici. Par ici, à droite. Nous avons notre barre latérale avec quelques jolis widgets. Il a la même hauteur que la zone de contenu. Par exemple, si je fais défiler un peu vers le bas, vous pouvez voir que même s'il n'y a plus de contenu dans la barre latérale, Il conserve toujours sa hauteur et tous les autres contenus sont toujours décalés vers la gauche. C' est ce que nous appelons la disposition du Saint Graal. Nous allons donc apprendre à le faire avec Flexbox en utilisant seulement trois ou quatre lignes de code CSS. Maintenant, jetons un coup d'oeil aux fichiers de départ de notre projet. J' ai le dossier du projet situé ici sur mon bureau. Donc, si je l'ouvre, vous pouvez voir que nous avons notre fichier HTML nommé index, et nous avons notre fichier style.css ici dans ce dossier. Et aussi nous avons toutes nos images situées ici dans ce dossier d'images. Et nous avons un dossier JS. Et à l'intérieur de cela, nous avons la bibliothèque jQuery et un fichier appelé main.js. Donc, si nous ouvrons ces fichiers dans notre éditeur de code, voici notre fichier index.html. Vous pouvez voir tout comme la section de menu, il a du HTML de base. Il a le titre ici, puis les polices Google, puis la bibliothèque Font Awesome. Et enfin, notre feuille de style. Ci-dessous, nous avons inclus la bibliothèque jQuery et le fichier main.js avant la fermeture de la balise body. Et bien sûr, notre feuille de style ici est vide. Donc, nous allons tout commencer à partir de zéro. Assurez-vous donc de télécharger les fichiers de démarrage, lancez votre éditeur de code. Et je te verrai à la prochaine conférence où nous construirons disposition du Saint Graal de notre projet en utilisant, vous l'avez deviné, Flexbox. 19. 19 construire la mise en page du holygrail mise en page: Bonjour tout le monde. Dans cette leçon, nous allons construire la disposition du Saint Graal de notre projet. Alors commençons. Donc, tout d'abord, nous allons aller juste ici après la balise body et ajouter un div et lui donner une classe d'emballage externe. Maintenant, ce sera le conteneur externe qui contiendra toutes les sections à l'intérieur de notre page. Et à l'intérieur de cela, nous allons ajouter un en-tête et lui donner une classe d'en-tête de site. Et à l'intérieur, nous allons ajouter une balise H1 et lui donner une classe de titre de site. Et nous allons juste dire en-tête. Et au-dessous de cet en-tête, nous allons ajouter un div avec une classe de zone de contenu. Donc, ce sera le conteneur qui contient notre zone de contenu principale, ainsi que notre barre latérale. Et à l'intérieur de celui-ci, nous allons ajouter une balise principale et lui donner une classe de zone de contenu principale. Cette balise principale contiendra nos articles et ainsi de suite. Et puis une balise H1 et dire par exemple, le contenu principal va ici. Et après cela, nous allons ajouter du contenu temporaire juste ici à l'intérieur de quelques balises p. Et puis en dessous de cette balise principale, nous allons ajouter un div et lui donner une classe de barre latérale, non ? Et à l'intérieur, nous allons ajouter H1 et dire que la barre latérale va ici. Et ci-dessous, nous allons ajouter du contenu fictif à des fins de visualisation à l'intérieur d'une balise p. D' accord, ajoutons notre pied de page. Donc, je vais aller de l'avant et ajouter une balise de pied de page et lui donner une classe de pied de page de site. Et à l'intérieur de celui-ci, nous allons ajouter H1 et dire juste pied de page. Bon, voyons ça dans notre navigateur. Voici donc l'en-tête en haut, puis le contenu principal ici, la barre latérale en dessous, et le pied de page en bas. Mais maintenant ajoutons un peu de style pour que nous puissions les voir mieux. Retour à notre CSS. Je paierai quelques styles et je vous les expliquerai. Il y a donc quelques styles de base. J' ai imbriqué le corps, les boutons, les entrées et les zones de texte, puis j'ai juste ajouté quelques styles de base. Vous pouvez voir que la couleur est noire. La famille de polices est notre police. La taille de la police est de 16 pixels et la hauteur de la ligne est de 1,8. Et en dessous, j'ai ajouté quelques styles au corps. Vous pouvez voir que j'ai ajouté cette belle couleur grise, a une couleur de fond. Définissez la marge sur 0, puis définissez la famille de polices sur notre police. Maintenant, faites ça, nous allons cibler l'en-tête et le pied de page. Ajoutez une couleur d'arrière-plan verte et une hauteur de 100 pixels pour l'instant. Ensuite, nous allons cibler la barre latérale et ajouter la couleur de fond bleu et la couleur blanche. Et puis en dessous, nous allons cibler la balise H1 et définir la couleur sur rouge. Et nous allons définir la marge à 0. Ensuite, je vais aussi cibler la balise p et lui donner une marge de 0. Jetons un coup d'oeil. Vous pouvez voir que c'est plus beau maintenant. Bon, donc sur les grands écrans, on veut qu' une barre latérale soit une colonne sur le côté droit, juste ici. Donc, ce que nous pouvons faire est que nous pouvons faire le conteneur qui contient la fois la zone de contenu principale et la barre latérale, un conteneur flex. Donc, revenons à notre HTML, vous pouvez voir que le div avec la classe de la zone de contenu est celui que nous voulons. Donc, allons à notre CSS, créer un nouveau rôle lorsque la largeur de l'écran est supérieure à 1, 0, 0, 0, 0, 120 pixels. Et je vais cibler la zone de contenu et définir sa propriété d'affichage sur flex. Et comme ça, nous avons la zone de contenu principale à gauche et notre barre latérale à droite. Et quand nous réduisons notre navigateur, vous voyez quand je passe en dessous de cent, cent vingt pixels, la barre latérale descend en dessous de la zone de contenu principale. Et si vous regardez ici, vous pouvez voir que la barre latérale et la zone de contenu principale ont la même hauteur même lorsque le contenu est différent. Et c'est exactement ce qu'est le Saint Graal. Bon, maintenant, continuons à travailler. Vous pouvez voir la barre latérale ici prend trop de place, donc je veux diminuer un peu sa largeur. Il se souvient qu'en définissant le conteneur flex, maintenant la barre latérale est un élément flex et nous pouvons utiliser les propriétés flexbox dessus. Alors allons à notre CSS et ciblons notre barre latérale. Et dit que c'est la propriété flex à 0, ce qui signifie qu'il ne va pas grandir. Puis 0, ce qui signifie qu'il ne se rétrécit pas en dessous d'une largeur spécifique, qui est de 320 pixels. Et maintenant, vous voyez que c'est mieux. Et c'est tout pour cette leçon, nous avons construit notre disposition du Saint Graal, et maintenant nous sommes prêts à construire chaque section de notre page individuellement, mais nous le ferons ensuite. 20. 20 construisez notre ende de notre tête à l'aide de flexbox: Bonjour tout le monde. Dans cette leçon, nous allons construire et styliser notre en-tête. Donc, comme toujours, commençons. Bon, alors revenez à notre HTML. Ici, à l'intérieur de la balise d'en-tête, je vais ajouter un div et lui donner une classe de site Info. Ensuite, je vais déplacer la balise H1 dedans. Et en dessous, nous allons ajouter une balise de paragraphe avec une classe de description du site. Et nous allons ajouter la description de notre site ici. Et en dessous du site info div, nous allons ajouter notre menu. Donc, nous allons ajouter une balise nav avec une classe de menu principal. Et nous allons juste dire que le menu irait ici pour l'instant. Ok, voyons ça dans le navigateur. D' accord, continuons de travailler à notre CSS. Donc, ici entre nos commentaires, nous allons commencer à coiffer l'en-tête. Donc, je vais cibler l'en-tête du site et définir sa hauteur à 400 pixels. Voyons ça. Maintenant, vous pouvez voir que nous avons la div avec la classe d'informations du site contenant l'en-tête du site et la description du site. Et en dessous, nous avons la div avec la classe du menu principal tenant notre menu. Bon, maintenant nous voulons que notre menu soit poussé au bout du conteneur juste ici. Nous pouvons le faire facilement en utilisant flexbox. Nous pouvons faire du conteneur un conteneur flexible, puis définir le flux flexible sur colonne afin que les éléments restent au-dessous de l'autre et leur hauteur dépendra du contenu. Ensuite, définissez la croissance flexible des informations du site sur un seul. Qu' il se dilate verticalement et prend tout l'espace, en les poussant en vous jusqu'à l'extrémité du conteneur. Alors allons à notre CSS et faisons-le. Je vais venir ici et ajouter un flex d'affichage, puis une colonne de flux flex. Ensuite, je vais cibler le site info div et définir flex grow à un. Vous vous souvenez que lorsque j'ajoute flex grandir un à un élément flex individuel seulement et pas les autres. Cela le fera prendre tout l'espace restant du conteneur. Ainsi, le site info div va croître verticalement, poussant le menu à la fin du conteneur. Et juste comme ça, vous pouvez voir le menu va jusqu'à la fin du conteneur. Maintenant, continuons à travailler. Nous allons concevoir notre projet dans une première approche mobile, ce qui signifie que nous allons le concevoir comme si nous le regardons sur un appareil mobile. Ensuite, nous allons créer des requêtes média et ajouter les changements que nous voulons sur des écrans plus larges. Donc, je vais cibler le titre du site ici et ajouter quelques styles. Je vais ajouter la marge 0, taille de la police à em. Poids de la police 300, centre du texte aligné. Couleur, blanc. Et le texte transforme en majuscules. Vous pouvez voir que ça a l'air plus agréable. Maintenant, revenons à notre CSS. Nous allons cibler la description du site et ajouter le centre d'alignement du texte, puis changer sa couleur pour cette belle couleur jaune. Et la taille de la police 1,2 M. Puis marge supérieure moins 0,8, sorte qu'il devient plus serré. Puis style de police italique. Et vous pouvez voir que ça a l'air mieux. Continuons. Je vais cibler notre menu. Ensuite, ajoutez un peu de rembourrage. Un EM par le haut et le bas, et un E M par la gauche et la droite aussi. Ensuite, j'ajouterai la couleur noire, puis la couleur de fond de notre jaune ont raison. Maintenant, nous voulons que le titre du site soit plus grand sur des écrans plus larges. Revenons à notre CSS. Je vais créer un nouveau rôle pour les écrans larges. Ensuite, je vais cibler le titre du site et définir la taille de la police à quatre. Vous pouvez voir qu'il est plus grand maintenant. Et quand j'irai sur des écrans plus petits, il sera plus petit. Maintenant, nous voulons centrer notre titre de site et une description de site verticalement. Nous pouvons le faire en utilisant beaucoup de choses différentes, mais nous allons utiliser Flexbox. Vous pouvez voir à la fois le titre et la description sont contenus avec le site info div. Ainsi, nous pouvons afficher les informations du site comme un conteneur flex et faire la colonne de flux flex, puis centrer le contenu en utilisant la propriété de contenu justification. Donc, si je vais à mon CSS et que je cible le site info div, définissez sa propriété d'affichage, les drapeaux, puis la colonne de flux flex, puis justifie le centre de contenu. Et maintenant, vous pouvez voir qu'il est parfaitement centré. Et rappelez-vous, justifier le contenu est une propriété de l'axe principal. Et l'axe principal ici est vertical parce que le flux flexible est colonne. Maintenant, allons à notre CSS et changez le fond vert en noir afin qu'il corresponde à notre conception. Maintenant, passons en revue ce que nous avons fait avec Flexbox ici. Tout d'abord, le menu et les divs Info du site sont contenus dans un div externe avec une classe d'en-tête de site. Nous avons affiché cet en-tête de site en tant que flex et en avons fait une colonne. Ainsi, les éléments s'empilent au-dessous de l'autre. Ensuite, nous définissons la croissance flexible de l'information du site sur une de sorte qu'elle se développe et prend l'espace restant du conteneur. Ensuite, nous devions centrer le contenu à l'intérieur verticalement. Donc, nous avons fait un conteneur flex et dit Il est flux flex à la colonne, puis centré son contenu en utilisant le centre de contenu justifier. Et c'est tout. Nous avons terminé notre en-tête à l'exception de notre menu. On finira ça plus tard. Mais pour l'instant, c'est tout pour cette leçon et nous allons continuer à explorer ce que flexbox peut faire pour nous dans les prochaines vidéos. 21. 21, construisant et styliser notre section de publications: Bonjour tout le monde. Dans cette leçon, nous allons commencer à travailler sur la section post. Alors commençons. Bon, donc nous allons commencer par supprimer ce contenu fictif. On en avait juste besoin pour tester les choses. Et puis je commencerai par ajouter une section et lui donner une classe de messages. Et à l'intérieur, je vais ajouter un article et lui donner deux classes, post et post moitié. Donc, la moitié du poste de classe signifie que cet article prendra la moitié de l'espace de notre zone principale. Bon, maintenant nous allons ajouter une balise d'ancrage. Et à l'intérieur de celui-ci, nous allons ajouter un div. Et nous mettrons notre image à l'intérieur de cette div. Donc, je vais ajouter notre première image ici. Et en dessous de l'image div, nous allons ajouter un autre div avec une classe de contenu post. Et à l'intérieur de cela, nous allons ajouter une balise H2. Donc, ce sera le titre du post. Ensuite, en dessous, nous allons ajouter une balise p et ajouter du texte Lorem à l'intérieur de celui-ci. Voyons ça. Vous pouvez voir que nous avons notre image, puis notre titre, puis le contenu. Ok, Continuons à ajouter nos messages à notre HTML. Je vais copier cet article, le coller à nouveau, et nous allons juste changer l'image et le texte alt juste ici, puis changer le titre aussi. Maintenant, ces deux messages occuperont la moitié de l'espace de la zone de contenu principale. Nous allons le faire en utilisant les messages ont la classe ici. Et ce post-classe sera responsable des styles généraux de tous les postes. Très bien, en dessous de cela, nous allons coller notre article à nouveau trois fois. Et nous allons changer la classe des postes, avoir à poster 1 tiers pour ces trois articles. Et nous allons aussi changer les images et les titres. Donc maintenant, vous pouvez voir que nous avons nos trois articles avec une classe de poste 1 tiers à chacun. Et cette classe sera responsable de faire de chacun de ces articles une largeur d'environ 30 pour cent de la zone de contenu principale. Ainsi, les trois articles vont s'asseoir l'un à côté de l'autre et s'aligner. Maintenant, ajoutons notre dernier article. Je vais coller l'article une dernière fois et a changé post pour poster plein. Je vais également changer l'image, le texte alt et le titre. D' accord, donc cet article sera pleine largeur. Il prendra toute la largeur de la zone de contenu principale. Allons dans notre navigateur et voir ces articles. Vous pouvez voir que nous avons tous nos articles maintenant. Alors commençons à coiffer. Nous sommes de retour à notre CSS. Et juste ici entre nos commentaires, nous allons cibler notre zone de contenu principale et ajouter du remplissage à EM. Et maintenant, vous pouvez voir que nous avons un peu d'espace. Ajoutons les styles généraux pour nos messages. Je vais cibler post-classe et définir la couleur d'arrière-plan sur blanc et ajouter la marge inférieure un, m. Donc nous pouvons avoir quelques espaces entre les articles. Ensuite, nous allons cibler l'étiquette d'ancrage à l'intérieur nos messages et ajouter la couleur noire pour enlever cette couleur bleue. Et la décoration de texte, aucun pour supprimer la ligne sous le texte. Le texte est beaucoup mieux maintenant, mais nous voulons quelques espaces ici. Pour ce faire, je vais cibler la classe de contenu de publication et ajouter le remplissage 0 en haut, 40 pixels à droite et à gauche, et 20 pixels en bas. Vous pouvez voir que ça va mieux maintenant. Très bien, alors nous allons styler l'en-tête du post. Je vais cibler l'en-tête de notre post et ajouter la couleur de fond, notre jaune. Ensuite, changez la couleur en noir. Puis rembourrage 20 pixels afin que nous obtenions un peu d'espacement et le centre d'alignement du texte. Vous pouvez voir que ça a l'air bien. Mais nous voulons que ce fond jaune prenne toute la largeur du contenu de la publication div ressemble à cela en raison du rembourrage de 40 pixels à droite et à gauche du contenu de la publication div. Donc, afin que le fond jaune prenne toute la largeur, nous pouvons ajouter une marge de moins 40 pixels au H2. Revenons à notre CSS. Je vais ajouter la marge 0 en haut moins 40 pixels à droite et à gauche, et 30 pixels en bas pour avoir un peu d'espace entre elle, la balise p. Et maintenant, vous pouvez voir qu'il prend toute la largeur. Maintenant, on a presque fini. La seule chose qui reste est de faire en sorte que l'image de l'article prenne toute cette largeur. Revenons à notre CSS. Je vais monter ici en dessous de nos styles de base, et je vais cibler toutes les images et l'afficher sous forme d'éléments de bloc. Réglez sa largeur à 100%. Donc, il prendra toute la largeur et définira sa hauteur sur auto. Et maintenant, nos images prennent toute la largeur du conteneur. Nous avons nos messages à la recherche exactement comment nous voulons. La seule chose qui reste est de les contrôler en utilisant Flexbox. Et nous le ferons dans la prochaine leçon. 22. 22 ajouter la flexbox à nos publications: Bonjour tout le monde. Dans cette leçon, nous allons continuer à travailler sur notre section de messages et nous allons contrôler sa mise en page à l'aide de Flexbox. Alors commençons. Bon, donc c'est comme ça que nous avons quitté notre section Messages. Vous pouvez voir que chaque poste prend 100% de la largeur. Et c'est ce que nous voulons sur les appareils mobiles. Par exemple, si je rétrécit mon navigateur, vous pouvez voir que cela est superbe sur les appareils mobiles. Nous sommes maintenant ce que nous voulons faire sur les écrans de taille moyenne et agrandir écrans de signe est sur les écrans moyens ou tablettes. Nous voulons que chaque poste utilise la moitié de l'espace de la zone de contenu principale afin que nous puissions avoir deux publications côte à côte. Et sur les grands écrans, nous voulons que les deux premiers messages soient dans la première rangée, puis les trois messages suivants soient dans la deuxième rangée. Et puis le dernier post pour prendre toute la largeur de la troisième rangée. Génial, alors revenons à notre CSS et faisons ça. Tout d'abord, je vais créer un nouveau rôle pour les appareils d'écran de taille moyenne. Et à l'intérieur, je vais cibler la section des postes, qui contient tous nos messages. Et je vais définir sa propriété d'affichage sur flex. Donc, tous les messages seront affichés côte à côte. Et puis ajouter flex wrap rat de sorte que les messages seront enveloppés à la ligne suivante. S' ils n'ont pas d'espace libre. Ensuite, je vais cibler tous les messages, puis ajouter une base flexible 49%. Vous pouvez voir que nous avons maintenant deux messages sur chaque ligne. Et parce que j'ai défini la base flexible à 49 pour cent, vous pouvez voir que nous avons de l'espace vide ici, ce qui représente 2% des principales zones de contenu avec. Maintenant, nous voulons déplacer cet espace restant et le mettre entre les poteaux. Revenons donc à notre CSS et allons dans les messages et ajouter justifier l'espace de contenu entre. Et vous pouvez voir maintenant que l'espace restant est juste ici entre les poteaux qui à la fin du conteneur plus. Et c'est la mise en page que nous voulons sur les écrans moyens. Maintenant, continuons à travailler pour atteindre la mise en page que nous voulons sur des écrans plus larges. Retour à notre CSS. Nous allons ajouter un nouveau rôle pour les écrans plus larges. Et nous allons cibler les postes avec la classe d'après-guerre 1 tiers, et ajouter base flexible 32 pour cent. Ensuite, nous allons cibler les messages avec une classe de moitié de poste et ajouter une base flexible 49%. Et enfin, nous allons cibler les postes avec la classe de ledit flex base à 100%. Et comme ça, nous avons nos messages disposés comme nous le voulons sur des écrans plus grands. Et si nous réduisons notre navigateur, la mise en page changera sur les écrans moyens, puis sur les appareils mobiles. Et maintenant, nous avons terminé notre section de poste et nous allons continuer à travailler dans la prochaine leçon. 23. 23 de bâtir et de styliser la section de montre: Bonjour tout le monde. Dans cette leçon, nous allons commencer à construire notre section montre aujourd'hui. Alors commençons. Bon, donc nous allons commencer juste ici après la section post. Nous allons ajouter une nouvelle section avec une classe de montre. Et à l'intérieur de cette section, nous allons ajouter H2 avec une classe d'en-tête de section. Et nous dirons regarder aujourd'hui. Et en dessous, nous allons ajouter un div avec une classe de carte de montre. Et à l'intérieur, nous allons ajouter un autre div qui contiendra l'image de la carte et lui donner une classe d'image de montre. Et nous mettrons notre image à l'intérieur de cette div. Et ci-dessous, nous allons ajouter un autre div avec une classe de contenu de montre. Et cette div contiendra tous les textes ajouteront. Donc, à l'intérieur de cette div, nous allons ajouter une balise H2. Et puis en dessous, nous allons ajouter un autre div avec une classe d'info film. Donc, cette div contiendra toutes les informations sur notre film, comme l'exécution du film, l'année de sa sortie, sa catégorie ou un genre, et ainsi de suite. Maintenant, nous allons ajouter cinq travées à l'intérieur de cette div. Et après notre div de contenu de montre, nous allons ajouter une balise p et lui donner une classe d'histoire de film. Et puis nous allons ajouter du texte factice. Et puis en dessous de cette balise p, nous allons ajouter une balise d'ancrage et dire simplement lire la suite. Et puis nous allons copier cette carte de montre div, coller à nouveau, puis changer l'image. Et si nous allons à notre navigateur, ici nous avons nos deux cartes. Ensuite, appelons-les dans notre CSS. Je vais y aller entre les commentaires. Et je vais cibler l'en-tête de section au début. Ensuite, ajoutez la couleur noire, taille de police trois, VM, donc c'est plus grand et plus agréable. Puis le centre de l'alignement du texte. Et vous pouvez voir que c'est beaucoup mieux maintenant, Continuons à travailler. Je vais cibler la carte de montre div et lui donner une marge de 1 e m afin que nous puissions avoir un peu d'espacement sous nos cartes. Ensuite, nous allons cibler notre contenu de montre div et ajouter la couleur de fond noir. Puis couleur blanche. Et rembourrage trois VM. Vous pouvez voir qu'on se rapproche ici. Donc, nous allons cibler l'âge pour définir sa taille de police sur, pour les manger. Et c'est le poids de police à 300. Et nous allons ajouter la marge 0 et la transformation de texte pour capitaliser. Continuons. Je vais cibler la classe d'informations du film et définir son poids de police sur gras. Ensuite, nous allons cibler les travées à l'intérieur et ajouter du rembourrage, non ? 1.5. Nous allons également cibler les tags p avec la classe d'histoire de film. Et nous ajouterons marge un EM en haut et en bas. Maintenant, ajoutons la balise d'ancrage et changeons sa couleur en blanc. Et puis il a dit que c'est le poids de la police à gras. Et maintenant, nous avons notre carte de montre à la recherche parfaite pour les appareils mobiles. Dans la leçon suivante, nous allons apprendre comment le modifier sur des écrans plus larges en utilisant Flexbox. Alors, à vous voir. 24. 24 ajouter la flexbox à la section de flexbox de la montre: Bonjour tout le monde. Après avoir créé et coiffé notre section montre aujourd'hui pour les appareils mobiles dans la dernière leçon. Dans celui-ci, nous allons le faire paraître bien pour les écrans plus larges. Et nous le ferons en utilisant flexbox. Alors commençons. D' accord, donc ce que nous voulons faire ici, c'est que nous voulons que l'image soit assise à gauche et que le contenu soit à droite. Assez facile. Et nous avons fait quelque chose de très similaire avant que nous construisions la disposition du Saint Graal. Vous vous souviendrez que nous avons flotté la zone de contenu principale vers la gauche et une barre latérale vers la droite. Alors faisons ça. Nous allons créer de nouvelles règles pour les écrans moyens et grands. La mise en page fonctionnera bien pour les tailles d'écran moyennes et grandes. Et à l'intérieur de cette requête multimédia, nous allons cibler la carte de montre div, définir sa propriété d'affichage sur flex. Et comme ça, vous pouvez voir que l'image est maintenant sur la gauche et le contenu est sur la droite. Mais maintenant, nous voulons centrer ce contenu verticalement. Alors allons à notre CSS et ciblons le div de contenu de la montre, qui contient tout le contenu. Et puis nous allons ajouter la colonne d'affichage, flex et flex flux. Et puis bien sûr, justifier contenu Center. Vous pouvez voir que le contenu est parfaitement centré maintenant. Maintenant, tout est superbe. Mais nous voulons changer l'ordre de cette image et la mettre sur le côté droit du conteneur. Nous pouvons le faire avec la propriété de commande. Donc, si je vais à mon HTML et ajouter une classe de taux d'image à l'image que je veux mettre sur la droite. Et puis allez à mon CSS et ciblez cette image, la classe de droite d'image et définissez sa propriété d'ordre à deux afin qu'elle vienne après le contenu. N' oubliez pas que tous les éléments flexibles ont l'ordre 0 par défaut. Ainsi, tout article prenant un ordre supérieur à 0 sera affiché à la fin de la ligne. Et vous pouvez voir que l'image est maintenant affichée à droite. Et maintenant, nous avons terminé la section de la montre. Nous allons continuer à travailler dans les prochaines vidéos. 25. 25 de bâtir et de styliser la section de téléchargement: Bonjour tout le monde. Dans cette leçon, nous allons commencer à construire la section de téléchargement maintenant. Ce sera amusant. Alors commençons. Nous commencerons juste ici sous la section de la montre et ajouterons une nouvelle section avec une classe de téléchargement. Et à l'intérieur de cette section, nous allons ajouter une balise H2 avec une classe d'en-tête de section. Et nous allons dire télécharger maintenant. Et puis en dessous de cela, nous allons ajouter un div avec une classe de carte de téléchargement. Et à l'intérieur de cette div, nous allons ajouter un autre div avec une classe d'image de téléchargement. Cette div sera l'image du conteneur et à l'intérieur de celui-ci ajoutera cette image. Et en dessous de cette image de téléchargement div, nous allons ajouter un autre div avec une classe de contenu de téléchargement. Bien sûr, cela contiendra tout le contenu de cette section. Et à l'intérieur de ça, nous allons ajouter une balise d'ancrage. Et à l'intérieur de cette balise d'ancrage, nous allons ajouter une portée et dire simplement téléchargement. Et puis nous allons ajouter l'icône Font Awesome ci-dessous. Et en dessous de cette balise d'ancrage, nous allons ajouter un div avec une classe d'informations de téléchargement. Et à l'intérieur de cela, un autre div avec une classe de genre de téléchargements. Et à l'intérieur de ce genre de téléchargement div, nous allons ajouter des balises h4 et dire juste genre. Et ci-dessous, nous allons ajouter une balise p et ajouter les catégories pour notre série. Et en dessous de la classe de genre de téléchargement, nous allons ajouter un autre div avec une classe de distribution de téléchargement. Donc, ce div contiendra des images de la distribution qui était dans la série. Et à l'intérieur de celui-ci, nous allons ajouter un H4 et dire juste casting. Ensuite, nous allons ajouter quelques images pour le casting de la série. Et puis enfin, en dessous de la div avec une classe d'informations de téléchargement, nous allons ajouter un autre div avec la classe de notation de téléchargement. Et à l'intérieur, nous ajouterons quatre travées. Le premier, nous aurons une classe de taux et nous dirons 8.7. Ensuite, nous ajouterons un second et dirons cent deux cents évaluations. Et enfin, la dernière. Et nous dirons six saisons. Voyons donc à quoi cela ressemblera dans notre navigateur. Vous pouvez voir que ça n'a pas l'air bien. Revenons donc à notre CSS et commençons à coiffer ceci. Je vais aller juste ici entre les commentaires et je vais commencer par cibler la carte de téléchargement div et ajouter la marge inférieure un EM pour obtenir un peu d'espacement. Et puis après cela, nous allons cibler le contenu de téléchargement div et définir sa couleur d'arrière-plan sur blanc. Et puis nous allons cibler l'ancre à l'intérieur de celui-ci et définir sa couleur de fond sur le noir. Ensuite, faites sa couleur blanche. Et ajoutez un rembourrage d'un EM de haut en bas et de deux VM de gauche et de droite. Ensuite, nous dirons la décoration de texte aucun et la transformation de texte en majuscule. Vous pouvez voir maintenant nous avons notre contenu de téléchargement div avec la couleur de fond blanc. Et cette ancre ici a un fond noir. Mais rendons cette icône plus grande. Retour à mon CSS. Je vais cibler l'icône à l'intérieur de la balise d'ancrage et définir sa taille de police à 2,5 EM. Donc vous pouvez voir qu'il est plus grand. Maintenant, continuons. Ajoutons un peu de rembourrage ici à la classe d'informations de téléchargement. Revenons donc à notre CSS. Je vais cibler la classe d'info de téléchargement et ajouter du remplissage 1 e m de haut en bas, puis à EM de gauche et de droite. Ensuite, rendons ces images plus petites parce qu'elles ont l'air bizarres en ce moment. Donc, je vais cibler les images à l'intérieur de la div de distribution de téléchargement et définir la hauteur à 60 pixels. Ensuite, sa largeur aussi à 60 pixels. Et puis ajoutez un rayon de bordure de 50 pour cent pour qu'il devienne une image circulaire. Vous pouvez voir maintenant que dans l'ensemble les sections sont plus propres. D' accord, ajoutons quelques styles à ce téléchargement de lecture div, swale, revenez à mon CSS et ciblez cette div et la couleur de fond, notre couleur jaune. Ensuite, ajoutez un rembourrage, un EM de haut en bas, et deux EM de gauche et de droite. Ensuite, ajoutez la couleur noire et la taille de la police 00.9 AM. Maintenant, nous allons cibler cette étendue. Vous vous souvenez qu'il a une classe de taux. Donc, je vais revenir à mon CSS et cibler cette étendue et ajouter la taille de la police, 2,5 mm. Poids de la police, gras et marge, en bas moins 0,25 EM. Retour à notre CSS. Je vais aller juste ici en dessous du sélecteur de classe d'informations de téléchargement. Et je vais sélectionner le H4 et ajouter la marge 0. Ensuite, j'ajouterai la balise p et ajouterai la marge 0 aussi. Et la taille de la police 0.9 EBM. Et nous avons fini le style de cette section. Et la prochaine leçon, nous allons commencer à ajouter notre flexbox pour le faire ressembler comme nous le voulons. Alors, à vous voir. 26. 26 ajouter la flexbox à la section de flexbox de téléchargement: Bonjour tout le monde. Dans cette leçon, nous allons changer la disposition de la section de téléchargement à l'aide de Flexbox. Alors commençons. Bon, donc vous pouvez voir ici que nous avons notre section, et il contient deux grands creux. Le premier div, qui contient l'image et a une classe d'image de téléchargement. Et le second, qui contient tout ce contenu et a une classe de contenu de téléchargement. Si je rétrécit mon navigateur jusqu'à ce que j'atteigne la taille de l'écran mobile et aller à ma démo ici. Vous pouvez voir que notre image prend toute la largeur. Et en dessous, nous avons le contenu de téléchargement div. Et vous pouvez voir la balise d'ancrage ici prend toute la largeur. Et en dessous, cette info de téléchargement div prend également toute la largeur et les images sont affichées horizontalement. En outre, la section de lecture est belle. Alors allons à notre CSS et changez un peu notre mise en page. Je vais sélectionner le contenu de téléchargement div, qui contient la balise d'ancrage, l'info div et la div de notation. Et je dirai display flex. Rappelez-vous que nous voulons qu'ils s'empilent les uns en dessous des autres et des appareils mobiles. Donc, je vais définir le flux flex à la colonne. Et maintenant, vous pouvez voir que la balise d'ancrage ici prend toute la largeur. En effet, stretch est la valeur par défaut de la propriété align items. Et vous vous souviendrez que les éléments d'alignement fonctionnent le long de l'axe transversal, qui est horizontal dans ce cas, car le flux de flux est défini la colonne. Ainsi, par exemple, si je retourne à mon CSS et ajoute des éléments d'alignement, flex start. Vous pouvez voir que les éléments à l'intérieur de la div de contenu de téléchargement sont alignés sur le début du conteneur. D' accord, retirons cette ligne. Et continuons. Nous voulons que le contenu à l'intérieur de cette balise d'ancrage se trouve au-dessous de l'autre. Rappelez-vous, à l'intérieur de cette balise d'ancrage, nous avons une portée qui contient ce mot de téléchargement. Et puis nous avons une icône en dessous. Ainsi, nous pouvons revenir à notre CSS, puis cibler la balise d'ancrage, et définir l'affichage sur flex. Ensuite, flex colonne de flux afin que les éléments soient assis les uns en dessous de l'autre. Et puis justifiez le centre de contenu pour vous assurer que les éléments seront toujours centrés verticalement même si la hauteur change. Et puis nous allons juste ajouter du texte, aligner le centre. Et maintenant, l'étiquette d'ancrage est comme nous le voulons. Ensuite, nous voulons que ce div avec la classe des téléchargements genre et ce div avec une classe de distribution de téléchargement soit affiché en tant que conteneurs flexibles afin que le contenu soit affiché horizontalement, pas verticalement. Revenons à notre CSS. Nous allons cibler le genre de téléchargement et télécharger les divs cast. Et nous allons définir la propriété d'affichage sur flex et ledit wrap flex à envelopper pour nous assurer que les éléments seront enveloppés à la ligne suivante s'ils n'ont pas d'espace. Et vous pouvez voir maintenant le contenu à l'intérieur de chacun d'eux est affiché horizontalement avec ce mot ici n'est pas centré verticalement. Revenons à notre CSS. Je vais ajouter un centre d'éléments de ligne. Et vous pouvez voir maintenant qu'ils sont parfaitement centrés le long de l'axe transversal, qui est vertical ici parce que le flux flexible est rho par défaut. Ensuite, passons à la note de téléchargement. Nous voulons juste le faire ressembler à l'étiquette d'ancrage là-haut, ce qui signifie que nous voulons que toutes les travées à l'intérieur soient affichées l'une en dessous de l'autre et centrées. Pour que nous puissions revenir à notre CSS. Et puis juste ici à côté de la balise d'ancrage, nous allons ajouter la sélective pour la section de classement de téléchargement. Et juste comme ça, on l'a comme on veut. Suivant. Nous voulons aussi ajouter un peu d'espacement ici. Revenons à notre CSS. Je vais cibler le H.264 qui se trouve à l'intérieur de la section d'informations de téléchargement. Et je vais ajouter la base flexible 20 pour cent. Et maintenant, vous pouvez voir qu'il y a de l'espace ici, qui aura l'air bien sur les appareils mobiles. Ensuite, je veux ajouter un peu de marge ici. Revenons à notre CSS. Nous allons cibler le genre de téléchargements div, et ajouter la marge inférieure, depuis dix pixels. Et maintenant, ça a l'air mieux. Donc maintenant, cela est à la recherche excellente pour les appareils mobiles. Mais sur les tablettes dans des écrans larges, nous voulons que la balise d'ancrage, la section d'informations téléchargement et la section de lecture de téléchargement s'affichent côte à côte. Cela peut être fait super facilement en utilisant flexbox. Nous aurons juste besoin de cibler leur conteneur, qui est le div de contenu de téléchargement, et de définir sa propriété d'affichage sur flex. Alors faisons ça. Retour à notre CSS. Je vais faire une nouvelle règle pour les écrans moyens et grands. Ensuite, ciblez le conteneur de contenu de téléchargement et dites display flex. Maintenant, ils sont affichés côte à côte horizontalement. Mais il y a un problème. On a de l'espace vide ici. Nous devons donc répartir cet espace vide entre les trois éléments. Vous vous souvenez que nous pouvons le faire en utilisant la propriété flex grow. Par exemple, si je définit la propriété flex grow pour chacun d'entre eux sur un, alors cet espace libre sera distribué également entre eux. Mais ce que je vais faire ici, c'est que je vais définir la propriété flex grow pour l'ancre et la section de notation de téléchargement 2, 1, et le définir à deux pour la section d'informations de téléchargement. De cette façon, il prendra le double de l'espace aux deux autres, car il a plus de contenu. Revenons à notre CSS. Je vais cibler la balise d'ancrage et la note de téléchargement et définir flex croître à un. Ensuite, je vais cibler l'info de téléchargement div et ledit flex croître à deux. Et maintenant, vous pouvez voir que cette section est superbe. Et si je rétrécit mon navigateur, vous pouvez voir qu'il est entièrement réactif sur tous les appareils. Si jamais vous essayez d'atteindre ce type de mise en page sans Flexbox, vous trouverez cela très difficile. Mais avec Flexbox, tout est beaucoup plus facile. Donc c'est tout pour cette leçon, tout le monde, et je te verrai dans la prochaine. 27. 27 créer notre galerie avec la mise en page de maçonnerie horizontale en utilisant flexbox: Bonjour tout le monde. Dans cette leçon, nous allons construire notre galerie. Alors commençons. D' accord, tout le monde, je vais commencer par aller ici après la section de téléchargement et ajouter une nouvelle section avec une classe de galerie. Et à l'intérieur, je vais ajouter un H2 et lui donner une classe d'en-tête de section. Et on dira la galerie de films. Et en dessous de cela, j'ajouterai un div avec la classe des images de la galerie. Et à l'intérieur de cette div, nous allons ajouter les divs qui contiennent nos images. Donc, d'abord, je vais ajouter un nouveau div avec une classe d'image de galerie. Et à l'intérieur de cela, j'ajouterai une balise d'ancrage. Ensuite, nous allons ajouter notre image à l'intérieur de la balise d'ancrage. Si je vais à mon navigateur et voir ceci, vous pouvez voir que nous avons notre image juste ici. Maintenant, revenez à notre HTML. Je vais mettre en pause l'enregistrement et copier cette div avec la classe de l'image de la galerie dix fois et changer les images. Bon, donc on est de retour. J' ai ajouté 10 divs avec de nouvelles images. Donc, si je vais à mon navigateur, vous pouvez voir qu'ils sont assis l'un en dessous de l'autre juste ici. Maintenant, allons à notre CSS. Je vais cibler les images de la galerie div, qui contient tous les divs internes. Et je vais définir sa propriété d'affichage sur flex. Vous pouvez maintenant voir tous les divs d'images de la galerie qui contiennent les images affichées horizontalement sur une seule ligne. Revenons à notre CSS ci-dessous ce flex d'affichage et ledit flex, envelopper pour envelopper. Et nous allons aussi cibler les divs avec la classe d'image de la galerie et ajouter une hauteur de 250 pixels afin que tous les divs aient la même hauteur. Vous pouvez voir maintenant les images sont affichées les unes au-dessous de l'autre, et nous avons tous la même hauteur de 250 pixels. Revenons à notre CSS. Ensuite, nous voulons ajouter des propriétés de base flexibles aléatoires, divs qui contiennent nos images. De cette façon, chaque div aura une largeur différente des autres, comme la mise en page que nous voulons. Maintenant, nous pouvons le faire de deux façons. abord, nous pouvons simplement ajouter une classe unique pour chaque div, puis cibler ces classes individuellement dans notre CSS et ajouter différentes propriétés de base flex à chacune d'entre elles. Mais dans notre cas, nous avons 10 divs. Il serait donc très difficile de le faire à chacun d'entre eux et ce n'est pas une solution dynamique. L' autre moyen est d'utiliser certains sélecteurs CSS avancés. Donc, je vais coller du code ici. Et maintenant, vous pouvez voir que les images ont des valeurs aléatoires pour leur propriété de base flexible. Allons à notre CSS et je vais vous expliquer ce que je viens de faire. Donc, ici, je viens de sélectionner l'image de la galerie div. Et au cas où vous ne savez pas ce que fait le nième enfant, il accepte juste des nombres pour déterminer l'élément spécifique que vous voulez. Donc, par exemple, si j'en ajoute un ici, alors ce que cela fera est qu'il ciblera le premier div qui a la classe de l'image de la galerie. Et si j'ajoute cinq, alors il cible le cinquième div avec la classe de l'image de la galerie et ainsi de suite. Mais qu'est-ce que c'est, c'est pour n plus un ? Eh bien, tout d'abord, la lettre d'entrée ici signifie que ce processus de sélection sera répété dynamiquement. Par exemple, si je supprime simplement cela et ajoute seulement, alors cela ciblera le premier élément qui a la classe d'image de la galerie, puis le second, puis le troisième, et ainsi de suite. De sorte qu'à la fin, tous les éléments seront sélectionnés. Mais si nous le faisons à n, alors il ciblera la seconde et ajoutera à chaque fois. Donc, le second, le quatrième, le six, et le huitième, et ainsi de suite seront sélectionnés. Et si nous faisons cela pour n, je pense que vous pouvez maintenant deviner qu'il va sélectionner l'élément numéro 48 et 12 et ainsi de suite. Mais si nous le faisons pour n plus un, alors celui-ci que nous avons ajouté est appelé le décalage, est le nombre dont nous allons commencer à compter. Donc, dans ce cas, nous allons sélectionner des éléments qui ont le nombre de 159 et ainsi de suite, au lieu de 4, 8, 12. Donc, par exemple, si je vais ici au deuxième sélecteur et ajouter une bordure de cinq pixels, rouge solide. Maintenant, si nous regardons ce sélecteur, nous verrons pour n, qui signifie que nous allons sélectionner un nouvel élément tous les quatre éléments, par exemple, pour huit et 12. Mais il y en a deux ici, ce qui signifie que notre décalage est deux. En d'autres termes, nous commencerons à sélectionner nos éléments à partir du deuxième élément. Donc, ce sera 2, 6, 10, et ainsi de suite. Alors allons dans notre navigateur et recharger. Et maintenant vous pouvez voir que nous avons la bordure rouge autour de l'élément numéro 2, puis le numéro 6, puis le numéro dix. Donc maintenant, vous savez comment j'ai ajouté les valeurs dynamiques de base flexible. Mais quand vous regardez ici, vous remarquerez qu'il y a un espace libre. Nous pouvons augmenter les éléments avec pour prendre cet espace libre en utilisant la propriété flex grow. Revenons à notre CSS. Supprimons cela et allons juste ici à l'intérieur du sélecteur d'image de la galerie et définissez flex, grandissez à un. Et maintenant, vous pouvez voir les éléments se développer pour prendre l'espace restant. Mais il y a un problème ici. Les images à l'intérieur de nos divs ne prennent pas toute la hauteur. Cela peut être facilement corrigé en retournant à notre CSS et en ciblant les images. Ensuite, ajoutez la hauteur 100. Et vous pouvez voir les images sont stressées pour prendre toute la hauteur de l'image de la galerie div, mais ils ne sont pas très bons. Voyez comment ils sont forcés de tenir dans le conteneur. Si nous revenons à notre CSS et ajoutons la couverture d'ajustement de l'objet. Et le problème a disparu. Les images sont superbes. Il reste une chose, il nous faut un espacement entre les images. Revenons à notre CSS. Je vais aller ici dans notre galerie image div et ajouter une marge de 0 en haut. 0 à partir de la droite, 8 pixels à partir du bas et 8 pixels à partir de la gauche. Et nous allons cibler la div externe avec la classe des images de la galerie et ajouter la marge gauche moins huit pixels. Donc, il va tirer le conteneur huit pixels vers la gauche et compenser les huit pixels que le conteneur a été poussé vers la droite. Donc là, vous l'avez. Une mise en page de galerie très avancée qui a l'air superbe et est entièrement réactive. Si je l'affiche sur différents écrans, vous pouvez voir qu'il est entièrement réactif. Les éléments se frottent bien quand il n'y a pas assez d'espace. Parce que n'oubliez pas, nous avons réglé le flex wrap pour envelopper. Alors c'est tout pour cette leçon. Tout le monde. Dans la prochaine leçon, nous continuerons à construire notre galerie. Alors, à vous voir. 28. 28 inscrivant la plugin de boîte à lumière de galerie à notre galerie de photos: Bonjour tout le monde. Dans cette leçon, nous allons créer la fenêtre modale pour notre galerie en utilisant le plugin JavaScript Lightbox créé par low cash la voiture. Alors commençons. Bon, Maintenant, si nous regardons notre HTML, vous pouvez voir que nos images sont enveloppées dans des balises d'ancrage. Maintenant, dans l'ouverture d'une balise, nous voulons utiliser l'attribut href pour contrôler ce que nous pointons. Nous voulons que chaque image miniature soit liée à la version non croisée de cette image. Donc, je vais ajouter H ref, puis copier le chemin de l'image et le coller ici. Et maintenant, si je retourne à mon navigateur et cliquez sur cette image, vous pouvez le voir maintenant conduit à l'image complète. Il est clair que ce n'est pas une fenêtre modale. On n'a même pas encore branché la boîte à lumière. Et ce qui se passe ici, c'est que notre page Web nous relie simplement à une nouvelle page, ou dans ce cas, à une nouvelle image. Et nous pouvons revenir à notre page en cliquant simplement sur le bouton Précédent. Revenons à notre HTML. Je vais parcourir tous les liens et ajouter les attributs href pour eux. Donc je vais mettre l'enregistrement en pause et gérer ça. Et à l'arrière. Maintenant, nous avons nos images et quand nous cliquons sur l'une d'entre elles, cela nous mènera à la version complète de l'image. Maintenant, nous voulons faire en sorte que la fenêtre modale prenne effet lorsque nous cliquons sur les images. Alors allons-y et la recherche de la boîte de lumière ouvrira ce lien avec l'emplacement, le nom de la voiture. Et puis on le téléchargera. Ensuite, nous allons extraire le fichier zip, ouvrir, puis ouvrir le dossier dist. Et nous aurons besoin du dossier CSS juste ici. Je vais donc le copier et le coller dans notre dossier de projet. Nous aurons également besoin du dossier JavaScript. Donc, je vais ouvrir le dossier JS et copier le fichier dot js de la boîte de lumière. Et puis revenez dans le dossier du projet et ouvrez le dossier JS et collez le fichier ici. Et maintenant, nous devons inclure ce fichier dans notre page Web. Swell, retournez à mon éditeur de code et allez juste ici avant notre fichier main.js. Et je vais écrire la source de script JS, lightbox dot js. Et incluons aussi notre fichier CSS. Je vais faire défiler jusqu'à la tête de notre page Web. Et nous allons aller juste ici en dessous des polices Google, et nous allons dire lien H ref CSS, lightbox dot CSS. Maintenant, avec les fichiers CSS et JavaScript de la boîte de lumière en place, nous sommes à un pas d'avoir un comportement modal. Faites défiler vers le bas jusqu'aux images de notre galerie. Commençons par la première image. Donc, quand l'élément a, je vais ajouter un nouvel attribut appelé Data light box. Vous pouvez ajouter une valeur de tout ce que vous aimez ici. Donc, je vais utiliser la galerie. Maintenant, quand je clique sur la première image, vous pouvez voir qu'elle s'ouvre dans un modal. Ensuite, nous devons appliquer cet attribut data-lightbox à toutes nos images. Faisons ça. Maintenant, si nous revenons au navigateur, rechargeons et ouvrons n'importe quelle image, elle apparaîtra dans un modal. Et si j'appuie sur le bouton flèche droite de mon clavier, vous pouvez voir l'image suivante est affichée joliment et ainsi de suite. Et maintenant, nous avons terminé notre section galerie. Nous continuerons à travailler et à apprendre dans les prochaines conférences. 29. 29 bâtir notre barre de disques à l'aide de flexbox: Dans cette leçon, nous allons commencer à ajouter du contenu à notre barre latérale. Alors commençons. accord, donc tout d'abord, j'irai ici à l'intérieur de la div avec la classe de barre latérale. Et je vais supprimer ce contenu fictif que nous avons ajouté auparavant. Ensuite, nous allons commencer par ajouter un div avec une classe de widget. Et à l'intérieur de celui-ci, nous allons ajouter un autre div avec une classe de contenu de widget. Et puis à l'intérieur de cela, nous allons ajouter H3 et juste dire les films les mieux notés. Et à l'intérieur de cela, nous allons ajouter un nav avec une classe de menu latéral. Et puis nous allons ajouter UL LI, puis une étiquette d'ancrage à l'intérieur de celui-ci. Et nous dirons le Parrain. Et puis nous copierons cette LI et collé quelques fois. Et puis on dira 12 hommes en colère et le chevalier noir. Et maintenant, vous pouvez voir notre menu est juste ici. Allons à notre CSS et faisons un peu plus. Va aller juste ici entre les commentaires. Et on va cibler la barre latérale, non ? La classe. Et puis nous ajouterons du rembourrage à E m, puis nous ajouterons de la couleur noire. Et en dessous de cela, nous allons cibler la classe de widget. Et nous allons ajouter la couleur de fond blanc, puis la marge inférieure à EM. Donc, il y aura un peu d'espacement en bas lorsque nous ajouterons plus de widgets. Vous pouvez voir qu'il a maintenant une couleur de fond blanc, mais ajoutons un peu de rembourrage ici. Retour à notre CSS. Je vais cibler le contenu du widget div, puis ajouter un remplissage de 0,5 EM par le haut et le bas et deux EM par la gauche et la droite. Et puis en dessous de cela, je vais cibler l'UL du menu de la barre latérale et ajouter le type de liste, aucun afin que nous puissions nous débarrasser des puces. Et puis le rembourrage a laissé une machine virtuelle. Donc maintenant, vous pouvez voir que le menu est décalé un peu vers la gauche en raison de notre rembourrage. Alors maintenant, nous allons styliser les liens vers notre CSS. Je vais cibler la balise d'ancrage dans le menu de la barre latérale. Et je vais ajouter un bloc d'affichage. Et puis rembourrage point bas pour EN afin que nous puissions obtenir un peu d'espacement en dessous d'eux. Et puis la couleur noire. Texte, décoration, aucun. Et le poids de la police, gras. Très bien, vous pouvez voir que ça va mieux maintenant. Donc, revenez à notre HTML. Je vais mettre en pause l'enregistrement et copier cette div avec une classe de Widget une couple de fois. Et je vais changer le contenu pour que nous puissions obtenir plus de contenu dans notre barre latérale. De retour. Maintenant, vous pouvez voir que nous avons plus de contenu dans la barre latérale, et notre barre latérale est superbe sur des écrans plus larges. Mais si j'inspecte n'importe quel élément de la page et redimensionne les fenêtres de sorte que notre barre latérale s'effondre lorsque nous frappons la taille de l'écran moyen. Vous pouvez voir que les widgets prennent toute la largeur de la barre latérale, et cela aura fière allure sur les appareils mobiles. Par exemple, si je continue à réduire mon navigateur jusqu'à ce que je touche la gamme de petites tailles d'écran, vous pouvez voir les widgets sont superbes. Mais quand nous élargissons à la taille moyenne à nouveau, je pense qu'il sera mieux si nous avons deux widgets par rangée dans les écrans moyens fera cela se produire en utilisant Flexbox. Donc, revenons à notre CSS, nous allons créer un nouveau rôle pour les écrans moyens, qui ont une largeur minimale de 800 dix pixels et une largeur maximale de cent, cent vingt pixels. Et puis nous allons cibler la barre latérale droite div. Définissez ensuite sa propriété d'affichage sur flex. Vous pouvez voir tous les widgets sont maintenant affichés côte à côte horizontalement. Retour à notre CSS. Nous allons aller ci-dessous afficher flex et ajouter flex wrap, wrap. Et maintenant, les éléments sont lus à la ligne suivante. Retour à notre CSS. Je vais cibler la div avec la classe de widget et ajouter une base flexible 48.8%. Et maintenant, il n'y a que deux widgets par ligne. Mais nous voulons que cet espace de 3% restant ici soit entre les widgets, pas à la fin du conteneur. C' est facile à faire. Donc, à notre CSS. Je vais aller juste ici en dessous du flex wrap, rat et ajouter justifier l'espace de contenu entre. Et maintenant, ils sont bien séparés. Mais une chose reste, Allons à notre CSS et défilons jusqu'à ce que nous trouvions la classe droite de la barre latérale. Puis changez la couleur d'arrière-plan bleu à la même couleur d'arrière-plan du corps. Et maintenant, notre barre latérale est superbe sur les écrans moyens. Et si nous allons à des écrans plus petits, semble bien, alors les écrans plus grands semble grand jour aussi. C' est tout pour cette leçon, tout le monde. Et je te verrai dans la prochaine. 30. 30 Créer notre menu et notre pied de pied: Bonjour tout le monde. Dans cette leçon, nous allons ajouter le menu à notre projet. Alors commençons. Très bien, Nous allons donc ajouter un menu qui est très similaire au menu simple que nous avons créé dans les leçons précédentes. Nous allons simplement supprimer quelques liens et changer les couleurs. Donc ici, j'ouvre le fichier HTML du menu de symboles que nous avons créé auparavant. Et je vais copier cette URL et aller dans le fichier HTML du projet et le copier ici dans la balise nav avec une classe de menu principal. Et puis je laisserai trois liens et je retirerai les autres. Nous allons changer le texte du lien. Donc nous allons dire regarder, puis télécharger, puis galerie. Et maintenant, vous pouvez voir le menu. Empruntons également les styles du fichier CSS du menu simple. Donc maintenant, j'ouvre le fichier CSS et un menu simple, et je vais copier tous les styles que nous avons ajoutés auparavant. Ensuite, allez dans le dossier CSS de notre projet et collez-les ici. Ensuite, je vais supprimer ce menu sélecteur de titre parce que nous n'avons pas le menu Titre. Et puis je vais changer ce sélecteur de menu et faire le menu principal afin que les styles soient appliqués à notre menu. Je vais également changer ce sélecteur de navigation unique et faire le menu principal ainsi. De cette façon, les styles flexbox seront appliqués à notre menu. Et puis nous allons changer ces 600 pixels à 810 pixels. Et aussi, supprimons cette couleur d'arrière-plan de l'URL parce que nous avons notre couleur jaune ici. Et puis changez la couleur des liens en noir. Ensuite, faites sa taille de police 1.1 EM. Et c'est le poids de la police en gras. De plus, lorsque nous passons la souris dessus, nous voulons que la couleur de fond soit noire et que la couleur soit jaune. Et ici, nous avons notre menu très bien. Et lorsque nous passons la souris sur n'importe quel lien, l'arrière-plan devient noir et la couleur devient jaune. Et il a l'air génial sur les grands écrans. Et si nous le voyons sur les appareils mobiles, vous pouvez voir les liens sont bien assis les uns en dessous de l'autre. Maintenant, il nous reste une chose à faire, c'est le pied de page. Il contiendra juste une simple ligne de texte. Alors passons à notre HTML. Faites défiler jusqu'au pied de page, et supprimez simplement celui-ci. Et dites « Tous droits réservés ». Ahmed Sidak Udemy. Maintenant, allons à notre CSS à la recherche de pied de page. Ensuite, supprimez ce sélecteur d'en-tête et cette hauteur de 100 pixels et ajoutez la couleur blanche. Puis le texte aligner le centre et le remplissage, 1,5 e m puis la taille de la police 1 point 2, EM, et le poids de la police gras. Ensuite, en dessous de cela, nous allons cibler l'en-tête et définir sa couleur d'arrière-plan en noir. Et maintenant, nous avons notre pied de page. Enfin, enfin, tout le monde, nous avons terminé notre projet. Je pense que nous avons beaucoup appris sur la façon d'utiliser flexbox en action pendant que nous construisions les différentes sections de ce projet. J' espère que vous l'avez aimé et j'espère que vous avez maintenant une solide compréhension de toutes les propriétés flexbox et comment les utiliser. Et bien sûr, si vous avez des questions ou commentaires ou quelque chose que vous voulez poser à ce sujet, laissez-le dans la section Questions et réponses et je serai ravi de répondre le plus rapidement possible. Merci.