Propriétés du conteneur FlexBox dans CSS | Expliqué

Le modèle de mise en page Flexbox présente un moyen de concevoir des sites Web réactifs, et pour ce faire, il fournit de nombreuses propriétés des éléments de conteneur Flex et Flexbox. Pour travailler avec CSS Flexbox, nous avons besoin d'un conteneur où nous allons placer les éléments Flexbox, et pour créer un conteneur Flexbox, nous devons utiliser la propriété d'affichage et définir sa valeur en ligne Flex ou Flex. De plus, CSS fournit une large gamme de propriétés de conteneur Flexbox pour modifier le comportement d'un conteneur Flexbox.

Cet article couvrira les aspects ci-dessous d'un conteneur CSS Flexbox:

• Qu'est-ce qu'un conteneur Flexbox?
• Propriétés du conteneur Flexbox dans CSS
• Comment implémenter les propriétés du conteneur Flexbox dans CSS?

Alors, commençons!

Qu'est-ce qu'un conteneur Flexbox

Le conteneur Flex est une boîte / conteneur qui peut contenir de nombreux éléments flexibles comme indiqué dans la figure ci-dessous:

La zone bleu foncé représente un conteneur flexible dans l'extrait ci-dessus, tandis que la zone bleu clair représente les articles flexibles.

Propriétés du conteneur Flexbox dans CSS

CSS fournit de nombreuses propriétés de conteneur Flexbox qui peuvent être utilisées à diverses fins comme décrit dans les tables divisées:

Propriétés	Description
afficher	Détermine le type de conteneur flex.e. en ligne, bloquer.
direction flexible	Spécifie la direction des éléments dans le conteneur tel que la ligne, la ligne de la ligne, etc.
se dérober à la flexion	Détermine le comportement d'emballage des éléments Flexbox I.e. envelopper ou pas.
flexion	Fournit les fonctionnalités à la fois de Flex-Wrap et Flex-Direction.
flexion	Fournit les fonctionnalités à la fois de Flex-Wrap et Flex-Direction.
justifier	Il aligne les éléments Flexbox le long de l'axe principal.
align-items	Il aligne les éléments le long de l'axe transversal.
contenir l'alignement	Il aligne les lignes du conteneur flex.
écart	Contrôle explicitement les espaces entre les éléments flexibles.

Propriété de direction flexible dans CSS

CSS 3 fournit un direction flexible propriété qui peut être utilisée pour spécifier la direction des éléments dans le conteneur Flexbox. En utilisant le direction flexible Propriété, nous pouvons spécifier la direction de l'élément à partir de haut-fond, de bas, de gauche-droite et de droite.

Syntaxe

L'extrait ci-dessous fournira la syntaxe de base de la propriété CSS Flex-Direction:

Direction flexible: ligne | colonne | Row-Reverse | colonne-reverse;

Les valeurs décrites dans l'extrait ci-dessus peuvent être utilisées pour spécifier les éléments flexibles horizontalement, verticalement, horizontalement mais dans l'ordre inverse, verticalement mais dans l'ordre inverse, respectivement.

Propriété de sport flexion dans CSS

Pour envelopper les éléments du conteneur Flexbox se dérober à la flexion la propriété peut être utilisée. Cela peut prendre l'une des deux valeurs i.e. envelopper ou nowrap. Spécifiant le "envelopper" la valeur enveloppera les éléments du conteneur Flexbox. Cependant, le "Nowrap" La valeur sera utilisée si vous ne souhaitez pas envelopper les éléments du conteneur Flexbox.

Syntaxe

L'extrait ci-dessous fournira la syntaxe de base de la propriété CSS Flex-Wrap:

flex-wrap: wrap | Nowrap | wrap-reverse;

Les valeurs décrites dans l'extrait ci-dessus spécifient si les éléments flex.

Propriété de flux flexible dans CSS

Le flexion la propriété peut être utilisée pour bénéficier des fonctionnalités des deux direction flexible et se dérober à la flexion propriétés.

Syntaxe

L'extrait ci-dessous fournira la syntaxe de base de la propriété CSS Flex-Flow:

Flex-Flow: Flex-Direction Flex-Wrap;

Propriété de justifier en CSS

Il est utilisé pour aligner les éléments du conteneur dans différentes directions telles que le début, la fin, le centre, etc.

Syntaxe

L'extrait ci-dessous fournira la syntaxe de base de la propriété CSS Justify-Content:

Justification-contenu: Centre | START FLEX | Flex-end | Space-Between | Space-Evenly | espace-rage;

Les valeurs centrales, starter et flex-end sont utilisées pour positionner les éléments flexibles au centre, au démarrage et à la fin du conteneur, respectivement. La valeur de l'espace-entre spécifiera l'espace entre les éléments flexibles, la valeur d'espace-même spécifiera l'espace égal autour des éléments flex.

Align-Items Propriété dans CSS

La valeur par défaut de cette propriété est étendue qui étire les éléments flexibles pour s'adapter au conteneur.

Syntaxe

L'extrait ci-dessous montre quelles valeurs la propriété Align-Items peut prendre:

Align-Items: Stretch | START FLEX | Centre | Flex-end | base de référence;

Les valeurs Flex-Start, Center et Flex-End sont utilisées pour positionner les éléments au début, au centre et à la fin du conteneur, tandis que la valeur de base positionne les éléments flexibles à la ligne de base du conteneur.

Alignez la propriété de contenu dans CSS

Il est utilisé pour aligner les lignes flexibles et sa valeur par défaut est extensible.

Syntaxe

L'extrait ci-dessous affichera la syntaxe de base de la propriété de contenu align:

Contenu align: Stretch | START FLEX | Centre | Flex-end | Space-Antound | Space-between;

Propriété GAP dans CSS

Contrôle explicitement les espaces entre les éléments flexibles. Il spécifie la taille de l'espace entre les colonnes et les lignes.

Syntaxe

L'extrait ci-dessous affichera la syntaxe de base de la propriété de contenu align:

GAP: Row-Gap Column-Gap;

Les valeurs fournies ci-dessus définissent respectivement la taille de l'écart entre les lignes et les colonnes.

Comment implémenter les propriétés du conteneur Flexbox dans CSS

Dans cette section, nous mettrons en œuvre les concepts théoriques décrits ci-dessus.

Exemple

Dans cet exemple, nous implémenterons les propriétés d'affichage, d'alignes, de réseaux flexibles et d'espace:

Récipient Flexbox

Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément

L'extrait suivant affichera la sortie respective pour l'extrait de code ci-dessus:

La sortie ci-dessus authentifie le fonctionnement des propriétés du conteneur Flexbox.

Conclusion

Le conteneur flex est une boîte / conteneur qui peut contenir de nombreux éléments flexibles. CSS fournit de nombreuses propriétés de conteneur Flexbox qui peuvent être utilisées à diverses fins. Par exemple, la propriété d'affichage détermine le type de conteneur flexible; La propriété Flex-Direction spécifie la direction des éléments dans le conteneur, comme une ligne, une ligne de réverse, etc. Cet article présente un guide complet pour les propriétés de conteneur Flexbox, leur syntaxe et comment les utiliser dans CSS.