Tout ce que vous devez savoir sur les générateurs CSS

Dans ce didacticiel, nous examinerons des générateurs utiles pour tout ce qui concerne le CSS : des dégradés aux ombres portées et des courbes de Bézier aux triangles et aux échelles de type. 

Juste quelques outils utiles pour votre ceinture à outils, à garder à portée de main.

Générateur d'ombres CSS 

Vous recherchez un outil qui générera automatiquement du code CSS pour des ombres de boîtes en couches vraiment lisses ? Eh bien, vous allez adorer SmoothShadow . Inspiré d'un article écrit par Tobias Ahlin Bjerrome , cet outil astucieux a été créé pour aider quiconque à générer le code dont il a besoin sur place.

Une fois que vous l'aurez essayé, il sera difficile de ne pas l'utiliser. Le petit outil vous permet de concevoir visuellement une ombre de boîte lisse en couches, mais également de modifier l'alpha, le décalage et le flou avec des courbes d'atténuation individuelles. Et c'est encore mieux : le créateur de l'outil, Philipp Brumm , a également publié SmoothShadow en tant que plugin Figma , afin que vous puissiez optimiser votre flux de travail comme vous l'avez toujours voulu.

Générateur de rayon de bordure CSS  #

Lorsque nous pensons à border-radius, nous pensons généralement à quelques valeurs simples - peut-être 8px ou 11px, ou peut-être 16px. Cependant, cela border-radiuspeut être assez fantaisiste , et le générateur fancy-border-radius vous permet de les générer facilement. L'outil fournit une visualisation non seulement des formes rondes simples, mais également des formes organiques, en utilisant huit valeurs combinées. Essentiellement, ce que nous créons, ce sont des ellipses superposées qui créent la forme finale. L'outil est également disponible en tant qu'outil CLI , vous pouvez donc également l'exécuter localement.

Générateur de courbes Cubic-Bezier 

Parfois, une animation ne semble pas juste, n'est-ce pas ? Peut-être que la durée est désactivée ou que l'assouplissement est bizarre, et le comprendre peut prendre un certain temps. Avec le cubic-bezier de Léa Verou , vous pouvez prévisualiser et comparer des animations , les ralentir et même les ajuster visuellement. Et puis copiez-collez l'extrait CSS pour le brancher immédiatement à votre projet.

Et si vous avez besoin d'animations CSS @keyframe basiques ou complexes, Keyframes.app fournit un éditeur visuel de chronologie similaire à un logiciel de montage vidéo. Vous pouvez ajouter des étapes, modifier la taille et la position, appliquer des transformations et des changements de couleur et faire copier-coller également le CSS. Ah et sans oublier le panneau Animation dans Chrome et Firefox pour le débogage également.

Atténuation des dégradés 

Avec les dégradés, nous nous appuyons souvent sur des dégradés linéaires, passant d'une couleur à une autre. Cependant, les dégradés linéaires ont des bords durs là où ils commencent ou se terminent. Il existe un moyen d'améliorer légèrement les dégradés, avec des fonctions d'accélération. Andreas Larsen a donc construit un petit éditeur, Easing Gradients Editor , qui nous permet de créer et de prévisualiser des dégradés d'accélération en CSS. L'outil est également disponible sous forme de plugin Sketch et de plugin PostCSS . Vous pouvez utiliser un sélecteur de couleurs, mais malheureusement, vous ne pouvez pas encore ajouter de valeur de couleur HEX réelle.

Palettes de couleurs de visualisation de données 

Parfois, vous avez besoin d'un type de couleur très spécifique pour une tâche très spécifique. Par exemple, si vous travaillez sur un projet de visualisation de données, par exemple des graphiques circulaires, des graphiques à barres groupées, des cartes, vous avez probablement besoin d'une série de couleurs visuellement équidistantes . C'est alors que le sélecteur de couleurs de données LearnUI peut devenir très utile. Dans de tels cas, il est préférable d'utiliser une gamme de teintes, afin que les utilisateurs puissent identifier les différences plus rapidement. Il est en effet plus facile de distinguer le jaune de l'orange que le bleu du bleu-mais-15%-plus clair .

Avec l'outil, vous choisissez le nombre de couleurs dont vous avez besoin et si vous avez besoin d'une couleur d'arrière-plan claire ou foncée, et choisissez si vous voulez une palette par défaut, une palette de teinte unique ou une échelle de couleurs divergente. Une fois que vous l'avez, vous pouvez copier les valeurs hexadécimales et les exporter au format SVG pour les utiliser dans Sketch, Figma ou Adobe XD.

LearnUI fournit également un générateur de couleurs accessible et un générateur de dégradé assez sophistiqué , avec différents types de dégradé, interpolation, angle, assouplissement et la douceur que vous souhaitez que le dégradé soit.

Des nuances de couleur CSS aux triangles et aux fausses données 

Imaginez que vous ayez juste besoin de trouver des styles de triangle CSS pour les éléments et les pseudo-éléments. Ou peut-être affiner un peu la palette de couleurs en explorant les teintes et les nuances d'une couleur donnée. Ou peut-être générer un dégradé CSS linéaire et radial pour une section de la page. Il n'est pas nécessaire de tout faire manuellement ou d'essayer de trouver ces extraits CSS partout sur le Web. Vous pouvez toujours les trouver sur Omatsuri .

Omatsuri signifie festival en japonais, et le site est un joli petit festival d'outils de navigation open source pour un usage quotidien. Sur le site, vous trouverez un générateur de triangles, un générateur de nuances de couleurs, un générateur de dégradés, des séparateurs de pages, un compresseur SVG, un convertisseur SVG → JSX , un générateur de fausses données, des curseurs CSS et des codes d'événement de clavier. Conçu et construit par Vitaly Rtishchev et Vlad Shilov. Le code source du site est également disponible.

Superposition CSS avec générateur de contraste élevé 

Si vous souhaitez que le texte se démarque mieux sur une image d'arrière-plan, il existe une petite astuce : vous pouvez utiliser une superposition CSS linear-gradientavec une certaine opacité au-dessus de l'image pour améliorer le contraste des couleurs. Spotify , par exemple, utilise la technique.

Bien que tout cela ne nécessite qu'une seule ligne de code, il reste encore une question à résoudre : comment déterminer l'opacité à utiliser pour la superposition ? Le Optimal Overlay Finder vous aide à le découvrir. Vous téléchargez une image, entrez votre texte et choisissez vos couleurs de superposition et de texte, et l'outil vous montre un aperçu de ce à quoi ressemble la superposition lorsqu'elle est appliquée à votre image, ainsi que l'opacité optimale de la superposition. Un petit détail qui va un long chemin.

Générateur de palette de couleurs CSS 

Il existe de nombreux outils fantastiques pour générer votre palette de couleurs, mais Coolors.co est un petit outil astucieux qui en fait juste assez pour générer des palettes et explorer différentes nuances d'une couleur. Vous pouvez créer une palette à partir de la photo ou d'un collage de photos, tester le daltonisme et régler rapidement la teinte, la saturation, la luminosité et la température. Évidemment, il propose également des palettes de couleurs tendance .

Vous pouvez également produire une palette de dégradés entre deux couleurs et créer et exporter votre propre dégradé en CSS. L'outil est disponible sous forme d'application iOS, de module complémentaire Adobe et d'extension Chrome.

Et si vous avez besoin de quelque chose de légèrement plus sophistiqué pour les dégradés dans votre boîte à outils, CSSGradient.io est un autre outil pour tous vos besoins en dégradés, qu'il s'agisse de dégradés linéaires ou radiaux, de nuances de couleurs ou d'arrière-plans dégradés.

De plus, Gradient Generator génère de 1 à 40 dégradés échelonnés à partir de deux couleurs de votre choix. Chaque dégradé est automatiquement présenté aux formats HEX, HSL et RVB. Il vous suffit de cliquer sur la valeur et elle sera immédiatement copiée dans votre presse-papiers.

Générateur de dégradés de couleurs CSS 

La sélection manuelle des couleurs pour créer un dégradé de couleurs nécessite une expérience en conception et une bonne compréhension de l'harmonie des couleurs. Si vous avez besoin d'un dégradé pour un arrière-plan ou pour des éléments d'interface utilisateur mais que vous ne vous sentez pas assez confiant pour vous attaquer à la tâche vous-même (ou si vous êtes pressé), le générateur de dégradé de couleurs que les gens de My Brand New Logo ont créé a vous avez le dos.

Propulsé par des algorithmes de dégradé de couleurs, le générateur crée des dégradés bien équilibrés basés sur une couleur que vous sélectionnez. Il existe quatre styles de dégradés différents qui vont du subtil à l'effet nacré et au dégradé de couleurs intense et profond. Vous pouvez ajuster le dégradé avec des curseurs et, une fois que vous êtes satisfait du résultat, copier-coller le code CSS généré pour l'utiliser dans votre projet.

Générateur d'échelle de type CSS 

Et si vous vouliez créer un système typographique fiable qui fonctionne aussi bien sur mobile que sur ordinateur ? Habituellement, vous vous basez sur des échelles typographiques établies, qui fournissent une hiérarchie typographique pour tout, des paragraphes aux légendes et en-têtes. Type-Scale de Jeremy Church est un petit outil fantastique qui vous aide à créer une échelle typographique et à l'exporter en CSS. Les petites échelles conviennent généralement bien aux vues mobiles, les échelles moyennes peuvent bien fonctionner pour la vue de bureau et les grandes échelles peuvent bien fonctionner pour les sites marketing.

L'outil fournit 8 échelles de caractères harmonieuses prédéfinies (mais vous pouvez également en définir une personnalisée), de la tierce majeure à la quinte parfaite et générer une séquence de tailles de police avec un taux d'incrémentation géométrique particulier. Vous pouvez ajuster les paramètres tels que line-heightle poids corporel, affiner le texte d'aperçu et obtenir le CSS généré - ou le modifier avec un spécimen de type sur CodePen. Alternativement, vous pouvez également consulter le bon vieux ModularScale.com de Tim Brown.

Un autre outil charmant est un calculateur d'échelle typographique de Jean-Lou Desire qui, contrairement aux outils de Tim et Jeremy, génère une échelle modulaire en utilisant trois propriétés de définition (le terme initial, le rapport d'incrémentation et le nombre de tailles dans l'échelle) similaires à la gamme musicale. Le résultat est un dimensionnement plus fluide pour les concepteurs, avec quelques options supplémentaires pour composer plus de valeurs, par exemple pour des notes d'accompagnement plus petites ou de grands blocs de citation.

Calculateur de hauteur de ligne 

Si vous construisez une échelle de texte basée sur une grille de base, vous devez répondre à une question délicate : quelle est la bonne hauteur de ligne pour chaque taille de texte sur votre échelle ? Le calculateur Good Line-Height de Fran Pérez fait le calcul pour vous.

Pour calculer les résultats, il vous suffit de saisir trois paramètres : la taille de la police, le multiplicateur et la hauteur des lignes de la grille. La taille de la police est la clé pour garantir que votre texte repose bien sur la grille de base, quelle que soit la taille du texte, le multiplicateur vous permet de contrôler la distance entre les lignes et la hauteur des lignes de la grille définit la hauteur de chaque ligne dans votre grille de base.

Générateur de cap fluide 

Grâce à clamp(), vous pouvez définir une taille de police qui grandit avec la fenêtre d'affichage mais qui ne descend pas en dessous ou au-dessus de la taille de police minimale et maximale que vous définissez. Pour vous aider à trouver les valeurs CSS parfaites pour votre en-tête fluide et à contrôler sa mise à l'échelle dans différentes fenêtres d'affichage, Erik André Jakobsen a créé l' outil Typographie fluide .

Vous entrez la taille de police minimale et maximale ainsi que la largeur minimale et maximale de la fenêtre d'affichage, et l'outil calcule non seulement la clamp()règle pour vous, mais vous montre également une démonstration de ce à quoi ressemblent les spécifications lorsqu'elles sont appliquées à un en-tête réel.

Un autre générateur utile pour vous aider à comprendre la clamp()règle de votre projet vient de Maxime Roudier. Il fonctionne de manière similaire à l'outil d'Erik, mais vous permet également de sélectionner une famille de polices et une plage que vous ajustez avec un curseur au lieu d'entrer des valeurs minimales et maximales concrètes.

Générateur de chavirage CSS 

Pour minimiser les changements de mise en page désorientants et coûteux lors du chargement, nous devons faire correspondre la police de secours à la police Web. Le matcher de style de police de Monica Dinculescu nous permet de minimiser le décalage discordant en faisant correspondre la police de secours et les hauteurs et largeurs x de la police Web prévue et nous pourrions utiliser f-mods pour faire la même chose avec de nouvelles propriétés CSS.

Par défaut, de nombreuses polices sont livrées avec des marges et des interlignes prédéfinis, donc si une police de secours et une police Web sont différentes, la mise en page entière changera de manière significative. Capsize ajuste la taille de la police, de sorte que la hauteur des lettres majuscules soit un multiple de votre grille. Il le fait en coupant l'espace au-dessus des lettres majuscules et en dessous de la ligne de base. Ainsi, en conservant la même hauteur de ligne dans une police de secours et une police Web, l'outil génère des "nombres magiques" pour s'assurer que le changement est transparent.

Générateur de sélecteurs complexes CSS 

Imaginez que vous deviez créer une table d'éléments. Vous voudrez peut-être les garder sur la même ligne s'il y a 3 éléments ou moins, mais s'étendre ensuite sur deux lignes complètes pour 6 et 8 éléments, tout en n'étant qu'une liste de cartes avec 10 éléments et plus. Comment le construiriez-vous ? Bien que bon nombre de ces situations puissent être corrigées avec CSS Grid et Flexbox, vous pourriez parfois vous retrouver avec une situation assez complexe qui nécessiterait un sélecteur CSS assez complexe.

À cette fin, Drew Minns a construit un générateur de sélecteurs de quantité - des sélecteurs CSS complexes qui permettent d'appliquer des styles aux éléments en fonction du nombre de frères et sœurs. Par exemple, lorsque vous souhaitez appliquer des styles à tous les éléments lorsqu'il y a au moins 5 éléments et frères, ou au plus 10, ou peut-être entre 3 et 5 éléments.

Le sélecteur final n'est peut-être pas facile à comprendre, il vaut donc la peine de s'assurer que vous fournissez une explication appropriée dans le code de ce qu'il est censé cibler.

clip-pathGénérateur  CSS

Grâce à la clip-pathpropriété, nous pouvons créer des formes complexes en CSS en coupant un élément à une forme de base, qu'il s'agisse d'un simple cercle, d'un polygone fantaisie ou même d'une source SVG. Le clip-pathcréateur de CSS Clippy est un outil visuel qui vous aide à créer et à personnaliser des chemins de détourage directement dans votre navigateur.

Pour commencer, vous sélectionnez une forme et un arrière-plan de démonstration dans le menu de Clippy. Vous pouvez ensuite faire glisser les points de la forme pour créer la forme de votre choix. Le code CSS à code couleur reflétera non seulement vos modifications instantanément, mais les mettra également en évidence pour vous aider à comprendre comment vos choix influencent le code.

Si tout clip-pathcela vous semble encore un peu abstrait ou si vous cherchez un exemple sympa de la façon de l'utiliser dans un projet réel, assurez-vous de vérifier l' effet pop-out que Mikael Ainalem a créé avec clip-path.

Générateur de disposition de grille CSS 

CSS Grid Layout peut être assez simple , mais parfois vous voudrez peut-être jouer avec les propriétés Grid pour déterminer quel serait le bon comportement pour votre mise en page. Pour commencer, nous pouvons utiliser CSS Grid Generator de Sarah Drasner, Griddy de Drew Minns , CSS Grid Cheat Sheet Generator d'Ali Alaa et LayoutIt de LenioLabs - ils vous permettent tous de définir la grille et les conteneurs sur la grille, ainsi que les lacunes, et il génère le CSS tout de suite. Si vous avez besoin de plus de conseils sur Flexbox, Flexbox Patterns contient de nombreux exemples avec lesquels jouer.

Ou vous pouvez utiliser une seule ligne de solutions CSS. Una Kravets a construit 1-Line Layouts , une collection de dix techniques modernes de mise en page et de dimensionnement CSS. Commençant par le plus grand mystère de tous (le centrage) et couvrant tout, de la mise en page classique du Saint Graal et de la "crêpe déconstruite" à l'application clamp()et au respect du rapport hauteur/largeur, la collection d'Una regorge de petites friandises qui ne manqueront pas de vous rendre la vie en tant que développeur Plus facile.

Chaque technique est accompagnée d'une démo, d'un CodePen à bricoler et d'informations sur la prise en charge du navigateur. Una a également enregistré une vidéo dans laquelle elle explique plus en détail chaque merveille d'une ligne. Que vous soyez débutant ou professionnel, cette ressource vous sera certainement utile.

Générateur de grilles composées CSS 

Les grilles composées offrent une énorme flexibilité et beaucoup de place pour la créativité. Composées de deux ou plusieurs grilles de tout type (colonne, modulaire, symétrique et asymétrique) sur une même page, elles peuvent occuper des zones distinctes ou se chevaucher.

Un petit outil pour vous aider à générer des grilles composées et gagner du temps en dessinant des variations sans fin vient maintenant de Michelle Barker : le générateur de grilles composées . Tout ce que vous avez à faire est d'entrer le nombre de colonnes pour chacune de vos grilles, et elles seront fusionnées dans une grille composée. Un excellent ajout à votre boîte à outils numérique. Et si vous avez besoin de créer une grille modulaire, une grille multicolonne ou une grille manuscrite pour votre projet d'impression, la calculatrice de grille modulaire fournit une explication détaillée pour y parvenir dans InDesign.

Filtres CSS et générateur de modes de fusion 

Le drop-shadowfiltre CSS a un excellent support mais est plutôt sous-estimé - une vraie honte étant donné qu'il pourrait vous faire gagner beaucoup de temps à pirater avec box-shadow.

Comme Michelle Barker l'explique dans un article de blog , drop-shadowvous permet d'utiliser des valeurs pour le décalage x, le décalage y, le rayon de flou et la couleur, tout comme son frère le plus important box-shadow. Cependant, il y a un gros avantage : l'ombre ne correspond pas à la boîte englobante d'un élément (qui est souvent là où le piratage commence lors de l'utilisation de box-shadow) mais aux parties non transparentes d'une image. Parfait si vous souhaitez appliquer une ombre portée à un logo PNG ou SVG transparent, par exemple, ou même à une forme découpée.

Il existe de nombreux filtres CSS , donc si vous avez besoin de trouver le bon ensemble de filtres pour votre projet, l'éditeur de filtres CSS de Mads Stoumann pour tester tous les filtres pris en charge , ainsi que quelques cadeaux que Mads a également fournis. Évidemment, le CSS est également généré à la volée.

Au-delà des filtres, il existe également de nombreuses options pour les modes de fusion CSS . Si vous souhaitez avoir un aperçu de la manière dont certains effets visuels pourraient fonctionner ensemble, vous pouvez utiliser CSS Duotone Generator de Rick Metzger . L'outil comprend des options de zoom, d'espacement, de flou et d'opacité de l'image, mais également tous les modes de fusion pour les images de premier plan et d'arrière-plan. Bien sûr, l'outil génère également du HTML et du CSS.

Générateur d'espaces réservés pour images floues 

Un espace réservé d'image est un moyen efficace d'améliorer les performances perçues d'un site lors du chargement d'une image. Dans sa quête pour trouver les espaces réservés aux images les plus rapides et les plus beaux pour le Web, Joe Bell a décidé de trouver lui-même une solution. Le résultat : Placeholder .

 

Propulsé par une collection d'assistants Node.js, Plaiceholder transforme vos images en images d'espace réservé légères et floues. Vous avez le choix entre plusieurs approches : CSS (qui est recommandé), SVG, Base 64, Blurhash et l'expérimental Blurhash vers CSS .

Générateur de héros 

Êtes-vous fatigué de mettre en œuvre le même héros encore et encore? Le générateur de héros de Sarah Drasner est là pour vous aider. Il vous permet de générer des héros réactifs en quelques clics, en fonction de vos préférences.

Vous décidez du type de dégradé que vous souhaitez appliquer à votre image de héros, de la réduction du dégradé et de l'espacement des titres. Et si vous souhaitez inclure un bouton, le générateur vous offre également des options pour personnaliser les couleurs du bouton (y compris la couleur de survol et de dégradé) et le rayon du bouton. Une fois que vous êtes satisfait du résultat, vous pouvez copier et coller le code et l'utiliser immédiatement dans votre projet. Un vrai gain de temps !

Générateur de cartes-images 

Les images cliquables vous permettent de créer des zones cliquables sur une image. Si vous souhaitez créer une image cliquable mais que vous ne voulez pas jouer avec les coordonnées pour définir les régions cliquables, imagemaps.net est là pour vous aider.

Le site dispose d'une interface utilisateur graphique pour rendre le processus plus simple. Une fois que vous avez téléchargé votre image, vous pouvez utiliser les outils Plume, Rectangle et Polygone pour dessiner vos régions cliquables. Pour les personnaliser et, surtout, leur donner leur fonctionnalité, vous pouvez ensuite nommer chaque région, lui attribuer un lien et ajuster sa couleur, sa hauteur et sa largeur. Un clic sur le bouton "Exporter" vous fournit la carte HTML et le code React que vous pouvez copier et coller dans votre projet.

Générateur d'animations CSS 

Il est assez facile de faire la différence entre une animation qui semble un peu décalée et une animation qui est juste bien faite. Mais ajuster manuellement les animations ou les transitions des images clés peut prendre beaucoup de temps. Animista fournit une bibliothèque d'animations et de transitions que vous pouvez utiliser immédiatement. Il existe de nombreux préréglages pour les entrées et les sorties, les surlignages de texte, les actions des boutons et les effets d'arrière-plan. Une fois que vous avez défini une animation, vous pouvez copier-coller l'extrait CSS de l'animation, ainsi que le code généré par Autoprefixer.

CSS Wand fournit des animations de survol et de chargement , mais vous pouvez également utiliser les animations Ladda (boutons avec indicateurs de chargement intégrés) et Eric Spinners (avec intégration Vue.js). Et peut-être aimeriez-vous ajouter une touche fantaisiste aux transitions de survol avec Boop ! – gardez simplement à l'esprit de mettre à l'échelle avec des pseudo-éléments et de respecter les préférences de mouvement pour les utilisateurs qui optent pour un mouvement réduit.

Générateur de cuboïde CSS 3D 

Jhey Tompkins est connu pour ses créations CSS 3D amusantes. Peut-être avez-vous déjà vu son hélicoptère qui se déplace comme par magie lorsque vous déplacez la souris ? La base de l'hélicoptère et d'autres expériences comme celles-ci sont des cuboïdes CSS réactifs qui peuvent être contrôlés avec des propriétés personnalisées CSS étendues.

Maintenant, si vous voulez aussi donner vie à vos idées 3D, le générateur CSS Cuboid 3D de Jhey est là pour vous aider. Ajustez simplement les curseurs pour déterminer la hauteur, la largeur, la profondeur et la teinte de votre cuboïde, et vous avez déjà le code dont vous avez besoin pour faire rouler, tordre, glisser ou tout ce que vous prévoyez d'autre. Amusez-vous!

Générateur de doodles CSS 

Nous pouvons donner vie aux mises en page les plus sophistiquées avec CSS, mais nous pouvons également générer des illustrations et des griffonnages ludiques. Yuan Chuan a construit , un composant web pour dessiner des motifs avec CSS . Le composant comprend de nombreuses fonctions utilitaires et propriétés abrégées avec lesquelles jouer. En conséquence, le composant génère une grille de divs avec le CSS simple. Le code source est également disponible sur GitHub .

Petits assistants de développement Web utiles 

Si vous avez besoin de quelques outils supplémentaires dans votre vie, heureusement, il y a beaucoup de bons vieux développeurs Web qui rassemblent leurs outils utiles préférés en un seul endroit nommé Tiny Helpers . Maintenu par Stefan Judis, vous êtes sûr de trouver toutes sortes d'outils : des API, de l'accessibilité et de la couleur, aux polices, aux performances, aux expressions régulières, au SVG et à l'Unicode.

Bien sûr, il y en a beaucoup d'autres partagés sur d'autres plateformes, comme le fil Twitter très utile de Josh W. Comeau mais aussi de Stefan Judis lui-même. Peu importe ce que vous avez hâte de trouver qui vous aidera à travailler mieux et plus rapidement, vous le trouverez forcément là-bas !

Source : https://www.smashingmagazine.com

#css

What is GEEK

Buddha Community

Tout ce que vous devez savoir sur les générateurs CSS

Dans ce didacticiel, nous examinerons des générateurs utiles pour tout ce qui concerne le CSS : des dégradés aux ombres portées et des courbes de Bézier aux triangles et aux échelles de type. 

Juste quelques outils utiles pour votre ceinture à outils, à garder à portée de main.

Générateur d'ombres CSS 

Vous recherchez un outil qui générera automatiquement du code CSS pour des ombres de boîtes en couches vraiment lisses ? Eh bien, vous allez adorer SmoothShadow . Inspiré d'un article écrit par Tobias Ahlin Bjerrome , cet outil astucieux a été créé pour aider quiconque à générer le code dont il a besoin sur place.

Une fois que vous l'aurez essayé, il sera difficile de ne pas l'utiliser. Le petit outil vous permet de concevoir visuellement une ombre de boîte lisse en couches, mais également de modifier l'alpha, le décalage et le flou avec des courbes d'atténuation individuelles. Et c'est encore mieux : le créateur de l'outil, Philipp Brumm , a également publié SmoothShadow en tant que plugin Figma , afin que vous puissiez optimiser votre flux de travail comme vous l'avez toujours voulu.

Générateur de rayon de bordure CSS  #

Lorsque nous pensons à border-radius, nous pensons généralement à quelques valeurs simples - peut-être 8px ou 11px, ou peut-être 16px. Cependant, cela border-radiuspeut être assez fantaisiste , et le générateur fancy-border-radius vous permet de les générer facilement. L'outil fournit une visualisation non seulement des formes rondes simples, mais également des formes organiques, en utilisant huit valeurs combinées. Essentiellement, ce que nous créons, ce sont des ellipses superposées qui créent la forme finale. L'outil est également disponible en tant qu'outil CLI , vous pouvez donc également l'exécuter localement.

Générateur de courbes Cubic-Bezier 

Parfois, une animation ne semble pas juste, n'est-ce pas ? Peut-être que la durée est désactivée ou que l'assouplissement est bizarre, et le comprendre peut prendre un certain temps. Avec le cubic-bezier de Léa Verou , vous pouvez prévisualiser et comparer des animations , les ralentir et même les ajuster visuellement. Et puis copiez-collez l'extrait CSS pour le brancher immédiatement à votre projet.

Et si vous avez besoin d'animations CSS @keyframe basiques ou complexes, Keyframes.app fournit un éditeur visuel de chronologie similaire à un logiciel de montage vidéo. Vous pouvez ajouter des étapes, modifier la taille et la position, appliquer des transformations et des changements de couleur et faire copier-coller également le CSS. Ah et sans oublier le panneau Animation dans Chrome et Firefox pour le débogage également.

Atténuation des dégradés 

Avec les dégradés, nous nous appuyons souvent sur des dégradés linéaires, passant d'une couleur à une autre. Cependant, les dégradés linéaires ont des bords durs là où ils commencent ou se terminent. Il existe un moyen d'améliorer légèrement les dégradés, avec des fonctions d'accélération. Andreas Larsen a donc construit un petit éditeur, Easing Gradients Editor , qui nous permet de créer et de prévisualiser des dégradés d'accélération en CSS. L'outil est également disponible sous forme de plugin Sketch et de plugin PostCSS . Vous pouvez utiliser un sélecteur de couleurs, mais malheureusement, vous ne pouvez pas encore ajouter de valeur de couleur HEX réelle.

Palettes de couleurs de visualisation de données 

Parfois, vous avez besoin d'un type de couleur très spécifique pour une tâche très spécifique. Par exemple, si vous travaillez sur un projet de visualisation de données, par exemple des graphiques circulaires, des graphiques à barres groupées, des cartes, vous avez probablement besoin d'une série de couleurs visuellement équidistantes . C'est alors que le sélecteur de couleurs de données LearnUI peut devenir très utile. Dans de tels cas, il est préférable d'utiliser une gamme de teintes, afin que les utilisateurs puissent identifier les différences plus rapidement. Il est en effet plus facile de distinguer le jaune de l'orange que le bleu du bleu-mais-15%-plus clair .

Avec l'outil, vous choisissez le nombre de couleurs dont vous avez besoin et si vous avez besoin d'une couleur d'arrière-plan claire ou foncée, et choisissez si vous voulez une palette par défaut, une palette de teinte unique ou une échelle de couleurs divergente. Une fois que vous l'avez, vous pouvez copier les valeurs hexadécimales et les exporter au format SVG pour les utiliser dans Sketch, Figma ou Adobe XD.

LearnUI fournit également un générateur de couleurs accessible et un générateur de dégradé assez sophistiqué , avec différents types de dégradé, interpolation, angle, assouplissement et la douceur que vous souhaitez que le dégradé soit.

Des nuances de couleur CSS aux triangles et aux fausses données 

Imaginez que vous ayez juste besoin de trouver des styles de triangle CSS pour les éléments et les pseudo-éléments. Ou peut-être affiner un peu la palette de couleurs en explorant les teintes et les nuances d'une couleur donnée. Ou peut-être générer un dégradé CSS linéaire et radial pour une section de la page. Il n'est pas nécessaire de tout faire manuellement ou d'essayer de trouver ces extraits CSS partout sur le Web. Vous pouvez toujours les trouver sur Omatsuri .

Omatsuri signifie festival en japonais, et le site est un joli petit festival d'outils de navigation open source pour un usage quotidien. Sur le site, vous trouverez un générateur de triangles, un générateur de nuances de couleurs, un générateur de dégradés, des séparateurs de pages, un compresseur SVG, un convertisseur SVG → JSX , un générateur de fausses données, des curseurs CSS et des codes d'événement de clavier. Conçu et construit par Vitaly Rtishchev et Vlad Shilov. Le code source du site est également disponible.

Superposition CSS avec générateur de contraste élevé 

Si vous souhaitez que le texte se démarque mieux sur une image d'arrière-plan, il existe une petite astuce : vous pouvez utiliser une superposition CSS linear-gradientavec une certaine opacité au-dessus de l'image pour améliorer le contraste des couleurs. Spotify , par exemple, utilise la technique.

Bien que tout cela ne nécessite qu'une seule ligne de code, il reste encore une question à résoudre : comment déterminer l'opacité à utiliser pour la superposition ? Le Optimal Overlay Finder vous aide à le découvrir. Vous téléchargez une image, entrez votre texte et choisissez vos couleurs de superposition et de texte, et l'outil vous montre un aperçu de ce à quoi ressemble la superposition lorsqu'elle est appliquée à votre image, ainsi que l'opacité optimale de la superposition. Un petit détail qui va un long chemin.

Générateur de palette de couleurs CSS 

Il existe de nombreux outils fantastiques pour générer votre palette de couleurs, mais Coolors.co est un petit outil astucieux qui en fait juste assez pour générer des palettes et explorer différentes nuances d'une couleur. Vous pouvez créer une palette à partir de la photo ou d'un collage de photos, tester le daltonisme et régler rapidement la teinte, la saturation, la luminosité et la température. Évidemment, il propose également des palettes de couleurs tendance .

Vous pouvez également produire une palette de dégradés entre deux couleurs et créer et exporter votre propre dégradé en CSS. L'outil est disponible sous forme d'application iOS, de module complémentaire Adobe et d'extension Chrome.

Et si vous avez besoin de quelque chose de légèrement plus sophistiqué pour les dégradés dans votre boîte à outils, CSSGradient.io est un autre outil pour tous vos besoins en dégradés, qu'il s'agisse de dégradés linéaires ou radiaux, de nuances de couleurs ou d'arrière-plans dégradés.

De plus, Gradient Generator génère de 1 à 40 dégradés échelonnés à partir de deux couleurs de votre choix. Chaque dégradé est automatiquement présenté aux formats HEX, HSL et RVB. Il vous suffit de cliquer sur la valeur et elle sera immédiatement copiée dans votre presse-papiers.

Générateur de dégradés de couleurs CSS 

La sélection manuelle des couleurs pour créer un dégradé de couleurs nécessite une expérience en conception et une bonne compréhension de l'harmonie des couleurs. Si vous avez besoin d'un dégradé pour un arrière-plan ou pour des éléments d'interface utilisateur mais que vous ne vous sentez pas assez confiant pour vous attaquer à la tâche vous-même (ou si vous êtes pressé), le générateur de dégradé de couleurs que les gens de My Brand New Logo ont créé a vous avez le dos.

Propulsé par des algorithmes de dégradé de couleurs, le générateur crée des dégradés bien équilibrés basés sur une couleur que vous sélectionnez. Il existe quatre styles de dégradés différents qui vont du subtil à l'effet nacré et au dégradé de couleurs intense et profond. Vous pouvez ajuster le dégradé avec des curseurs et, une fois que vous êtes satisfait du résultat, copier-coller le code CSS généré pour l'utiliser dans votre projet.

Générateur d'échelle de type CSS 

Et si vous vouliez créer un système typographique fiable qui fonctionne aussi bien sur mobile que sur ordinateur ? Habituellement, vous vous basez sur des échelles typographiques établies, qui fournissent une hiérarchie typographique pour tout, des paragraphes aux légendes et en-têtes. Type-Scale de Jeremy Church est un petit outil fantastique qui vous aide à créer une échelle typographique et à l'exporter en CSS. Les petites échelles conviennent généralement bien aux vues mobiles, les échelles moyennes peuvent bien fonctionner pour la vue de bureau et les grandes échelles peuvent bien fonctionner pour les sites marketing.

L'outil fournit 8 échelles de caractères harmonieuses prédéfinies (mais vous pouvez également en définir une personnalisée), de la tierce majeure à la quinte parfaite et générer une séquence de tailles de police avec un taux d'incrémentation géométrique particulier. Vous pouvez ajuster les paramètres tels que line-heightle poids corporel, affiner le texte d'aperçu et obtenir le CSS généré - ou le modifier avec un spécimen de type sur CodePen. Alternativement, vous pouvez également consulter le bon vieux ModularScale.com de Tim Brown.

Un autre outil charmant est un calculateur d'échelle typographique de Jean-Lou Desire qui, contrairement aux outils de Tim et Jeremy, génère une échelle modulaire en utilisant trois propriétés de définition (le terme initial, le rapport d'incrémentation et le nombre de tailles dans l'échelle) similaires à la gamme musicale. Le résultat est un dimensionnement plus fluide pour les concepteurs, avec quelques options supplémentaires pour composer plus de valeurs, par exemple pour des notes d'accompagnement plus petites ou de grands blocs de citation.

Calculateur de hauteur de ligne 

Si vous construisez une échelle de texte basée sur une grille de base, vous devez répondre à une question délicate : quelle est la bonne hauteur de ligne pour chaque taille de texte sur votre échelle ? Le calculateur Good Line-Height de Fran Pérez fait le calcul pour vous.

Pour calculer les résultats, il vous suffit de saisir trois paramètres : la taille de la police, le multiplicateur et la hauteur des lignes de la grille. La taille de la police est la clé pour garantir que votre texte repose bien sur la grille de base, quelle que soit la taille du texte, le multiplicateur vous permet de contrôler la distance entre les lignes et la hauteur des lignes de la grille définit la hauteur de chaque ligne dans votre grille de base.

Générateur de cap fluide 

Grâce à clamp(), vous pouvez définir une taille de police qui grandit avec la fenêtre d'affichage mais qui ne descend pas en dessous ou au-dessus de la taille de police minimale et maximale que vous définissez. Pour vous aider à trouver les valeurs CSS parfaites pour votre en-tête fluide et à contrôler sa mise à l'échelle dans différentes fenêtres d'affichage, Erik André Jakobsen a créé l' outil Typographie fluide .

Vous entrez la taille de police minimale et maximale ainsi que la largeur minimale et maximale de la fenêtre d'affichage, et l'outil calcule non seulement la clamp()règle pour vous, mais vous montre également une démonstration de ce à quoi ressemblent les spécifications lorsqu'elles sont appliquées à un en-tête réel.

Un autre générateur utile pour vous aider à comprendre la clamp()règle de votre projet vient de Maxime Roudier. Il fonctionne de manière similaire à l'outil d'Erik, mais vous permet également de sélectionner une famille de polices et une plage que vous ajustez avec un curseur au lieu d'entrer des valeurs minimales et maximales concrètes.

Générateur de chavirage CSS 

Pour minimiser les changements de mise en page désorientants et coûteux lors du chargement, nous devons faire correspondre la police de secours à la police Web. Le matcher de style de police de Monica Dinculescu nous permet de minimiser le décalage discordant en faisant correspondre la police de secours et les hauteurs et largeurs x de la police Web prévue et nous pourrions utiliser f-mods pour faire la même chose avec de nouvelles propriétés CSS.

Par défaut, de nombreuses polices sont livrées avec des marges et des interlignes prédéfinis, donc si une police de secours et une police Web sont différentes, la mise en page entière changera de manière significative. Capsize ajuste la taille de la police, de sorte que la hauteur des lettres majuscules soit un multiple de votre grille. Il le fait en coupant l'espace au-dessus des lettres majuscules et en dessous de la ligne de base. Ainsi, en conservant la même hauteur de ligne dans une police de secours et une police Web, l'outil génère des "nombres magiques" pour s'assurer que le changement est transparent.

Générateur de sélecteurs complexes CSS 

Imaginez que vous deviez créer une table d'éléments. Vous voudrez peut-être les garder sur la même ligne s'il y a 3 éléments ou moins, mais s'étendre ensuite sur deux lignes complètes pour 6 et 8 éléments, tout en n'étant qu'une liste de cartes avec 10 éléments et plus. Comment le construiriez-vous ? Bien que bon nombre de ces situations puissent être corrigées avec CSS Grid et Flexbox, vous pourriez parfois vous retrouver avec une situation assez complexe qui nécessiterait un sélecteur CSS assez complexe.

À cette fin, Drew Minns a construit un générateur de sélecteurs de quantité - des sélecteurs CSS complexes qui permettent d'appliquer des styles aux éléments en fonction du nombre de frères et sœurs. Par exemple, lorsque vous souhaitez appliquer des styles à tous les éléments lorsqu'il y a au moins 5 éléments et frères, ou au plus 10, ou peut-être entre 3 et 5 éléments.

Le sélecteur final n'est peut-être pas facile à comprendre, il vaut donc la peine de s'assurer que vous fournissez une explication appropriée dans le code de ce qu'il est censé cibler.

clip-pathGénérateur  CSS

Grâce à la clip-pathpropriété, nous pouvons créer des formes complexes en CSS en coupant un élément à une forme de base, qu'il s'agisse d'un simple cercle, d'un polygone fantaisie ou même d'une source SVG. Le clip-pathcréateur de CSS Clippy est un outil visuel qui vous aide à créer et à personnaliser des chemins de détourage directement dans votre navigateur.

Pour commencer, vous sélectionnez une forme et un arrière-plan de démonstration dans le menu de Clippy. Vous pouvez ensuite faire glisser les points de la forme pour créer la forme de votre choix. Le code CSS à code couleur reflétera non seulement vos modifications instantanément, mais les mettra également en évidence pour vous aider à comprendre comment vos choix influencent le code.

Si tout clip-pathcela vous semble encore un peu abstrait ou si vous cherchez un exemple sympa de la façon de l'utiliser dans un projet réel, assurez-vous de vérifier l' effet pop-out que Mikael Ainalem a créé avec clip-path.

Générateur de disposition de grille CSS 

CSS Grid Layout peut être assez simple , mais parfois vous voudrez peut-être jouer avec les propriétés Grid pour déterminer quel serait le bon comportement pour votre mise en page. Pour commencer, nous pouvons utiliser CSS Grid Generator de Sarah Drasner, Griddy de Drew Minns , CSS Grid Cheat Sheet Generator d'Ali Alaa et LayoutIt de LenioLabs - ils vous permettent tous de définir la grille et les conteneurs sur la grille, ainsi que les lacunes, et il génère le CSS tout de suite. Si vous avez besoin de plus de conseils sur Flexbox, Flexbox Patterns contient de nombreux exemples avec lesquels jouer.

Ou vous pouvez utiliser une seule ligne de solutions CSS. Una Kravets a construit 1-Line Layouts , une collection de dix techniques modernes de mise en page et de dimensionnement CSS. Commençant par le plus grand mystère de tous (le centrage) et couvrant tout, de la mise en page classique du Saint Graal et de la "crêpe déconstruite" à l'application clamp()et au respect du rapport hauteur/largeur, la collection d'Una regorge de petites friandises qui ne manqueront pas de vous rendre la vie en tant que développeur Plus facile.

Chaque technique est accompagnée d'une démo, d'un CodePen à bricoler et d'informations sur la prise en charge du navigateur. Una a également enregistré une vidéo dans laquelle elle explique plus en détail chaque merveille d'une ligne. Que vous soyez débutant ou professionnel, cette ressource vous sera certainement utile.

Générateur de grilles composées CSS 

Les grilles composées offrent une énorme flexibilité et beaucoup de place pour la créativité. Composées de deux ou plusieurs grilles de tout type (colonne, modulaire, symétrique et asymétrique) sur une même page, elles peuvent occuper des zones distinctes ou se chevaucher.

Un petit outil pour vous aider à générer des grilles composées et gagner du temps en dessinant des variations sans fin vient maintenant de Michelle Barker : le générateur de grilles composées . Tout ce que vous avez à faire est d'entrer le nombre de colonnes pour chacune de vos grilles, et elles seront fusionnées dans une grille composée. Un excellent ajout à votre boîte à outils numérique. Et si vous avez besoin de créer une grille modulaire, une grille multicolonne ou une grille manuscrite pour votre projet d'impression, la calculatrice de grille modulaire fournit une explication détaillée pour y parvenir dans InDesign.

Filtres CSS et générateur de modes de fusion 

Le drop-shadowfiltre CSS a un excellent support mais est plutôt sous-estimé - une vraie honte étant donné qu'il pourrait vous faire gagner beaucoup de temps à pirater avec box-shadow.

Comme Michelle Barker l'explique dans un article de blog , drop-shadowvous permet d'utiliser des valeurs pour le décalage x, le décalage y, le rayon de flou et la couleur, tout comme son frère le plus important box-shadow. Cependant, il y a un gros avantage : l'ombre ne correspond pas à la boîte englobante d'un élément (qui est souvent là où le piratage commence lors de l'utilisation de box-shadow) mais aux parties non transparentes d'une image. Parfait si vous souhaitez appliquer une ombre portée à un logo PNG ou SVG transparent, par exemple, ou même à une forme découpée.

Il existe de nombreux filtres CSS , donc si vous avez besoin de trouver le bon ensemble de filtres pour votre projet, l'éditeur de filtres CSS de Mads Stoumann pour tester tous les filtres pris en charge , ainsi que quelques cadeaux que Mads a également fournis. Évidemment, le CSS est également généré à la volée.

Au-delà des filtres, il existe également de nombreuses options pour les modes de fusion CSS . Si vous souhaitez avoir un aperçu de la manière dont certains effets visuels pourraient fonctionner ensemble, vous pouvez utiliser CSS Duotone Generator de Rick Metzger . L'outil comprend des options de zoom, d'espacement, de flou et d'opacité de l'image, mais également tous les modes de fusion pour les images de premier plan et d'arrière-plan. Bien sûr, l'outil génère également du HTML et du CSS.

Générateur d'espaces réservés pour images floues 

Un espace réservé d'image est un moyen efficace d'améliorer les performances perçues d'un site lors du chargement d'une image. Dans sa quête pour trouver les espaces réservés aux images les plus rapides et les plus beaux pour le Web, Joe Bell a décidé de trouver lui-même une solution. Le résultat : Placeholder .

 

Propulsé par une collection d'assistants Node.js, Plaiceholder transforme vos images en images d'espace réservé légères et floues. Vous avez le choix entre plusieurs approches : CSS (qui est recommandé), SVG, Base 64, Blurhash et l'expérimental Blurhash vers CSS .

Générateur de héros 

Êtes-vous fatigué de mettre en œuvre le même héros encore et encore? Le générateur de héros de Sarah Drasner est là pour vous aider. Il vous permet de générer des héros réactifs en quelques clics, en fonction de vos préférences.

Vous décidez du type de dégradé que vous souhaitez appliquer à votre image de héros, de la réduction du dégradé et de l'espacement des titres. Et si vous souhaitez inclure un bouton, le générateur vous offre également des options pour personnaliser les couleurs du bouton (y compris la couleur de survol et de dégradé) et le rayon du bouton. Une fois que vous êtes satisfait du résultat, vous pouvez copier et coller le code et l'utiliser immédiatement dans votre projet. Un vrai gain de temps !

Générateur de cartes-images 

Les images cliquables vous permettent de créer des zones cliquables sur une image. Si vous souhaitez créer une image cliquable mais que vous ne voulez pas jouer avec les coordonnées pour définir les régions cliquables, imagemaps.net est là pour vous aider.

Le site dispose d'une interface utilisateur graphique pour rendre le processus plus simple. Une fois que vous avez téléchargé votre image, vous pouvez utiliser les outils Plume, Rectangle et Polygone pour dessiner vos régions cliquables. Pour les personnaliser et, surtout, leur donner leur fonctionnalité, vous pouvez ensuite nommer chaque région, lui attribuer un lien et ajuster sa couleur, sa hauteur et sa largeur. Un clic sur le bouton "Exporter" vous fournit la carte HTML et le code React que vous pouvez copier et coller dans votre projet.

Générateur d'animations CSS 

Il est assez facile de faire la différence entre une animation qui semble un peu décalée et une animation qui est juste bien faite. Mais ajuster manuellement les animations ou les transitions des images clés peut prendre beaucoup de temps. Animista fournit une bibliothèque d'animations et de transitions que vous pouvez utiliser immédiatement. Il existe de nombreux préréglages pour les entrées et les sorties, les surlignages de texte, les actions des boutons et les effets d'arrière-plan. Une fois que vous avez défini une animation, vous pouvez copier-coller l'extrait CSS de l'animation, ainsi que le code généré par Autoprefixer.

CSS Wand fournit des animations de survol et de chargement , mais vous pouvez également utiliser les animations Ladda (boutons avec indicateurs de chargement intégrés) et Eric Spinners (avec intégration Vue.js). Et peut-être aimeriez-vous ajouter une touche fantaisiste aux transitions de survol avec Boop ! – gardez simplement à l'esprit de mettre à l'échelle avec des pseudo-éléments et de respecter les préférences de mouvement pour les utilisateurs qui optent pour un mouvement réduit.

Générateur de cuboïde CSS 3D 

Jhey Tompkins est connu pour ses créations CSS 3D amusantes. Peut-être avez-vous déjà vu son hélicoptère qui se déplace comme par magie lorsque vous déplacez la souris ? La base de l'hélicoptère et d'autres expériences comme celles-ci sont des cuboïdes CSS réactifs qui peuvent être contrôlés avec des propriétés personnalisées CSS étendues.

Maintenant, si vous voulez aussi donner vie à vos idées 3D, le générateur CSS Cuboid 3D de Jhey est là pour vous aider. Ajustez simplement les curseurs pour déterminer la hauteur, la largeur, la profondeur et la teinte de votre cuboïde, et vous avez déjà le code dont vous avez besoin pour faire rouler, tordre, glisser ou tout ce que vous prévoyez d'autre. Amusez-vous!

Générateur de doodles CSS 

Nous pouvons donner vie aux mises en page les plus sophistiquées avec CSS, mais nous pouvons également générer des illustrations et des griffonnages ludiques. Yuan Chuan a construit , un composant web pour dessiner des motifs avec CSS . Le composant comprend de nombreuses fonctions utilitaires et propriétés abrégées avec lesquelles jouer. En conséquence, le composant génère une grille de divs avec le CSS simple. Le code source est également disponible sur GitHub .

Petits assistants de développement Web utiles 

Si vous avez besoin de quelques outils supplémentaires dans votre vie, heureusement, il y a beaucoup de bons vieux développeurs Web qui rassemblent leurs outils utiles préférés en un seul endroit nommé Tiny Helpers . Maintenu par Stefan Judis, vous êtes sûr de trouver toutes sortes d'outils : des API, de l'accessibilité et de la couleur, aux polices, aux performances, aux expressions régulières, au SVG et à l'Unicode.

Bien sûr, il y en a beaucoup d'autres partagés sur d'autres plateformes, comme le fil Twitter très utile de Josh W. Comeau mais aussi de Stefan Judis lui-même. Peu importe ce que vous avez hâte de trouver qui vous aidera à travailler mieux et plus rapidement, vous le trouverez forcément là-bas !

Source : https://www.smashingmagazine.com

#css

Tout ce que vous devez savoir sur la propriété CSS Position

Apprenez tout ce que vous devez savoir sur la propriété de position CSS avec des exemples. Découvrez comment fonctionne la propriété de position CSS. Qu'est-ce que la propriété CSS Position ? Qu'est-ce que la position statique en CSS ? Quelles sont les positions relatives et absolues dans CSS ? Qu'est-ce que la position fixe en CSS ? Qu'est-ce que la position collante en CSS ?

Commençons 🎖️

Table des matières

• Qu'est-ce que la propriété CSS Position ?
• Qu'est-ce que la position statique en CSS ?
• Quelles sont les positions relative et absolue dans CSS ?
• Qu'est-ce que la position fixe en CSS ?
• Qu'est-ce que la position collante en CSS ?

Vous pouvez également regarder ce tutoriel sur YouTube si vous le souhaitez :

Qu'est-ce que la propriété position en CSS ?

Si vous souhaitez créer des sites Web époustouflants à l'aspect artistique, unique et magnifique, vous devez absolument apprendre à utiliser la propriété de position CSS. Voyons voir comment ça fonctionne.

En utilisant Flexbox ou Grid , vous pouvez créer un site web symétrique comme celui-ci : 👇

Site réalisé avec Flexbox

Avec la propriété position , vous pouvez créer un site web asymétrique comme celui-ci :👇

Site Web créé avec des propriétés de grille et de position

Vous ne pouvez pas placer votre contenu où vous le souhaitez en utilisant Flexbox et Grid. Vous êtes limité autour des axes X et Y. Regardez ce dessin pour voir ce que je veux dire : 👇

Disposition symétrique du contenu montrant les éléments placés respectivement sur les axes x et y

Vos boîtes suivront ces mesures exactes. 👆

Mais, en utilisant la propriété position , vous pouvez placer votre contenu où vous le souhaitez en détachant chaque élément des autres éléments.

Disposition de contenu asymétrique montrant les éléments placés indépendamment des axes x et y.

Vous pouvez placer vos boîtes où vous le souhaitez avec ce type de disposition. 👆 En d'autres termes, vous aurez la liberté de mouvement autour de votre écran.

Voici un autre exemple de ce que vous pouvez faire en utilisant la propriété position :

Un site Web asymétrique

Vous pouvez placer ou déplacer ces petits motifs de points et de vagues et l'image de beignet tout autour de la page ☝ où vous le souhaitez en utilisant la propriété de position.

Configuration du projet

Pour ce projet, vous pouvez utiliser n'importe quel éditeur de code sur lequel le plugin emmet est installé. Je vais utiliser CodePen.io .

HTML

À l'intérieur de la balise body, écrivez ce code : 👇

<div class="box-1"> </div>

CSS

Effacez les paramètres par défaut de votre navigateur et ajoutez ce CSS : 👇

*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

Stylez la classe box-1 comme ceci : 👇

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

Notre propriété de position a 5 valeurs :

1. relatif
2. absolu
3. statique
4. fixé
5. collant

Pour déplacer notre box, nous allons utiliser 4 propriétés :

• Haut, Bas
• Gauche droite

Qu'est-ce que la position statique en CSS ?

Cela n'a pas de cas d'utilisation . C'est la valeur par défaut de chaque élément.

Position par défaut de chaque élément Quelles sont les positions relative et absolue en CSS ?

La position relative et la position absolue fonctionnent de la même manière sauf dans un champ. Nous utilisons relativepour identifier la classe parent. Et nous utilisons absolutepour identifier les classes d'enfants.

Position VS position relative

Regardons 2 exemples 👇

Tout d'abord, expérimentons avec la relative valeur. Essayez ce code :

.box-1{
/* Other codes are here*/

   position: relative;
   left: 100px;
}

Voici le résultat que vous obtiendrez :👇

Nous pouvons dupliquer le même résultat en utilisant la absolutevaleur comme ceci : 👇

.box-1{
/* Other codes are here*/

   position: absolute;
   left: 100px;
}

Examinons la principale différence entre les positions relatives et absolues .

Position relative vs absolue en CSS

HTML

Écrivez ce code dans votre HTML : 👇

<body>
   <div class="box-1">
    
       <div class="box-2"> </div>	
        
   </div>
</body>

CSS

Stylez les boîtes avec le CSS suivant :👇

.box-1{
	width: 300px;
	height: 300px;
	background-color: skyblue;
	border: 2px solid black;
    margin: auto;
}

.box-2{
	width: 100px;
	height:100px;
	background-color: pink;
	border: 2px solid black;
}

Cela devrait ressembler à ceci : 👇

Le résultat est une boîte bleue avec une petite boîte rose en haut à gauche

Maintenant, nous allons sélectionner nos cours comme ceci : 👇

body{ }

.box-1{ }

.box-2{ }

Maintenant, écrivez ce code dans votre CSS : 👇

body{
	
}

.box-1{
/* This is the  👇 parent */
	position: relative;
}
.box-2{
/* This is the  👇 child */
	position: absolute;
	left: 100px;
}

Voici le résultat : 👇

Le résultat est que la boîte rose s'est déplacée de 100px vers la droite

Notez que .box-2 s'est déplacé de 100px depuis .box-1.

C'est parce que .box-1 est le parent et .box-2 est l' enfant .

Changeons-le à nouveau. Écrivez ce code dans votre CSS :

body{
/* This is the  👇 parent */
   position: relative;	
}

.box-1{

}
.box-2{
/* This is the  👇 child */
   position: absolute;
    left: 100px;
}

Voici maintenant le résultat : 👇

Le résultat est que la boîte rose s'est déplacée de 100px du corps

Notez que .box-2 s'est déplacé de 100px depuis l' élément body .

C'est parce que le corps est le parent et .box-2 est l' enfant .

Qu'est-ce que la position fixe en CSS ?

Cette valeur fixera la position de votre élément à l'écran même lorsque vous faites défiler le navigateur. Regardons quelques exemples pour voir comment cela fonctionne.

Exemple de position fixe

Écrivez ce code dans votre HTML. 👇 Une fois que vous écrivez lorem200, assurez-vous d'appuyer sur la touche Tab de votre clavier :

<div class="container">
	
	<p>lorem200</p>
    
	<div class="box-1"> fixed </div>
    
	<p>lorem200</p>		

</div>

Et voici le CSS :

.container{
	height: 3000px;
}

.box-1{
	height: 120px;
	width: 120px;
	background-color: skyblue;
	border: 2px solid black;
	
	display: grid;
	place-content: center;
}

Ajoutez ensuite ce CSS en bas :

.box-1{

	position: fixed;
	top: 100px;
	left: 200px;
}

Voici le résultat :👇

Vous pouvez voir que l'élément reste fixe même lorsque nous faisons défiler notre navigateur.

Qu'est-ce que la position collante en CSS ?

Après avoir fait défiler jusqu'à un certain point sur notre écran, cette valeur fixera la position de notre élément sur l'écran afin qu'il ne bouge pas.

Exemple de position collante

Ne modifiez rien dans votre code HTML et CSS actuel, à l'exception de cette valeur :

.box-1{
/*  Play with  👇 this value */
   position: sticky;
   top: 30px;
   left: 200px;
}

Voici le résultat : 👇

Vous pouvez voir qu'après un certain point de défilement , l'élément reste fixe exactement en haut de l'écran de notre navigateur.

Vous pouvez consulter ces sites Web pour voir comment la position collante fonctionne sur les sites Web réels.

• AwakeBoards
• Ferme
• LA TOUR

Conclusion

Désormais, vous pouvez créer de beaux sites Web en toute confiance et résoudre des problèmes de mise en page simples à l'aide de la propriété position.

Voici votre médaille pour avoir lu jusqu'au bout. ❤️

Source : https://www.freecodecamp.org

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Tout ce que vous devez savoir pour utiliser CSS Grid comme un pro

Tout ce que vous devez savoir pour utiliser CSS Grid comme un pro. Tous les outils CSS Grid dont vous avez besoin pour créer des mises en page de site Web de base et avancées de manière réactive qui s'affichent parfaitement sur tous les appareils. CSS Grid Handbook - Guide complet des conteneurs de grille et des éléments de grille

CSS Grid vous donne les outils pour créer des mises en page de site Web de base et avancées de manière réactive qui s'affichent parfaitement sur les appareils mobiles, les tablettes et les ordinateurs de bureau.

Ce tutoriel explique tout ce que vous devez savoir pour utiliser CSS Grid comme un pro.

Table des matières

1. Qu'est-ce que la grille CSS ?
2. Grid Container vs Grid Item : quelle est la différence ?
3. Qu'est-ce qu'une gridvaleur en CSS ?
4. Qu'est-ce qu'une inline-gridvaleur en CSS ?
5. Propriétés de spécification de la disposition d'une grille
6. Quelles sont les propriétés du conteneur Grid ?
7. Qu'est-ce que la propriété de CSS Gridgrid-template-columns ?
8. Qu'est-ce que la propriété de CSS Gridgrid-template-rows ?
9. Qu'est-ce que la propriété de CSS Gridjustify-content ?
10. Qu'est-ce que la propriété de CSS Gridjustify-items ?
11. Qu'est-ce que la propriété de CSS Gridalign-content ?
12. Qu'est-ce que la propriété de CSS Gridalign-items ?
13. Quelles sont les propriétés de l'élément de grille ?
14. Qu'est-ce que la propriété de CSS Gridjustify-self ?
15. Qu'est-ce que la propriété de CSS Gridalign-self ?
16. Qu'est-ce que la propriété de CSS Gridgrid-column-start ?
17. Qu'est-ce que la propriété de CSS Gridgrid-column-end ?
18. Qu'est-ce que la propriété de CSS Gridgrid-column ?
19. Qu'est-ce que la propriété de CSS Gridgrid-row-start ?
20. Qu'est-ce que la propriété de CSS Gridgrid-row-end ?
21. Qu'est-ce que la propriété de CSS Gridgrid-row ?
22. Qu'est-ce que la propriété de CSS Gridgrid-area ?
23. Qu'est-ce que la propriété de CSS Gridgrid-template-areas ?
24. Comment utiliser la minmax()fonction CSS pour définir les tailles de grille minimales et maximales
25. Comment utiliser la repeat()fonction CSS pour définir des pistes de grille avec des motifs répétés
26. Aperçu

Alors, sans plus tarder, comprenons ce qu'est CSS Grid.

---

Qu'est-ce que la grille CSS ?

Le module CSS Grid Layout permet aux navigateurs d'afficher les éléments HTML sélectionnés sous forme de modèles de boîte de grille.

Grid vous permet de redimensionner et de repositionner facilement un conteneur de grille et ses éléments en deux dimensions.

Note:

• "Bidimensionnel" signifie que les modules de grille permettent la disposition simultanée de modèles de boîtes en lignes et en colonnes.
• Utilisez Flexbox si vous avez seulement besoin de redimensionner et de repositionner des éléments de manière unidimensionnelle.

Grid Container vs Grid Item : quelle est la différence ?

Un conteneur de grille est un élément HTML dont displayla valeur de propriété est gridou inline-grid.

Un élément de grille est l'un des enfants directs d'un conteneur de grille.

Un conteneur de grille (la grande zone jaune de l'image) est un élément HTML dont la valeur de la propriété display est grid ou inline-grid. Les éléments de grille (les plus petites cases dans le conteneur jaune) sont les enfants directs d'un conteneur de grille.

Qu'est-ce qu'une gridvaleur en CSS ?

gridindique aux navigateurs d'afficher l'élément HTML sélectionné sous la forme d'un modèle de boîte de grille au niveau du bloc.

displayEn d'autres termes, la définition de la valeur de la propriété d'un élément gridtransforme le modèle de boîte en un module de disposition de grille au niveau du bloc .

Voici un exemple :

section {
  display: grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la valeur pour convertir les éléments griddu document HTML à partir de nœuds réguliers en modèles de boîte de grille au niveau du bloc.<section><section>

Note:

• La display: griddirective crée uniquement un conteneur de grille à une seule colonne. Par conséquent, les éléments de la grille s'afficheront dans le flux de mise en page normal (un élément sous l'autre).
• La conversion d'un nœud en un modèle de boîte de grille transforme les enfants directs de l'élément en éléments de grille.
• La display: griddirective n'affecte qu'un modèle de boîte et ses enfants directs. Cela n'affecte pas les nœuds petits-enfants.

Parlons maintenant de la inline-gridvaleur.

Qu'est-ce qu'une inline-gridvaleur en CSS ?

inline-gridindique aux navigateurs d'afficher l'élément HTML sélectionné sous la forme d'un modèle de boîte de grille au niveau de la ligne.

En d'autres termes, la définition de la valeur de la propriété d'un élément displaypour inline-gridtransformer le modèle de boîte en un module de disposition de grille au niveau de la ligne .

Voici un exemple :

section {
  display: inline-grid;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la valeur pour convertir les éléments inline-griddu document HTML à partir de nœuds réguliers en modèles de boîte de grille au niveau de la ligne.<section><section>

Note:

• La conversion d'un nœud en un modèle de boîte de grille transforme les enfants directs de l'élément en éléments de grille.
• La display: inline-griddirective n'affecte qu'un modèle de boîte et ses enfants directs. Cela n'affecte pas les nœuds petits-enfants.

Propriétés de spécification de la disposition d'une grille

Lors de la conversion d'un élément HTML normal en modèle de boîte de grille (ou de grille en ligne), le module de disposition de grille fournit deux catégories de propriétés pour positionner la boîte de grille et ses enfants directs :

• Grid container's properties
• Grid item's properties

What Are the Grid Container's Properties?

A grid container's properties specify how browsers should layout items within the grid box model.

Note: We define a grid container's property on the container, not its items.

The eight (8) types of grid container properties are:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows
• justify-content
• justify-items
• align-content
• align-items

Let's discuss the eight types now.

What Is CSS Grid's grid-template-columns Property?

grid-template-columns specifies the number and widths of columns browsers should display in the selected grid container.

Example 1: How to create a two-column grid container

section {
  display: grid;
  grid-template-columns: 95px 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display two columns of different widths in the selected <section> grid container.

Note: We used the fr (fraction) unit to scale the second column relative to the fraction of available space in the grid container.

Example 2: How to create a three-column grid container

section {
  display: grid;
  grid-template-columns: 15% 60% 25%;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-columns property to display three columns of different widths in the selected <section> grid container.

Note:

• You can use the grid-auto-columns property to specify default column widths for all the grid container's columns. For instance, grid-auto-columns: 150px will set default widths of 150px for all columns. But a grid-template-columns declaration will override it.
• Explicit grid columns are the columns you explicitly define with the grid-template-columns property.
• Implicit grid columns are the columns browsers create automatically. We use the grid-auto-columns properties to specify track sizes for implicit columns.

Tip:

• Use the CSS repeat() function to specify grid-template-columns values with repeated patterns. We will discuss the repeat() function later in this tutorial.
• Use the CSS column-gap property to create gaps between grid columns.

What Is CSS Grid's grid-template-rows Property?

grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.

Example 1: How to create a three-row grid container

section {
  display: grid;
  grid-template-rows: 95px 1fr 70px;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Try it on StackBlitz

The snippet above used the grid-template-rows property to display three rows of different heights in the selected <section> grid container.

Remarque : Nous avons utilisé l' frunité (fraction) pour mettre à l'échelle la deuxième ligne par rapport à la fraction d'espace disponible dans le conteneur de la grille.

Exemple 2 : Comment créer un conteneur de grille à trois lignes et quatre colonnes

section {
  display: grid;
  grid-template-rows: 90px 300px 1fr;
  grid-template-columns: auto auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la grid-template-rowspropriété pour afficher trois colonnes de hauteurs différentes dans le <section>conteneur de grille sélectionné.

Note:

• Vous pouvez utiliser la grid-auto-rowspropriété pour spécifier les hauteurs de ligne par défaut pour toutes les lignes du conteneur de grille. Par exemple, grid-auto-rows: 100pxdéfinira les hauteurs par défaut de 100pxpour toutes les lignes. Mais une grid-template-rowsdéclaration l'annulera.
• Les lignes de grille explicites sont les lignes que vous définissez explicitement avec la grid-template-rowspropriété.
• Les lignes de grille implicites sont les lignes que les navigateurs créent automatiquement. Nous utilisons les grid-auto-rowspropriétés pour spécifier les tailles de piste pour les lignes implicites.

Conseil:

• Utilisez la fonction CSS repeat()pour spécifier grid-template-rowsdes valeurs avec des motifs répétés. Nous discuterons de la repeat()fonction plus tard dans ce tutoriel.
• Utilisez la propriété CSSrow-gap pour créer des espaces entre les lignes de la grille.

Qu'est-ce que la propriété de CSS Gridjustify-content ?

justifier-content spécifie comment les navigateurs doivent positionner les colonnes d'un conteneur de grille le long de son axe de ligne.

Note:

• Un axe de ligne est parfois appelé un axe en ligne.
• La justify-contentpropriété fonctionne si la largeur totale des colonnes est inférieure à la largeur du conteneur de grille. En d'autres termes, vous avez besoin d'espace libre le long de l'axe des lignes du conteneur pour justifier ses colonnes à gauche ou à droite.

La justify-contentpropriété accepte les valeurs suivantes :

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

Discutons de ces valeurs.

Qu'y a-t-il justify-content: startdans CSS Grid ?

startpositionne les colonnes du conteneur de grille avec son bord de début de ligne.

la valeur de début de justification du contenu positionne les colonnes sur le bord de début de ligne du conteneur de grille

Voici un exemple :

section {
  display: grid;
  justify-content: start;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait de code ci-dessus a utilisé la startvaleur pour positionner les <section>colonnes de sur le bord de début de ligne du conteneur de grille.

Qu'y a-t-il justify-content: centerdans CSS Grid ?

centerpositionne les colonnes du conteneur de la grille au centre de l'axe des lignes de la grille.

justify-content's center value positions columns to the center of the grid container

Here's an example:

section {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the center value to position the <section>'s columns to the center of the grid container.

What is justify-content: end in CSS Grid?

end positions a grid container's columns with its row-end edge.

justify-content's end value positions columns to the grid container's row-end edge

Here's an example:

section {
  display: grid;
  justify-content: end;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Try it on StackBlitz

The snippet above used the end value to position the <section>'s columns to the grid container's row-end edge.

What is justify-content: space-between in CSS Grid?

space-between does the following:

• It positions a grid container's first column with its row-start edge.
• It positions the container's last column with the row-end edge.
• It creates even spacing between each pair of columns between the first and last columns.

La valeur space-between de la justification du contenu crée un espacement égal entre chaque paire de colonnes entre la première et la dernière colonne de la grille

Voici un exemple :

section {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la space-betweenvaleur pour créer un espacement régulier entre chaque paire de colonnes entre la première et la dernière colonne de la grille.

Qu'y a-t-il justify-content: space-arounddans CSS Grid ?

space-aroundattribue un espacement égal à chaque côté des colonnes d'un conteneur de grille.

Par conséquent, l'espace avant la première colonne et après la dernière est la moitié de la largeur de l'espace entre chaque paire de colonnes.

la valeur space-around de la justification du contenu attribue un espacement égal à chaque côté des colonnes du conteneur de la grille

Voici un exemple :

section {
  display: grid;
  justify-content: space-around;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la space-aroundvaleur pour attribuer un espacement égal à chaque côté des colonnes du conteneur de grille.

Qu'y a-t-il justify-content: space-evenlydans CSS Grid ?

space-evenlyattribue un espacement régulier aux deux extrémités d'un conteneur de grille et entre ses colonnes.

la valeur space-evenly de la justification du contenu attribue un espacement égal aux deux extrémités du conteneur de grille et entre ses colonnes

Voici un exemple :

section {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(4, 40px);
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la space-evenlyvaleur pour attribuer un espacement régulier aux deux extrémités du conteneur de grille et entre ses colonnes.

Qu'est-ce que la propriété de CSS Gridjustify-items ?

justifier-items spécifie la justify-selfvaleur par défaut pour tous les éléments de la grille.

La justify-itemspropriété accepte les valeurs suivantes :

• stretch
• start
• center
• end

Discutons des quatre valeurs.

Qu'y a-t-il justify-items: stretchdans CSS Grid ?

stretchest justify-items' valeur par défaut. Il étire les éléments du conteneur de grille pour remplir l'axe de ligne (en ligne) de leurs cellules individuelles.

la valeur d'étirement de la justification des éléments étire les éléments de la grille pour remplir l'axe de ligne de leurs cellules individuelles

Voici un exemple :

section {
  display: grid;
  justify-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la stretchvaleur pour étirer les éléments de la grille afin de remplir l'axe de ligne de leurs cellules individuelles.

Qu'y a-t-il justify-items: startdans CSS Grid ?

startpositionne les éléments d'un conteneur de grille avec le bord de début de ligne de l'axe de ligne de leurs cellules individuelles.

La valeur de début de justification des éléments positionne les éléments de la grille sur le bord de début de ligne de leurs cellules individuelles

Voici un exemple :

section {
  display: grid;
  justify-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la startvaleur pour positionner les éléments de la grille sur le bord de début de ligne de leurs cellules individuelles.

Qu'y a-t-il justify-items: centerdans CSS Grid ?

centerpositionne les éléments d'un conteneur de grille au centre de l'axe de ligne de leurs cellules individuelles.

la valeur centrale de la justification des éléments positionne les éléments de la grille au centre de leurs cellules individuelles

Voici un exemple :

section {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la centervaleur pour positionner les éléments de la grille au centre de l'axe des lignes de leurs cellules individuelles.

Qu'y a-t-il justify-items: enddans CSS Grid ?

endpositionne les éléments d'un conteneur de grille avec le bord de fin de ligne de l'axe de ligne de leurs cellules individuelles.

la valeur de fin de justification des éléments positionne les éléments de la grille sur le bord de fin de ligne de leurs cellules individuelles

Voici un exemple :

section {
  display: grid;
  justify-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la endvaleur pour positionner les éléments de la grille sur le bord de fin de ligne de leurs cellules individuelles.

Qu'est-ce que la propriété de CSS Gridalign-content ?

align-content spécifie comment les navigateurs doivent aligner les lignes d'un conteneur de grille le long de l'axe des colonnes du conteneur.

Note:

• Un axe de colonne est parfois appelé axe de bloc.
• La align-contentpropriété fonctionne si la hauteur totale des lignes est inférieure à la hauteur du conteneur de grille. En d'autres termes, vous avez besoin d'espace libre le long de l'axe des colonnes du conteneur pour aligner ses lignes vers le haut ou vers le bas.

La align-contentpropriété accepte les valeurs suivantes :

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

Discutons de ces valeurs.

Qu'y a-t-il align-content: startdans CSS Grid ?

startaligne les lignes d'un conteneur de grille avec le bord de début de colonne de l'axe des colonnes de la grille.

la valeur de départ de align-content aligne les lignes sur le bord de début de colonne du conteneur de grille

Voici un exemple :

section {
  display: grid;
  align-content: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la startvaleur pour aligner les <section>lignes sur le bord de début de colonne du conteneur de grille.

Qu'y a-t-il align-content: centerdans CSS Grid ?

centeraligne les lignes d'un conteneur de grille sur le centre de l'axe des colonnes de la grille.

align-content's center value aligns rows to the center of the grid container

section {
  display: grid;
  align-content: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the center value to align the <section>'s rows to the center of the grid container.

What is align-content: end in CSS Grid?

end aligns a grid container's rows with the column-end edge of the grid's column axis.

align-content's end value aligns rows to the grid container's column-end edge

Here's an example:

section {
  display: grid;
  align-content: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the end value to align the <section>'s rows to the grid container's column-end edge.

What is align-content: space-between in CSS Grid?

space-between does the following:

• It aligns a grid container's first row with its column-start edge.
• It aligns the container's last row with the column-end edge.
• It creates even spacing between each pair of rows between the first and last row.

align-content's space-between value creates even spacing between each pair of rows between the first and last grid row

Here's an example:

section {
  display: grid;
  align-content: space-between;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of rows between the first and last grid row.

What is align-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's rows.

Therefore, the space before the first row and after the last one is half the width of the space between each pair of rows.

align-content's space-around value assigns equal spacing to each side of the grid container's rows

Here's an example:

section {
  display: grid;
  align-content: space-around;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's rows.

What is align-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its rows.

La valeur space-evenly d'align-content attribue un espacement régulier aux deux extrémités du conteneur de grille et entre ses lignes

Voici un exemple :

section {
  display: grid;
  align-content: space-evenly;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la space-evenlyvaleur pour attribuer un espacement régulier aux deux extrémités du conteneur de grille et entre ses lignes.

Qu'est-ce que la propriété de CSS Gridalign-items ?

align-items spécifie la align-selfvaleur par défaut pour tous les éléments de la grille.

La align-itemspropriété accepte les valeurs suivantes :

• stretch
• start
• center
• end

Discutons des quatre valeurs ci-dessous.

Qu'y a-t-il align-items: stretchdans CSS Grid ?

stretchest la valeur par défaut pour align-items. Il étire les éléments du conteneur de grille pour remplir l'axe de colonne (bloc) de leurs cellules individuelles.

la valeur d'étirement d'align-items étire les éléments de la grille pour remplir l'axe de colonne de leurs cellules individuelles

Voici un exemple :

section {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la stretchvaleur pour étirer les éléments de la grille afin de remplir l'axe de colonne de leurs cellules individuelles.

Qu'y a-t-il align-items: startdans CSS Grid ?

startaligne les éléments d'un conteneur de grille avec le bord de début de colonne de l'axe de colonne de leurs cellules individuelles.

align-items' start value aligne les éléments de la grille sur le bord de début de colonne de leurs cellules individuelles

Voici un exemple :

section {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la startvaleur pour aligner les éléments de la grille sur le bord de début de colonne de leurs cellules individuelles.

Qu'y a-t-il align-items: centerdans CSS Grid ?

centeraligne les éléments d'un conteneur de grille au centre de l'axe de colonne de leurs cellules individuelles.

align-items' center value aligne les éléments de la grille sur le centre de leurs cellules individuelles

Voici un exemple :

section {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la centervaleur pour aligner les éléments de la grille au centre de l'axe de colonne de leurs cellules individuelles.

Qu'y a-t-il align-items: enddans CSS Grid ?

endaligne les éléments d'un conteneur de grille avec le bord de fin de colonne de l'axe de colonne de leurs cellules individuelles.

align-items' end value aligne les éléments de la grille sur le bord de fin de colonne de leurs cellules individuelles

Voici un exemple :

section {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la endvaleur pour aligner les éléments de la grille sur le bord de fin de colonne de leurs cellules individuelles.

Donc, maintenant que nous connaissons les types de propriétés de conteneur de grille CSS, nous pouvons discuter des propriétés des éléments de grille.

Quelles sont les propriétés de l'élément de grille ?

Les propriétés d'un élément de grille spécifient comment les navigateurs doivent disposer un élément spécifié dans le modèle de boîte de grille.

Remarque : nous définissons la propriété d'un élément de grille sur l'élément, pas sur son conteneur.

Les dix (10) types de propriétés d'élément de grille sont :

• justify-self
• align-self
• grid-column-start
• grid-column-end
• grid-column
• grid-row-start
• grid-row-end
• grid-row
• grid-area
• grid-template-areas

Discutons maintenant des dix types.

Qu'est-ce que la propriété de CSS Gridjustify-self ?

justifier-self spécifie comment les navigateurs doivent positionner l'élément de grille sélectionné le long de l'axe de ligne (en ligne) de sa cellule.

La justify-selfpropriété accepte les valeurs suivantes :

• stretch
• start
• center
• end

Discutons des quatre valeurs.

Qu'y a-t-il justify-self: stretchdans CSS Grid ?

stretchest justify-selfla valeur par défaut de. Il étire l'élément de grille sélectionné pour remplir l'axe de ligne (en ligne) de sa cellule.

la valeur d'étirement de justifier-self étire l'élément de grille sélectionné pour remplir l'axe de ligne de sa cellule

Voici un exemple :

.grid-item1 {
  justify-self: stretch;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la stretchvaleur à étirer grid-item1pour remplir l'axe des lignes de sa cellule.

Qu'y a-t-il justify-self: startdans CSS Grid ?

startpositionne l'élément de grille sélectionné avec le bord de début de ligne de l'axe de ligne de sa cellule.

la valeur de début de justification-auto positionne l'élément de grille sélectionné sur le bord de début de ligne de sa cellule

Voici un exemple :

.grid-item1 {
  justify-self: start;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la startvaleur pour se positionner grid-item1sur le bord de début de ligne de sa cellule.

Qu'y a-t-il justify-self: centerdans CSS Grid ?

centerpositionne l'élément de grille sélectionné au centre de l'axe des lignes de sa cellule.

la valeur centrale de la justification de soi positionne l'élément de grille sélectionné au centre de sa cellule

Voici un exemple :

.grid-item1 {
  justify-self: center;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la centervaleur pour se positionner grid-item1au centre de sa cellule.

Qu'y a-t-il justify-self: enddans CSS Grid ?

endpositionne l'élément de grille sélectionné avec le bord de fin de ligne de l'axe de ligne de sa cellule.

la valeur de fin de justification-auto positionne l'élément de grille sélectionné sur le bord de fin de ligne de sa cellule

Voici un exemple :

.grid-item1 {
  justify-self: end;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la endvaleur pour se positionner grid-item1sur le bord de fin de ligne de sa cellule.

Qu'est-ce que la propriété de CSS Gridalign-self ?

align-self spécifie comment les navigateurs doivent aligner l'élément de grille sélectionné le long de l'axe de colonne (bloc) de sa cellule.

La align-selfpropriété accepte les valeurs suivantes :

• stretch
• start
• center
• end

Discutons des quatre valeurs ci-dessous.

Qu'y a-t-il align-self: stretchdans CSS Grid ?

stretchest align-selfla valeur par défaut de. Il étire l'élément de grille sélectionné pour remplir l'axe de colonne (bloc) de sa cellule.

la valeur d'étirement de align-self étire l'élément de grille sélectionné pour remplir l'axe de colonne de sa cellule

Voici un exemple :

.grid-item1 {
  align-self: stretch;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la stretchvaleur à étirer grid-item1pour remplir l'axe de colonne de sa cellule.

Qu'y a-t-il align-self: startdans CSS Grid ?

startaligne l'élément de grille sélectionné avec le bord de début de colonne de l'axe de colonne de sa cellule.

la valeur de départ de align-self aligne l'élément de grille sélectionné sur le bord de début de colonne de sa cellule

Voici un exemple :

.grid-item1 {
  align-self: start;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la startvaleur pour s'aligner grid-item1sur le bord de début de colonne de sa cellule.

Qu'y a-t-il align-self: centerdans CSS Grid ?

centeraligne l'élément de grille sélectionné sur le centre de l'axe de colonne de sa cellule.

la valeur centrale de align-self aligne l'élément de grille sélectionné sur le centre de sa cellule

Voici un exemple :

.grid-item1 {
  align-self: center;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la centervaleur pour s'aligner grid-item1sur le centre de sa cellule.

Qu'y a-t-il align-self: enddans CSS Grid ?

endaligne l'élément de grille sélectionné avec le bord de fin de colonne de l'axe de colonne de sa cellule.

La valeur de fin de align-self aligne l'élément de grille sélectionné sur le bord de fin de colonne de sa cellule

Voici un exemple :

.grid-item1 {
  align-self: end;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la endvaleur pour aligner grid-item1 sur le bord de fin de colonne de sa cellule.

Qu'est-ce que la propriété de CSS Gridgrid-column-start ?

grid-column-start spécifie où l'élément de grille sélectionné doit commencer (ou s'étendre) le long de l'axe de ligne (en ligne) du conteneur de grille.

La grid-column-startpropriété accepte les valeurs suivantes :

• auto
• <column-line-number>
• span <number-of-columns>

Exemple 1 : comment démarrer automatiquement l'élément de grille sélectionné en suivant le flux de colonne normal

.grid-item1 {
  grid-column-start: auto;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la autovaleur pour démarrer automatiquement grid-item1selon le flux de disposition de colonne normal.

Exemple 2 : Comment démarrer l'élément de grille sélectionné à la ligne de colonne 3

.grid-item1 {
  grid-column-start: 3;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la grid-column-startpropriété pour commencer grid-item1à la ligne de colonne 3.

Exemple 3 : comment répartir l'élément de grille sélectionné sur deux colonnes

.grid-item1 {
  grid-column-start: span 2;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la span 2valeur pour s'étendre grid-item1sur deux colonnes.

Qu'est-ce que la propriété de CSS Gridgrid-column-end ?

grid-column-end spécifie où l'élément de grille sélectionné doit se terminer (ou s'étendre) le long de l'axe de ligne (en ligne) du conteneur de grille.

La grid-column-endpropriété accepte les valeurs suivantes :

• auto
• <column-line-number>
• span <number-of-columns>

Exemple 1 : comment terminer automatiquement l'élément de grille sélectionné en suivant le flux de colonne normal

.grid-item1 {
  grid-column-end: auto;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la autovaleur pour se terminer automatiquement grid-item1selon le flux de mise en page normal.

Exemple 2 : comment terminer l'élément de grille sélectionné à la ligne de colonne 3

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la grid-column-endpropriété pour se terminer grid-item1à la ligne de colonne 3.

Exemple 3 : comment répartir l'élément de grille sélectionné sur deux colonnes

.grid-item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la span 2valeur pour s'étendre grid-item1sur deux colonnes.

Qu'est-ce que la propriété de CSS Gridgrid-column ?

grid-column est un raccourci pour les propriétés grid-column-startet grid-column-end.

Autrement dit, au lieu d'écrire :

.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Vous pouvez également utiliser la grid-columnpropriété pour raccourcir votre code comme ceci :

.grid-item1 {
  grid-column: 1 / 3;
}

Voici la syntaxe de grid-column :

grid-column: grid-column-start / grid-column-end;

Qu'est-ce que la propriété de CSS Gridgrid-row-start ?

grid-row-start spécifie où l'élément de grille sélectionné doit commencer (ou s'étendre) le long de l'axe de colonne (bloc) du conteneur de grille.

La grid-row-startpropriété accepte les valeurs suivantes :

• auto
• <row-line-number>
• span <number-of-rows>

Exemple 1 : comment démarrer automatiquement l'élément de grille sélectionné en suivant le flux de lignes normal

.grid-item1 {
  grid-row-start: auto;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la autovaleur pour démarrer automatiquement grid-item1selon le flux de disposition de ligne normal.

Exemple 2 : comment démarrer l'élément de grille sélectionné à la ligne 3

.grid-item1 {
  grid-row-start: 3;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la grid-row-startpropriété pour commencer grid-item1à la ligne 3.

Exemple 3 : Comment étendre l'élément de grille sélectionné sur deux lignes

.grid-item1 {
  grid-row-start: span 2;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la span 2valeur pour s'étendre grid-item1sur deux lignes.

Qu'est-ce que la propriété de CSS Gridgrid-row-end ?

grid-row-end spécifie où l'élément de grille sélectionné doit se terminer (ou s'étendre) le long de l'axe de colonne (bloc) du conteneur de grille.

La grid-row-endpropriété accepte les valeurs suivantes :

• auto
• <column-line-number>
• span <number-of-columns>

Exemple 1 : comment terminer automatiquement l'élément de grille sélectionné en suivant le flux de lignes normal

.grid-item1 {
  grid-row-end: auto;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la autovaleur pour se terminer automatiquement grid-item1selon le flux de disposition de ligne normal.

Exemple 2 : Comment terminer l'élément de grille sélectionné à la ligne 5

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la grid-row-endpropriété pour se terminer grid-item1à la ligne 5.

Exemple 3 : comment étendre l'élément de grille sélectionné sur trois lignes

.grid-item1 {
  grid-row-end: span 3;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la span 3valeur pour s'étendre grid-item1sur trois lignes.

Qu'est-ce que la propriété de CSS Gridgrid-row ?

grid-row est un raccourci pour les propriétés grid-row-startet grid-row-end.

Autrement dit, au lieu d'écrire :

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: 5;
}

Vous pouvez également utiliser la grid-rowpropriété pour raccourcir votre code comme ceci :

.grid-item1 {
  grid-row: 1 / 5;
}

Voici la syntaxe de grid-row :

grid-row: grid-row-start / grid-row-end;

Qu'est-ce que la propriété de CSS Gridgrid-area ?

Vous pouvez utiliser la propriété grid-area aux fins suivantes :

1. En tant que raccourci pour les propriétés grid-column-start, grid-column-end, grid-row-startet grid-row-end.
2. Pour spécifier le nom d'un élément de grille.

Discutons des deux objectifs ci-dessous.

Comment utiliser grid-areacomme raccourci

Voici la syntaxe pour utiliser la grid-areapropriété comme raccourci pour les propriétés grid-column-start, grid-column-end, grid-row-startet grid-row-end:

.your-grid-item {
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}

Ainsi, au lieu d'écrire :

.grid-item1 {
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: span 2;
}

Essayez-le sur StackBlitz

Vous pouvez également utiliser la grid-areapropriété pour raccourcir votre code comme ceci :

.grid-item1 {
  grid-area: 3 / 1 / 5 / span 2;
}

Essayez-le sur StackBlitz

Comment utiliser grid-areapour spécifier le nom d'un élément de grille

Voici la syntaxe d'utilisation de la grid-areapropriété pour spécifier le nom d'un élément de grille :

.your-grid-item {
  grid-area: item-name;
}

Voici un exemple :

.grid-item1 {
  grid-area: firstDiv;
}

.grid-item2 {
  grid-area: middleDiv;
}

.grid-item2 {
  grid-area: lastDiv;
}

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
</section>

Utiliser grid-areapour définir un élément de grille nommé permet à la propriété de votre conteneur de grille grid-template-areasd'utiliser le nom pour définir la taille et l'emplacement de l'élément.

Qu'est-ce que la propriété de CSS Gridgrid-template-areas ?

grid-template-areas spécifie la zone dans laquelle vous souhaitez placer des éléments de grille nommés dans un conteneur de grille.

N'oubliez pas : nous utilisons la propriété CSS grid-areapour nommer les éléments de la grille.

Exemple 1 : comment placer un élément de grille nommé sur trois colonnes

.grid-item1 {
  grid-area: firstDiv;
}

section {
  display: grid;
  grid-template-areas: "firstDiv firstDiv firstDiv . .";
  background-color: orange;
  margin: 50px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la grid-template-areaspropriété à placer grid-item1dans les trois premières zones de colonne.

Notez ce qui suit :

• Les guillemets ( "") définissent chaque ligne de la grille.
• Un symbole de point ( .) définit un élément de grille sans nom.
• Nous avons utilisé le caractère d'espacement pour séparer les colonnes de la grille.

Exemple 2 : Comment spécifier les emplacements de plusieurs éléments de grille nommés

.grid-item1 {
  grid-area: header;
}

.grid-item2 {
  grid-area: article;
}

.grid-item3 {
  grid-area: footer;
}

.grid-item4 {
  grid-area: sidebar;
}

.grid-item5 {
  grid-area: ads1;
}

.grid-item6 {
  grid-area: ads2;
}

.grid-item7 {
  grid-area: ads3;
}

section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "header header header header header"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads1"
    "sidebar article article article ads2"
    "sidebar article article article ads3"
    "sidebar footer footer footer footer";
  background-color: orange;
  margin: 30px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la grid-template-areaspropriété pour spécifier où les navigateurs doivent placer les éléments de grille sur les lignes et les colonnes du conteneur de grille.

Choses importantes à savoir sur la grid-template-areaspropriété

Voici quatre faits essentiels à retenir lors de l'utilisation de la grid-template-areaspropriété :

1. grid-template-areasne pas autoriser les cellules vides

La grid-template-areaspropriété vous demande de fournir un élément pour toutes les cellules de la grille.

Par exemple, considérez cet extrait :

grid-template-areas:
  "header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Ci-dessus est une grid-template-areasvaleur non valide car la première ligne est incomplète.

En d'autres termes, la première ligne est la seule avec deux colonnes. Cependant, grid-template-areasattendez-vous à ce que toutes les lignes d'un conteneur de grille aient le même nombre de colonnes.

2. Vous pouvez utiliser des points pour spécifier les cellules vides

Supposons que vous souhaitiez laisser certaines cellules vides. Dans ce cas, utilisez un point ( .) ou plusieurs points non espacés ( ....).

Voici un exemple :

grid-template-areas:
  "header header . . ."
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Essayez-le sur StackBlitz

L'extrait ci-dessus utilisait les symboles à trois points espacés ( .) pour indiquer trois cellules vides.

3. grid-template-areasn'autorisez pas le placement d'un article à plusieurs endroits

La grid-template-areaspropriété ne peut pas placer les éléments deux fois dans un conteneur de grille.

Par exemple, considérez cet extrait :

grid-template-areas:
  "header header header header header"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer header header header";

Ci-dessus est une grid-template-areasvaleur non valide car l' headerélément occupe deux zones de grille.

4. grid-template-areasn'autorise que les zones rectangulaires

La grid-template-areaspropriété ne peut pas créer de zones non rectangulaires (telles qu'en forme de T ou de L).

Par exemple, considérez cet extrait :

grid-template-areas:
  "header header header header header"
  "sidebar ads1 ads1 ads1 ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads1"
  "sidebar article article article ads2"
  "sidebar article article article ads3"
  "sidebar footer footer footer footer";

Ci-dessus est une grid-template-areasvaleur non valide car l' ads1élément crée une zone de grille non rectangulaire.

Donc, maintenant que nous connaissons les types de propriétés des éléments de grille CSS, nous pouvons discuter de la façon de définir les tailles de grille minimales et maximales.

Comment utiliser la minmax()fonction CSS pour définir les tailles de grille minimales et maximales

minmax() est une fonction CSS Grid permettant de définir des tailles de grille minimales et maximales.

Syntaxe de la fonction CSSminmax()

minmax()accepte deux arguments. Voici la syntaxe :

minmax(minimum-size, maximum-size)

Notez ce qui suit :

• L' minimum-sizeargument spécifie la plus petite taille pour une longueur spécifique.
• L' maximum-sizeargument spécifie la plus grande taille pour une longueur spécifique.
• minmax()Les arguments de peuvent être l'une des longueurs CSS non négatives ou l'un des mots-clés auto, min-contentou max-content.
• Supposons que l' maximum-sizeargument est inférieur à minimum-size. Dans ce cas, les navigateurs ignoreront maximum-sizeet traiteront la minmax()fonction comme min().
• Une frunité est une unité valide pour l' minimum-sizeargument.

Comment utiliser la minmax()fonction CSS

Vous pouvez utiliser la minmax()fonction comme valeur pour les propriétés CSS suivantes :

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows

Exemples de la minmax()fonction CSS

Vous trouverez ci-dessous des exemples de fonctionnement de la fonction CSS minmax().

Comment définir une taille de grille de lignes 70pxminimale et maximale250px

section {
  display: grid;
  grid-template-rows: 50px 100px minmax(70px, 250px);
  grid-template-columns: auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la minmax()fonction CSS pour définir la <section>hauteur de la troisième ligne sur un minimum de 70pxet un maximum de 250px.

Comment définir une taille de grille de colonnes 30%minimale et maximale70%

section {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr minmax(30%, 70%) 1fr;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la minmax()fonction CSS pour définir la <section>largeur de la deuxième colonne de à un minimum de 30%et un maximum de 70%.

Remarque : Vous pouvez utiliser la repeat()fonction CSS pour spécifier grid-template-rowsou grid-template-columnsdes valeurs avec des motifs répétés. Discutons repeat()maintenant de la fonction.

Comment utiliser la repeat()fonction CSS pour définir des pistes de grille avec des motifs répétés

La fonction CSS repeat() vous permet d'écrire des valeurs plus concises et lisibles lors de la spécification de plusieurs pistes de grille avec des motifs répétés.

Note:

• Une piste fait référence à la colonne (ou ligne) d'un conteneur de grille.
• Vous pouvez utiliser repeat()comme valeur pour le CSS grid-template-columnsou grid-template-rowsles propriétés.

Syntaxe de la fonction CSSrepeat()

repeat()accepte deux arguments. Voici la syntaxe :

repeat(number-of-repetition, track-list-to-repeat)

Argumentation 1 :number-of-repetition

L' number-of-repetitionargument spécifie le nombre de fois que les navigateurs doivent répéter la liste de pistes spécifiée (le deuxième argument).

L' number-of-repetitionargument peut être l'une des valeurs suivantes :

• Nombre 1ou son multiple
• auto-fill
• auto-fit

auto-fillvs.auto-fit : Quelle est la différence ?

Les valeurs auto-fillet auto-fitcréent automatiquement autant de pistes que nécessaire pour remplir un conteneur de grille sans provoquer de débordement.

La différence entre les deux valeurs est que auto-fitréduit les pistes vides à zéro pixel ( 0px). Mais auto-fillaffiche les pistes vides et remplies.

Remarque : les pistes vides sont des colonnes ou des lignes sans élément de grille.

Argumentation 2 :track-list-to-repeat

L' track-list-to-repeatargument spécifie le motif de piste que vous souhaitez répéter sur l'axe horizontal ou vertical d'un conteneur de grille.

En d'autres termes, track-list-to-repeatconsiste en une ou plusieurs valeurs spécifiant la taille des pistes que les navigateurs doivent répéter dans un conteneur de grille.

Remarque : Supposons que votre number-of-repetitionest auto-fillou auto-fit. Dans ce cas, vous ne pouvez utiliser que des tailles fixes comme track-list-to-repeatargument.

Exemples de la repeat()fonction CSS

Vous trouverez ci-dessous des exemples de fonctionnement de la fonction CSS repeat().

Comment créer un conteneur de grille à trois colonnes avec 70pxdes largeurs de colonne

section {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la repeat()fonction CSS pour créer trois 70pxcolonnes larges.

Ci-dessous est le non- repeat()équivalent de la grid-template-columnspropriété ci-dessus :

grid-template-columns: 70px 70px 70px;

Comment créer un conteneur de grille à quatre colonnes avec une 50pxet trois 90pxlargeurs de colonne

section {
  display: grid;
  grid-template-columns: 50px repeat(3, 90px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la repeat()fonction CSS pour créer trois 90pxcolonnes larges.

Ci-dessous est le non- repeat()équivalent de la grid-template-columnspropriété ci-dessus :

grid-template-columns: 50px 90px 90px 90px;

Comment créer un conteneur de grille à cinq colonnes avec une 40pxet deux 60px 1frlargeurs de colonne

section {
  display: grid;
  grid-template-columns: 40px repeat(2, 60px 1fr);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la repeat()fonction CSS pour créer deux 60px 1frcolonnes larges.

Ci-dessous est le non- repeat()équivalent de la grid-template-columnspropriété ci-dessus :

grid-template-columns: 40px 60px 1fr 60px 1fr;

Remarque : nous avons utilisé l' frunité (fraction) pour mettre à l'échelle les troisième et cinquième colonnes par rapport à la fraction d'espace disponible dans le conteneur de grille.

Comment remplir automatiquement le conteneur de grille avec 70pxdes colonnes larges

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, 70px);
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus utilisait la repeat()fonction CSS pour remplir automatiquement le conteneur de la grille avec 70pxdes colonnes larges.

Comment remplir automatiquement le conteneur de la grille avec un minimum 50pxet un maximum de 1frcolonnes larges

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé le CSS repeat()et minmax()les fonctions pour remplir automatiquement le conteneur de grille avec un minimum de 50pxcolonnes larges et un maximum de 1fr.

Remarque : 1fr signifie une unité de fraction .

Comment ajuster automatiquement le conteneur de la grille avec un minimum 50pxet un maximum de 1frcolonnes larges

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait de code ci-dessus utilisait les fonctions CSS repeat()et minmax()pour ajuster automatiquement le conteneur de grille avec un minimum de 50pxcolonnes larges et un maximum de 1fr.

Aperçu

Dans cet article, nous avons discuté de tous les outils CSS Grid dont vous avez besoin pour créer des mises en page de site Web de base et avancées de manière réactive et qui ont fière allure sur tous les appareils.

J'espère que vous avez trouvé cet article utile.

Merci d'avoir lu!

Si vous aimez ce tutoriel, vous pouvez obtenir la version du guide sur Amazon . Il s'agit d'un guide de référence rapide et pratique sur CSS Grid.

Source : https://www.freecodecamp.org

#css

Tout ce que vous devez savoir pour utiliser CSS Flexbox comme un pro

Ce tutoriel explique tout ce que vous devez savoir pour utiliser CSS Flexbox comme un pro. Tous les outils Flexbox dont vous avez besoin pour créer des mises en page de site Web de base et avancées de manière flexible et réactive. CSS Flexbox expliqué - Guide complet des conteneurs flexibles et des éléments flexibles

CSS Flexbox vous donne les outils pour créer des mises en page de site Web de base et avancées de manière flexible et réactive.

Table des matières

1. Qu'est-ce que Flexbox ?
2. Flex Container vs Flex Item : quelle est la différence ?
3. Qu'est-ce qu'une flexvaleur en CSS ?
4. Qu'est-ce qu'une inline-flexvaleur en CSS ?
5. Propriétés pour spécifier la disposition de Flexbox
6. Quelles sont les propriétés des conteneurs flexibles ?
7. Quelle est la propriété de Flexbox flex-direction?
8. Quelle est la propriété de Flexbox flex-wrap?
9. Quelle est la propriété de Flexbox flex-flow?
10. Quelle est la propriété de Flexbox justify-content?
11. Quelle est la propriété de Flexbox align-items?
12. Quelle est la propriété de Flexbox align-content?
13. Quelles sont les propriétés des éléments flexibles ?
14. Quelle est la propriété de Flexbox align-self?
15. Quelle est la propriété de Flexbox order?
16. Quelle est la propriété de Flexbox flex-grow?
17. Quelle est la propriété de Flexbox flex-shrink?
18. Quelle est la propriété de Flexbox flex-basis?
19. Quelle est la propriété de Flexbox flex?
20. Comment centrer des éléments horizontalement avec Flexbox
21. Comment centrer des éléments verticalement avec Flexbox
22. Comment centrer des éléments horizontalement et verticalement avec Flexbox
23. Aperçu

Alors, sans plus tarder, comprenons ce qu'est Flexbox.

---

Qu'est-ce que Flexbox ?

Flexbox permet aux navigateurs d'afficher les éléments HTML sélectionnés sous forme de modèles de boîtes flexibles .

Flexbox permet un redimensionnement et un repositionnement faciles d'un conteneur flexible et de ses articles de manière unidimensionnelle.

Note:

• "Unidimensionnel" signifie que Flexbox permet de disposer des modèles de boîtes en ligne ou en colonne à la fois. En d'autres termes, Flexbox ne peut pas disposer les modèles de boîtes en ligne et en colonne en même temps.
• Flexbox est parfois appelé un module de disposition de boîte flexible.
• Utilisez le module de mise en page de la grille si vous avez besoin de redimensionner et de repositionner des éléments en deux dimensions.

Flex Container vs Flex Item : quelle est la différence ?

Un conteneur flexible est un élément HTML dont displayla valeur de propriété est flexou inline-flex.

Les éléments flexibles sont les enfants directs d'un conteneur flexible.

Un conteneur flexible (la grande zone jaune de l'image) est un élément HTML dont la valeur de la propriété display est flex ou inline-flex. Les éléments flexibles (les plus petites cases du conteneur jaune) sont les enfants directs d'un conteneur flexible.

Qu'est-ce qu'une flexvaleur en CSS ?

flexindique aux navigateurs d'afficher l'élément HTML sélectionné sous la forme d'un modèle de boîte flexible au niveau du bloc.

displayEn d'autres termes, la définition de la valeur de la propriété d'un élément flextransforme le modèle de boîte en une boîte flexible au niveau du bloc .

Voici un exemple :

section {
  display: flex;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la valeur pour convertir les éléments flexdu document HTML à partir de nœuds réguliers en modèles de boîte flexible au niveau du bloc.<section><section>

Note:

• La conversion d'un nœud HTML en un modèle de boîte flexible transforme les enfants directs de l'élément en éléments flexibles.
• La display: flexdirective n'affecte qu'un modèle de boîte et ses enfants directs. Cela n'affecte pas les nœuds petits-enfants.

Discutons maintenant inline-flex.

Qu'est-ce qu'une inline-flexvaleur en CSS ?

inline-flexindique aux navigateurs d'afficher l'élément HTML sélectionné sous la forme d'un modèle de boîte flexible au niveau de la ligne.

displayEn d'autres termes, la définition de la valeur de la propriété d'un élément inline-flextransforme le modèle de boîte en une boîte flexible de niveau ligne .

Voici un exemple :

section {
  display: inline-flex;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la valeur pour convertir les éléments inline-flexdu document HTML à partir de nœuds réguliers en modèles de boîte flexibles au niveau de la ligne.<section><section>

Note:

• La conversion d'un nœud HTML en un modèle de boîte flexible transforme les enfants directs de l'élément en éléments flexibles.
• La display: inline-flexdirective n'affecte qu'un modèle de boîte et ses enfants directs. Cela n'affecte pas les nœuds petits-enfants.

Propriétés pour spécifier la disposition de Flexbox

Lors de la conversion d'un élément HTML standard en un modèle de boîte flex(ou ), Flexbox fournit deux catégories de propriétés pour positionner la boîte flexible et ses enfants directs :inline-flex

• Propriétés des conteneurs flexibles
• Propriétés des éléments flexibles

Quelles sont les propriétés des conteneurs flexibles ?

Les propriétés d'un conteneur flexible spécifient comment les navigateurs doivent disposer les éléments dans le modèle de boîte flexible.

Remarque : nous définissons la propriété d'un conteneur flexible sur le conteneur flexible, pas ses éléments.

Les six (6) types de propriétés de conteneurs flexibles sont :

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Discutons maintenant des six types.

Quelle est la propriété de Flexbox flex-direction?

flex-direction indique aux navigateurs la direction spécifique (ligne ou colonne) dans laquelle ils doivent disposer les enfants directs d'un conteneur flexible.

En d'autres termes, flex-directiondéfinit l' axe principal d'une boîte flexible .

L'axe principal d'une Flexbox est l'orientation de la mise en page définie par une propriété flex-direction. Son axe transversal est l'orientation perpendiculaire à l'axe principal.

Voici un exemple :

section {
  display: flex;
  flex-direction: column;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a organisé les <section>éléments des conteneurs flexibles dans le sens des colonnes de la langue par défaut de votre navigateur.

Astuce : Utilisez flex-direction: column-reverse(ou flex-direction: row-reverse) pour inverser le sens de mise en page du navigateur.

Quelle est la propriété de Flexbox flex-wrap?

flex-wrap spécifie si les navigateurs doivent envelopper les éléments flexibles survolés sur plusieurs lignes.

La flex-wrappropriété accepte les valeurs suivantes :

• nowrap
• wrap
• wrap-reverse

Discutons des trois valeurs.

Qu'y a-t-il flex-wrap: nowrapdans CSS flexbox ?

nowrapest flex-wrapla valeur par défaut de . Il force tous les éléments d'un conteneur flexible sur une seule ligne (c'est-à-dire dans le sens des lignes ou des colonnes).

En d'autres termes, nowrapindique aux navigateurs de ne pas envelopper les éléments d'un conteneur flexible.

Remarque : Supposons que la largeur (ou hauteur) totale de tous les éléments d'un conteneur flexible soit supérieure à la largeur (ou hauteur) de la boîte flexible. Dans un tel cas, nowraples éléments déborderont du conteneur.

Voici un exemple :

section {
  width: 130px;
  display: flex;
  flex-wrap: nowrap;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus était utilisé nowrappour forcer les navigateurs à disposer les éléments des conteneurs flexibles sur une seule ligne.

Qu'y a-t-il flex-wrap: wrapdans CSS flexbox ?

wrapdéplace tous les éléments de débordement d'un conteneur flexible vers la ligne suivante.

En d'autres termes, wrapindique aux navigateurs d'encapsuler les éléments de débordement d'un conteneur flexible.

Voici un exemple :

section {
  width: 130px;
  display: flex;
  flex-wrap: wrap;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

Nous avions l'habitude wrapd'emballer les articles de débordement des conteneurs flexibles à la ligne suivante.

Qu'y a-t-il flex-wrap: wrap-reversedans CSS flexbox ?

wrap-reversedéplace tous les éléments de débordement d'un conteneur flexible vers la ligne suivante dans l'ordre inverse.

Remarque : wrap-reverse fait la même chose que wrap— mais dans l'ordre inverse.

Voici un exemple :

section {
  width: 130px;
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

Essayez-le sur StackBlitz

Nous avions l'habitude wrap-reversed'emballer les articles de débordement des conteneurs flexibles à la ligne suivante dans l'ordre inverse.

Quelle est la propriété de Flexbox flex-flow?

flex-flow est un raccourci pour les propriétés flex-directionet flex-wrap.

Autrement dit, au lieu d'écrire :

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Vous pouvez également utiliser la flex-flowpropriété pour raccourcir votre code comme ceci :

section {
  display: flex;
  flex-flow: column wrap;
}

Quelle est la propriété de Flexbox justify-content?

justifier-content spécifie comment les navigateurs doivent positionner les éléments d'un conteneur flexible le long de l' axe principal de la flexbox .

La justify-contentpropriété accepte les valeurs suivantes :

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Discutons de ces six valeurs.

Qu'y a-t-il justify-content: flex-startdans CSS Flexbox ?

flex-startest justify-contentla valeur par défaut de . Il aligne les éléments d'un conteneur flexible avec le bord de départ principal de l'axe principal de la boîte flexible.

flex-start aligne les éléments d'un conteneur flexible avec le côté main-start de l'axe principal de la flexbox.

Voici un exemple :

section {
  display: flex;
  justify-content: flex-start;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la flex-startvaleur pour aligner les éléments du conteneur flexible sur le bord de départ principal de la boîte flexible.

Qu'y a-t-il justify-content: centerdans CSS Flexbox ?

centeraligne les éléments d'un conteneur flexible au centre de l'axe principal de la boîte flexible.

center aligne les éléments d'un conteneur flexible sur le centre de l'axe principal de la flexbox.

Voici un exemple :

section {
  display: flex;
  justify-content: center;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la centervaleur pour aligner les éléments du conteneur flexible au centre de la flexbox.

Qu'y a-t-il justify-content: flex-enddans CSS Flexbox ?

flex-endaligne les éléments d'un conteneur flexible avec le côté principal de l'axe principal de la boîte flexible.

flex-end aligne les éléments d'un conteneur flexible avec le côté principal de l'axe principal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  justify-content: flex-end;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la flex-endvaleur pour aligner les éléments du conteneur flexible sur le côté principal de la flexbox.

Qu'y a-t-il justify-content: space-betweendans CSS Flexbox ?

space-betweenfait ce qui suit :

• Il aligne le premier élément d'un conteneur flexible avec le bord de départ principal de l'axe principal de la boîte flexible.
• Il aligne le dernier élément du conteneur avec le bord principal de l'axe principal de la boîte flexible.
• Il crée un espacement régulier entre chaque paire d'éléments entre le premier et le dernier élément.

space-between crée un espacement régulier entre chaque paire d'éléments entre le premier et le dernier élément.

Voici un exemple :

section {
  display: flex;
  justify-content: space-between;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la space-betweenvaleur pour créer un espacement régulier entre chaque paire d'éléments entre le premier et le dernier élément flexible.

Qu'y a-t-il justify-content: space-arounddans CSS Flexbox ?

space-aroundattribue un espacement égal à chaque côté des éléments d'un conteneur flexible.

Par conséquent, l'espace avant le premier élément et après le dernier élément est égal à la moitié de la largeur de l'espace entre chaque paire d'éléments.

space-around attribue un espacement égal à chaque côté des éléments d'un conteneur flexible.

Voici un exemple :

section {
  display: flex;
  justify-content: space-around;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la space-aroundvaleur pour attribuer un espacement égal à chaque côté des éléments du conteneur flexible.

Qu'y a-t-il justify-content: space-evenlydans CSS Flexbox ?

space-evenlyattribue un espacement régulier aux deux extrémités d'un conteneur flexible et entre ses éléments.

space-evenly attribue un espacement régulier aux deux extrémités d'un conteneur flexible et entre ses éléments.

Voici un exemple :

section {
  display: flex;
  justify-content: space-evenly;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la space-evenlyvaleur pour attribuer un espacement égal aux deux extrémités de la boîte flexible et entre ses éléments.

Parlons maintenant du cinquième type de propriété de conteneur flexible.

Quelle est la propriété de Flexbox align-items?

align-items spécifie comment les navigateurs doivent positionner les éléments d'un conteneur flexible le long de l' axe transversal de la flexbox.

La align-itemspropriété accepte les valeurs suivantes :

• stretch
• flex-start
• center
• flex-end
• baseline

Discutons des cinq valeurs.

Qu'y a-t-il align-items: stretchdans CSS Flexbox ?

stretchest align-items' valeur par défaut. Il étire les éléments d'un conteneur flexible pour remplir l'axe transversal de la flexbox.

stretch étire les éléments d'un conteneur flexible pour remplir l'axe transversal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  align-items: stretch;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la stretchvaleur pour étirer les éléments flexibles afin de remplir l' <section>axe transversal de .

Qu'y a-t-il align-items: flex-startdans CSS Flexbox ?

flex-startaligne les éléments d'un conteneur flexible avec le bord de départ croisé de l'axe transversal de la boîte flexible.

flex-start aligne les éléments d'un conteneur flexible avec le bord de départ croisé de l'axe transversal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  align-items: flex-start;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la flex-startvaleur pour aligner les éléments flexibles sur le bord de départ croisé de l' <section>axe transversal de .

Qu'y a-t-il align-items: centerdans CSS Flexbox ?

centeraligne les éléments d'un conteneur flexible sur le centre de l'axe transversal de la boîte flexible.

center aligne les éléments d'un conteneur flexible sur le centre de l'axe transversal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  align-items: center;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la centervaleur pour aligner les éléments flexibles au centre de l' <section>axe transversal de .

Qu'y a-t-il align-items: flex-enddans CSS Flexbox ?

flex-endaligne les éléments d'un conteneur flexible avec le bord transversal de l'axe transversal de la boîte flexible.

flex-end aligne les éléments d'un conteneur flexible avec le bord transversal de l'axe transversal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  align-items: flex-end;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la flex-endvaleur pour aligner les éléments flexibles sur le bord transversal de l' <section>axe transversal de .

Qu'y a-t-il align-items: baselinedans CSS Flexbox ?

baselinealigne les éléments d'un conteneur flexible avec la ligne de base de l'axe transversal de la boîte flexible.

baseline aligne les éléments d'un conteneur flexible sur la ligne de base de l'axe transversal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  align-items: baseline;
  background-color: orange;
  margin: 10px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la baselinevaleur pour aligner les éléments flexibles sur la <section>ligne de base de .

Parlons maintenant du sixième type de propriété de conteneur flexible CSS.

Quelle est la propriété de Flexbox align-content?

align-content spécifie comment les navigateurs doivent positionner les lignes d'un conteneur flexible le long de l' axe transversal de la flexbox .

Remarque : La align-contentpropriété n'affecte pas une boîte flexible avec une seule ligne, par exemple, un conteneur flexible avec flex-wrap: nowrap. En d'autres termes, align-contentne fonctionne que sur les boîtes flexibles à plusieurs lignes.

La align-contentpropriété accepte les valeurs suivantes :

• stretch
• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Discutons des sept valeurs.

Qu'y a-t-il align-content: stretchdans CSS Flexbox ?

stretchest align-contentla valeur par défaut de . Il étire les lignes du conteneur flexible pour remplir l'axe transversal de la flexbox.

stretch étire les lignes du conteneur flexible pour remplir l'axe transversal de la flexbox.

Voici un exemple :

section {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la stretchvaleur pour étirer les lignes de la boîte flexible afin de remplir l' <section>axe transversal de .

Qu'y a-t-il align-content: flex-startdans CSS Flexbox ?

flex-startaligne les lignes d'un conteneur flexible avec le bord de départ croisé de l'axe transversal de la boîte flexible.

flex-start aligne les lignes d'un conteneur flexible avec le bord de départ croisé de l'axe transversal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la flex-startvaleur pour aligner les lignes de la boîte flexible sur le bord de départ croisé de l' <section>axe transversal de .

Qu'y a-t-il align-content: centerdans CSS Flexbox ?

centeraligne les lignes d'un conteneur flexible sur le centre de l'axe transversal de la boîte flexible.

center aligne les lignes d'un conteneur flexible sur le centre de l'axe transversal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la centervaleur pour aligner les lignes de la boîte flexible sur le centre de l' <section>axe transversal de .

Qu'y a-t-il align-content: flex-enddans CSS Flexbox ?

flex-endaligne les lignes d'un conteneur flexible avec le bord transversal de l'axe transversal de la boîte flexible.

flex-end aligne les lignes d'un conteneur flexible avec le bord transversal de l'axe transversal de la boîte flexible.

Voici un exemple :

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la flex-endvaleur pour aligner les lignes de la boîte flexible sur le bord transversal de l' <section>axe transversal de .

Qu'y a-t-il align-content: space-betweendans CSS Flexbox ?

space-betweenfait ce qui suit :

• Il aligne la première ligne de la boîte flexible avec le bord de départ principal de l'axe principal du conteneur flexible.
• Il aligne la dernière ligne de la flexbox avec le côté principal de l'axe principal du conteneur flexible.
• Il crée un espacement égal entre chaque paire de lignes entre la première et la dernière ligne.

space-between crée un espacement égal entre chaque paire de lignes entre la première et la dernière ligne

Voici un exemple :

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la space-betweenvaleur pour créer un espacement égal entre chaque paire de lignes entre la première et la dernière ligne.

Qu'y a-t-il align-content: space-arounddans CSS Flexbox ?

space-aroundattribue un espacement égal de chaque côté des lignes d'un conteneur flexible.

Par conséquent, l'espace avant la première ligne et après la dernière est la moitié de la largeur de l'espace entre chaque paire de lignes.

space-around attribue un espacement égal de chaque côté des lignes d'un conteneur flexible.

Voici un exemple :

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la space-aroundvaleur pour attribuer un espacement égal à chaque côté des lignes du conteneur flexible.

Qu'y a-t-il align-content: space-evenlydans CSS Flexbox ?

space-evenlyattribue un espacement régulier aux deux extrémités d'un conteneur flexible et entre ses lignes.

space-evenly attribue un espacement régulier aux deux extrémités d'un conteneur flexible et entre ses lignes.

Voici un exemple :

section {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  background-color: orange;
  margin: 10px;
  width: 90px;
  height: 500px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la space-evenlyvaleur pour attribuer un espacement égal aux deux extrémités de la boîte flexible et entre ses lignes.

Ainsi, maintenant que nous connaissons les types de propriétés de conteneurs flexibles CSS, nous pouvons discuter des propriétés des éléments flexibles.

Quelles sont les propriétés de l'élément flexible ?

Les propriétés d'un élément flexible spécifient comment les navigateurs doivent disposer un élément spécifié dans le modèle de boîte flexible.

Remarque : nous définissons la propriété d'un élément flexible sur l'élément flexible, et non sur son conteneur.

Les six (6) types de propriétés d'éléments flexibles sont :

• align-self
• order
• flex-grow
• flex-shrink
• flex-basis
• flex

Discutons maintenant des six types.

Quelle est la propriété de Flexbox align-self?

align-self spécifie comment les navigateurs doivent positionner les éléments flexibles sélectionnés le long de l' axe transversal de la flexbox .

Note:

• align-selfaffecte uniquement l'élément flexible sélectionné, et non tous les éléments de la boîte flexible.
• align-selfremplace la align-itemspropriété.

La align-selfpropriété accepte les valeurs suivantes :

• stretch
• flex-start
• center
• flex-end
• baseline

Discutons des cinq valeurs.

Qu'y a-t-il align-self: stretchdans CSS Flexbox ?

stretchétire les éléments flexibles sélectionnés pour remplir l'axe transversal de la boîte flexible.

stretch étire le ou les éléments flexibles sélectionnés pour remplir l'axe transversal de la boîte flexible.

Voici un exemple :

.flex-item2 {
  align-self: stretch;
}

Essayez-le sur StackBlitz

Nous avons utilisé la stretchvaleur à étirer flex-item2pour remplir l'axe transversal de son conteneur.

Qu'y a-t-il align-self: flex-startdans CSS Flexbox ?

flex-startaligne les éléments flexibles sélectionnés avec le bord de départ croisé de l'axe transversal de la boîte flexible.

flex-start aligne le ou les éléments flexibles sélectionnés avec le bord de départ croisé de l'axe transversal de la boîte flexible.

Voici un exemple :

.flex-item2 {
  align-self: flex-start;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la flex-startvaleur pour s'aligner flex-item2sur le bord de départ croisé de l'axe transversal de son conteneur.

Qu'y a-t-il align-self: centerdans CSS Flexbox ?

centeraligne les éléments flexibles sélectionnés sur le centre de l'axe transversal de la boîte flexible.

center aligne le ou les éléments flexibles sélectionnés sur le centre de l'axe transversal de la boîte flexible.

Voici un exemple :

.flex-item2 {
  align-self: center;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la centervaleur pour s'aligner flex-item2sur le centre de l'axe transversal de son conteneur.

Qu'y a-t-il align-self: flex-enddans CSS Flexbox ?

flex-endaligne les éléments flexibles sélectionnés avec le bord transversal de l'axe transversal de la boîte flexible.

flex-end aligne le ou les éléments flexibles sélectionnés avec le bord transversal de l'axe transversal de la boîte flexible.

Voici un exemple :

.flex-item2 {
  align-self: flex-end;
}

Essayez-le sur StackBlitz

L'extrait ci-dessus a utilisé la flex-endvaleur pour s'aligner flex-item2sur le bord transversal de l'axe transversal de son conteneur.

Qu'y a-t-il align-self: baselinedans CSS Flexbox ?

baselinealigne les éléments flexibles sélectionnés avec la ligne de base de l'axe transversal de la boîte flexible.

Voici un exemple :

.flex-item2 {
  font-size: 3rem;
  align-self: baseline;
}

Essayez-le sur StackBlitz

Nous avons utilisé la baselinevaleur pour nous aligner flex-item2sur la ligne de base de son conteneur.

Abordons maintenant le deuxième type de propriété d'élément flexible.

Quelle est la propriété de Flexbox order?

order modifie l'ordre par défaut d'un article flexible (arrangement).

En d'autres termes, ordervous permet de repositionner l'élément d'un flexbox sans modifier la disposition de votre code HTML.

Voici un exemple :

<ul style="display: flex; flex-direction: column">
  <li style="order: 6">1</li>
  <li style="order: 4">2</li>
  <li style="order: 1">3</li>
  <li style="order: 7">4</li>
  <li style="order: 2">5</li>
  <li style="order: 5">6</li>
  <li style="order: 3">7</li>
</ul>

Essayez-le sur StackBlitz

L'extrait de code HTML ci-dessus a utilisé la orderpropriété pour modifier la disposition de la liste non ordonnée.

Ainsi, au lieu de l'ordre suivant :

• d'abord
• 2
• 3
• 4
• 5
• 6
• 7

Le navigateur affichera ceci :

• 3
• 5
• 7
• 2
• 6
• d'abord
• 4

Utilisez la orderpropriété avec précaution, car elle empêche les lecteurs d'écran d'accéder à l'ordre de lecture correct d'un document HTML. Ne l'utilisez que s'il est très important d'utiliser CSS pour modifier la disposition du code HTML.

Mais dans la plupart des cas, il est préférable de réorganiser directement le code HTML plutôt que d'utiliser CSS.

Remarque : La style="value"syntaxe, dans l'extrait de code HTML ci-dessus, est la technique CSS en ligne pour styliser les éléments HTML.

Quelle est la propriété de Flexbox flex-grow?

flex-grow indique aux navigateurs la quantité d'espace restant de la flexbox qu'ils doivent ajouter à la taille de l'élément flexible sélectionné.

Remarque : Un espace restant fait référence à l'espace restant après que les navigateurs ont déduit la somme de toutes les tailles d'éléments flexibles de la taille de la boîte flexible.

Voici un exemple :

.flex-item3 {
  flex-grow: 0.5;
}

<section>
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
  <div class="flex-item4">4</div>
</section>

Essayez-le sur StackBlitz

Nous avons utilisé la flex-growpropriété pour que les navigateurs ajoutent la moitié de <section>l'espace restant de à flex-item3la taille de .

Remarque : flex-grow la valeur par défaut de est 0.

Quelle est la propriété de Flexbox flex-shrink?

flex-shrink indique aux navigateurs de combien l'élément flexible spécifié doit rétrécir lorsque la somme des tailles de tous les éléments dépasse la taille de la flexbox.

En d'autres termes, supposons que la taille de la boîte flexible soit insuffisante pour contenir les éléments flexibles. Dans ce cas, les navigateurs réduiront les éléments pour les adapter au conteneur.

Par conséquent, flex-shrinkvous permet de spécifier le facteur de réduction d'un élément flexible.

Voici un exemple :

.flex-item3 {
  flex-shrink: 0;
}

Essayez-le sur StackBlitz

Nous avons utilisé la flex-shrinkpropriété pour empêcher les navigateurs de rétrécir flex-item3.

Note:

• Les navigateurs ne réduiront pas les éléments flexibles avec une flex-shrinkvaleur de 0.
• flex-shrinkla valeur par défaut est 1.

Quelle est la propriété de Flexbox flex-basis?

flex-basis définit la longueur initiale d'un élément flexible.

Voici un exemple :

.flex-item3 {
  flex-basis: 100px;
}

Essayez-le sur StackBlitz

Nous avons utilisé la flex-basispropriété pour définir flex-item3la longueur initiale de 100px.

Notez ce qui suit :

• autoest flex-basis' valeur par défaut.
• Une flex-basisvaleur ' (autre que auto) a une spécificité plus élevée que width(ou height). Par conséquent, supposons que vous définissiez les deux pour un élément flexible. Dans ce cas, les navigateurs utiliseront flex-basis.
• La flex-basispropriété définit la largeur initiale de la zone de contenu . Mais vous pouvez utiliser la propriété box-sizing pour lui faire définir la largeur de la boîte de bordure à la place.

Quelle est la propriété de Flexbox flex?

flex est un raccourci pour les propriétés flex-grow, flex-shrinket flex-basis.

Autrement dit, au lieu d'écrire :

.flex-item3 {
  flex-grow: 0.5;
  flex-shrink: 0;
  flex-basis: 100px;
}

Vous pouvez également utiliser la flexpropriété pour raccourcir votre code comme ceci :

.flex-item3 {
  flex: 0.5 0 100px;
}

Notez ce qui suit :

• flex: autoest équivalent à flex: 1 1 auto.
• flex: noneest équivalent à flex: 0 0 auto.
• flex: initialdéfinit la flexpropriété sur sa valeur par défaut. C'est équivalent à flex: 0 1 auto.
• flex: inherithérite des valeurs de la propriété de son élément parent flex.

Donc, maintenant que nous connaissons les propriétés flexbox que les développeurs utilisent pour mettre en page les boîtes flexibles et leurs enfants directs, nous pouvons discuter de la façon de centrer les éléments avec flexbox.

Comment centrer des éléments horizontalement avec Flexbox

Vous pouvez centrer n'importe quel élément horizontalement dans son conteneur en :

• Définir la propriété de son conteneur displaysurflex
• Définition de la propriété du conteneur flexible justify-contentsurcenter

Voici un exemple :

section {
  display: flex;
  justify-content: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

Essayez-le sur StackBlitz

Comment centrer des éléments verticalement avec Flexbox

Vous pouvez centrer n'importe quel élément verticalement dans son conteneur en :

• Définir la propriété de son conteneur displaysurflex
• Définition de la propriété du conteneur flexible align-itemssurcenter

Voici un exemple :

section {
  display: flex;
  align-items: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

Essayez-le sur StackBlitz

Comment centrer des éléments horizontalement et verticalement avec Flexbox

Vous pouvez centrer n'importe quel élément HTML horizontalement et verticalement dans son conteneur en :

• Définir la propriété de son conteneur displaysurflex
• Définition des propriétés justify-contentet du conteneur flexible align-itemssurcenter

Voici un exemple :

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  width: 100%;
  height: 400px;
}

Essayez-le sur StackBlitz

Aperçu

Dans cet article, nous avons discuté de tous les outils Flexbox dont vous avez besoin pour créer des mises en page de site Web de base et avancées de manière flexible et réactive.

Merci d'avoir lu!

Source : https://www.freecodecamp.org

#css