Maîtriser les propriétés Flexbox les plus utiles –

Dans cet article, je vais vous présenter les classes CSS Bootstrap clés pour construire des mises en page avec le système de grille Bootstrap.

Bootstrap 4 utilise Flexbox comme base pour son système de grille. Je vais expliquer les propriétés CSS de Flexbox qui sous-tendent la fonctionnalité de la nouvelle grille, et définir comment les classes d'utilitaires flexibles Bootstrap fonctionnent pour vous aider à créer des mises en pages impressionnantes rapidement et sans douleur. Flexbox . Il représente flex ible boîte et c'est un système de mise en page CSS de pointe qui permet de créer facilement des mises en page pour des tailles d'écran dynamiques ou inconnues. (Le conteneur flexible a la capacité d'ajuster et de contrôler la taille de ses éléments enfants pour s'adapter à différentes fenêtres.)

Vous pouvez facilement créer une mise en page Flexbox en utilisant un ensemble de propriétés CSS conçues pour cette tâche. il est encore plus facile de créer des mises en page basées sur Flexbox en fournissant un ensemble de classes wrapper au-dessus des propriétés Flexbox, que vous pouvez simplement appliquer à votre balisage pour obtenir le résultat souhaité.

Introduction au système de grille Bootstrap

sont un élément important d'un framework CSS, car construire des mises en page complexes sans système de grille puissant et flexible peut être une tâche intimidante.

Parmi les nouvelles fonctionnalités du dernier système de grille Bootstrap vous trouverez le point d'arrêt de grille xl (extra large), correspondant à une taille d'écran extra large, et l'utilisation de Flexbox à la place des flottants comme mécanisme de mise en page sous-jacent.

Classes de clés du système de grille Bootstrap 11] Vous pouvez construire une mise en page en utilisant le système de grille Bootstrap en appliquant un tas de classes Bootstrap: .container .row et .col - * - * . (Le premier * de .col - * - * doit être remplacé par le spécificateur de point de rupture – tel que xs, sm, md, lg, xl – et le second * doit La somme de toutes les colonnes doit être égale à 12.)

Voyons maintenant les composants principaux de la grille Bootstrap.

Container

Le conteneur est l'enveloppe externe de la disposition de la grille. C'est un div qui a la classe .container pour une largeur fixe ou .container-fluid pour une 100% pleine largeur. [19659015] Row

Une ligne sert de conteneur logique pour les colonnes

Colonne

Une colonne est ce qui fait un bloc dans la grille. Elle devrait être contenue dans une rangée.

Le système de grille Bootstrap fournit ces classes de colonnes supplémentaires:

• .col-xs - * : conçu pour les petits écrans de moins de largeur 576px
• .col-sm - * : conçu pour les petits écrans dont la largeur est égale ou supérieure à 576px
• .col-md - * : conçu pour les écrans de taille moyenne avec la largeur> = 768px
• .col-lg - * : conçu pour les grands écrans avec la largeur> = 992px
• .col-xl - * : conçu pour les écrans extra-larges dont la largeur est égale ou supérieure à 1200px .

Vous n'avez pas besoin d'ajouter plusieurs classes si vous souhaitez spécifier la même largeur pour un écran différent tailles; ajoutez simplement la classe avec le plus petit point d'arrêt. Ainsi, par exemple, au lieu de .col-sm-6 et .col-md-6 il vous suffit d'appliquer .col-sm-6

Bootstrap Grid Layouts avec Flexbox vs Floats

Merci à Flexbox, vous pouvez facilement réaliser des choses comme des colonnes de même hauteur ou des colonnes de même largeur, que vous ne pouviez accomplir avec les hacks CSS avant.

CSS ] float et clearfix les techniques de construction de mises en page ont été parmi ces hacks, ce qui rendait difficile la construction et le débogage de mises en page complexes.

Par exemple, considérons une disposition en deux colonnes. Si vous construisez cette mise en page avec Bootstrap 3, elle ressemblera à ceci:

Voir le stylo Bootstrap 3 Mise en page 2 colonnes par SitePoint ( @SitePoint ) le CodePen .

Si vous construisez la même mise en page avec Bootstrap 4, voici ce que vous avez:

Voir le stylo Bootstrap 4 Mise en page 2 colonnes par SitePoint ( @SitePoint ) CodePen .

Avec Bootstrap 4 et sa grille à base de flexbox, vous obtenez une colonne plus réaliste (comme dans une table), car les colonnes d'une même rangée auront la même hauteur .

Nous allons aborder les dispositions de colonnes de même largeur. Grâce à Flexbox, vous pouvez facilement diviser l'espace disponible entre plusieurs colonnes d'une même ligne. Si vous créez une disposition de grille avec plusieurs colonnes sans spécifier la largeur de la colonne (c'est-à-dire en utilisant les classes .col - * ), l'espace disponible sera automatiquement et également réparti entre ces colonnes.

et exemple rapide:

  

     .col
  
  

     .col
  
  

     .col
  
  

     .col
  

  

Les quatre occurrences de .col-sm seront chacune automatiquement 25% de largeur à partir du petit point de rupture.

Avec un style minimal, voici ce que vous obtenez:

Flexbox avec marges automatiques

La combinaison de Flexbox avec des marges automatiques donne quelques astuces cool

[19659005] Par exemple, regardez la disposition ci-dessus: vous pouvez positionner les éléments à droite d'un élément en ajoutant une classe Bootstrap .mr-auto à l'élément, qui correspond à margin-right: auto; en CSS standard, ou positionne également certains éléments à gauche d'un élément spécifié en utilisant la classe Bootstrap .ml-auto ( margin-left: auto; dans CSS standard). Vous pouvez voir cela comme déplaçant l'élément avec les classes .mr-auto ou .ml-auto vers la position la plus à droite ou la plus à gauche, respectivement, et les autres éléments de la

Voir le stylo Bootstrap 4 Flexbox avec des astuces de marges automatiques par SitePoint ( @SitePoint ) sur CodePen .

Vous pouvez accomplir ce résultat soit horizontalement ou verticalement. Pour atteindre le même comportement en déplaçant les éléments flexibles vers le haut ou le bas (plutôt que vers la droite ou vers la gauche), vous devez utiliser mb-auto ( margin-bottom: auto; ]) et mt-auto ( margin-top: auto; ), définissez flex-direction à colonne et appliquez le ] align-items- (début | fin) classe .

Voir le stylo Bootstrap 4 Flexbox avec astuces de marges automatiques par SitePoint ( @SitePoint ) le

Bootstrap 4 utilise des classes d'utilitaire flex spécifiques ce qui peut sembler quelque peu ésotérique à quelqu'un qui n'a jamais entendu parler de Flexbox ou de doesn ' Par exemple, Bootstrap applique maintenant la propriété display: flex à ses éléments de conteneur de grille. En outre, Bootstrap vous permet de transformer n'importe quel conteneur HTML en un conteneur flexible en appliquant simplement la classe .d-flex à votre élément choisi.

Il existe également des classes réactives telles que .d- sm-flex et .d-md-flex etc.

Cependant, si vous ne savez pas ce qu'est un conteneur flexible et comment il affecte ses éléments enfants, utilisez l'utilitaire Bootstrap flex les cours pourraient être un peu problématiques. La même chose pourrait être dite de tous les autres utilitaires flex comme .flex-row .flex-row-reverse .flex-colonne et .flex-column-reverse .

Passons en revue rapidement le fonctionnement de Flexbox. Il est très probable que vous le trouverez utile lors de la gestion des classes d'utilitaires flexibles Bootstrap

Flex Containers

Flexbox définit un conteneur flexible en appliquant la propriété display avec le flex ou valeurs de inline-flex :

 .mycontainer {
  affichage: flex;
}

La classe d'utilitaire Bootstrap flex pour créer un conteneur flexible est d-flex .

Éléments Flex

Chaque élément enfant direct d'un conteneur flexible est transformé en un

Vous pouvez définir la direction des éléments flex en utilisant la propriété CSS flex-direction avec l'une des valeurs suivantes: row ] row-reverse colonne et column-reverse .

• row définit la direction horizontale de gauche à droite
• row-reverse définit la direction horizontale de droite à gauche
• La colonne définit la direction verticale de haut en bas
• L'inversion de colonne définit la direction verticale de bas en haut.

Bootstrap utilise les classes ] ligne de flexion flex-row-reverse flex-colonne et flex-colonne-inverse pour déterminer la direction des éléments flex.

En outre, Flexbox vous permet de modifier explicitement l'ordre visuel d'éléments flex spécifiques en utilisant la propriété order qui par défaut est zéro:

 .item {
  commande: 1;
}

Bootstrap propose ses propres classes d'utilitaires de commande pour créer un élément flexible en premier, en dernier ou pour réinitialiser la propriété order à l'ordre DOM par défaut. Par exemple, pour faire apparaître un élément flexible en premier par rapport à ses frères et sœurs, ajoutez order-1 au balisage

Alignement des éléments Flex

Flexbox facilite l'alignement des éléments flexibles

Par exemple, la propriété justify-content sur le conteneur flexible vous permet d'aligner des éléments flexibles sur l'axe principal (l'axe des x par défaut, que vous pouvez modifier en le définissant la flex-direction à la colonne ). Les valeurs disponibles sont:

• flex-start : il s'agit de la valeur initiale et alignera les éléments au début du conteneur
• flex-end aligne les éléments à la fin de l'élément parent [19659021] center aligne les éléments au centre du conteneur
• space-between crée un espace entre les éléments flex après qu'ils ont été disposés
• space-around crée une quantité égale

Les classes d'utilitaire Bootstrap pour appliquer les valeurs justify-content aux éléments sont les suivantes:

• justify-content-start
• contenu-fin
• justify-content-centre
• justify-contenu-entre
• justify-content-around

Le Flexbox align-items propriété vous permet de modifier l'alignement des éléments flex dans l'axe croisé. (Si vous définissez l'axe principal comme étant horizontal, l'axe transversal sera vertical, et vice versa.)

Les valeurs possibles pour align-items sont:

• stretch : ceci est la valeur initiale, qui amène les éléments flex à s'étendre à la hauteur de leurs plus grands éléments frères
• flex-start aligne les éléments au début du conteneur flexible
• flex-end les éléments situés à la fin du conteneur flexible
• center sont responsables du centrage de l'élément flexible dans son conteneur.

Vous pouvez appliquer rapidement ce comportement aux classes Bootstrap suivantes:

• align-items-stretch
• aligner-éléments-commencer
• align-items-fin
• aligner-items-centre

Consultez le code de ce stylo pour un exemple de comment vous pouvez appliquer des classes d'utilitaires flexibles Bootstrap:

Voir le stylo Bootstrap 4 Alignement vertical par SitePoint ( @SitePoin t ) le CodePen .

Vous pouvez trouver d'autres utilitaires disponibles dans le document Bootstrap flex docs .

Conclusion

Dans cet article, nous avons examiné comment Flexbox rend le système de grille Bootstrap plus polyvalent, avec des fonctionnalités telles que des dispositions automatiques de même largeur et des colonnes de même hauteur. Nous avons ensuite examiné certaines propriétés de Flexbox qui sont essentielles pour maîtriser les classes d'utilitaires flexibles Bootstrap et tirer le meilleur parti de leurs capacités de mise en page puissantes.

Si vous avez entendu parler de Bootstrap, trop compliqué, alors jouez à travers notre cours Introduction à Bootstrap 4 pour une introduction rapide et amusante au pouvoir de Bootstrap.

Ahmed est un entrepreneur web, un développeur, un spécialiste du marketing numérique et un blogueur. Il écrit sur le développement de logiciels et de sites Web, des trucs pour gagner de l'argent, le référencement et plus encore. Vous pouvez trouver plus de ses écrits sur son site Techiediaries .

Le meilleur outil 2023 pour ta croissance Instagram !

Source link

Partager :

• Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
• Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)

Articles similaires