Conteneur flexion dans CSS | Expliqué

Le modèle de mise en page Flexbox fournit un arrangement efficace et dynamique des éléments en les plaçant à l'intérieur d'un conteneur avec un espace également distribué. Cette disposition rend les éléments réactifs, ce qui signifie que les éléments modifient leur comportement en fonction du type d'appareil qui les affichait. Il se compose de deux composants qui sont, un conteneur flexible et des éléments flexibles. Cependant, ici, nous ne soulignerons que des conteneurs flexibles. Les sujets abordés sont.

1. Qu'est-ce qu'un conteneur flexible
2. Propriétés du conteneur flexible

Qu'est-ce qu'un conteneur flexible?

Ceci est un composant d'un Flexbox qui définit les propriétés de l'élément ancêtre en définissant son affichage sur flex ou en ligne.

Les propriétés associées au conteneur flex sont expliquées ici.

Propriétés du conteneur flexible

Propriétés liées à un conteneur flexible.

1. propriété de direction flexible
2. Propriété de sport flex
3. propriété de flux flexible
4. propriété de justifier
5. Propriété des éléments d'alignement
6. Propriété de contenu align

Ces propriétés sont expliquées en détail ci-dessous.

propriété de direction flexible

Afin de définir la direction des éléments présents dans un Flexbox, la propriété Flex-Direction est utilisée.

Syntaxe

Direction flexible: ligne | Row-Reverse | Colonne | colonne -reverse | Initial | hériter;

Paramètres expliqués

ligne: Cette valeur par défaut organise les éléments horizontalement.

Row-Reverse: Cette valeur place des éléments d'affilée mais avec une direction inverse.

colonne: Il organise les éléments verticalement.

chronique-réverse: Il organise les éléments dans une colonne mais de manière inverse.

Exemple

L'exemple ci-dessous démontre le fonctionnement de la propriété Flex-Direction.

Html

Objet 1
Article 2
Article 3
Article 4

Ici, nous avons imbriqué quatre conteneurs Div à l'intérieur d'un plus grand conteneur div et lui avons attribué une classe «flexbox».

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
Flex-Direction: Row-Reverse;

Dans le code ci-dessus, nous affichons le plus grand div sous forme de conteneur flex.

CSS

.flexbox div
Color d'arrière-plan: Lightgrey;
Largeur: 150px;
marge: 15px;
rembourrage: 20px;
taille de police: 35px;

Maintenant, nous stylisons nos articles à l'intérieur du conteneur en utilisant diverses propriétés CSS.

Sortir

Les éléments flexibles sont placés dans la même ligne mais dans l'ordre inverse.

Propriété de sport flex

Cette propriété indique si les éléments doivent être enroulés autour de la ligne Flex ou non.

Syntaxe

flex-wrap: Nowrap | Emballage | wrap-reverse | Initial | hériter;

Paramètres expliqués

nowrap: Cette valeur par défaut n'enveloppe pas les éléments.

envelopper: Il enveloppe les éléments si nécessaire.

wrap-reverse: Il enveloppe les éléments si nécessaire, mais de manière inverse.

Exemple

Voici comment cette propriété enveloppe les éléments à l'intérieur du Flexbox. Pour voir l'effet de cette propriété, vous devez redimensionner la fenêtre du navigateur.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
wrap flex: enveloppement;

Dans le code ci-dessus, nous avons réglé la propriété Flex-Wrap pour envelopper. Cette valeur enveloppe les éléments dans un conteneur.

CSS

.flexbox div
Color d'arrière-plan: Lightgrey;
Largeur: 150px;
marge: 15px;
rembourrage: 20px;
taille de police: 35px;

En utilisant des CS de base, nous avons stylé nos articles flexibles.

Sortir

Les articles flexibles ont été enveloppés.

propriété de flux flexible

Il indique la direction des éléments tout en spécifiant s'il faut envelopper les éléments ou non. Ceci est une propriété scolarisée pour la direction de flux et le débit de flux.

Syntaxe

Flex-Flow: Flow-Direction Flow-Wrap | Initial | hériter;

Paramètres expliqués

sens de l'écoulement: Il définit la direction des éléments.

se débarrasser de l'écoulement: Il indique si les éléments doivent être enveloppés ou non.

Exemple

Considérez l'exemple ci-dessous pour comprendre le fonctionnement de cette propriété.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
flexion-flux: enveloppement en ligne de ligne;

En utilisant la propriété raccourci, nous avons réglé la direction des éléments flex.

Sortir

Les articles ont été enveloppés dans les rangées de manière inverse.

propriété de justifier

Si les éléments d'un Flexbox ne consomment pas entièrement l'espace horizontal, la propriété de justification les aligne sur l'axe principal.

Syntaxe

Justify-CONTENT: Flex-Start | Flex-end | Centre | Space-Between | Space-Assound | Space-Evenly | Initial | hériter;

Paramètres expliqués

démarrer en flexion: Il positionne les éléments au début du conteneur et est la valeur par défaut.

flexion: Cela place les éléments à la fin du conteneur.

centre: Cela positionne les éléments au centre du récipient.

l'espace entre: Il ajoute de l'espace entre les articles.

spatial: Il ajoute des espaces avant, entre et après chaque élément.

espace-même: Cela donne à chaque élément des espaces égaux.

Exemple

Supposons que vous souhaitiez justifier votre contenu à la fin du conteneur flex.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
Justify-Content: Flex-end;

La valeur Flex-End Posera tous les éléments flexibles à la fin du conteneur.

Sortir

La propriété fonctionne correctement.

Propriété des éléments d'alignement

Cette propriété définit la disposition des éléments dans un conteneur verticalement.

Syntaxe

Align-Items: Stretch | Centre | START FLEX | Flex-end | Baseline | Initial | hériter;

Paramètres expliqués

extensible: C'est une valeur par défaut qui étire les éléments pour s'adapter au conteneur.

centre: Cela positionne les éléments au centre du récipient.

démarrer en flexion: Il positionne les éléments au début du conteneur et est la valeur par défaut.

flexion: Cela place les éléments à la fin du conteneur.

base de base: Cela positionne les éléments à la ligne de base du conteneur.

Exemple

Ici, nous démontrant la valeur centrale de la propriété Align-Items.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
hauteur: 200px;
Align-Items: Centre;

Pour démontrer correctement cette propriété, nous fournissons une certaine hauteur au conteneur Flex et définissons la propriété Align-Items au centre.

Sortir

Les articles ont été alignés verticalement au centre du conteneur.

Propriété de contenu align

Il modifie le comportement de la propriété Flex-Wrap et est à peu près similaire à la propriété de contenu Justify avec la seule différence étant qu'il aligne véritablement les éléments flexibles.

Syntaxe

Align Content: Flex-Start | Flex-end | Centre | Space-Between | Space-Assound | Space-Evenly | Initial | hériter;

Paramètres expliqués

démarrer en flexion: Il positionne les éléments au début du conteneur et est la valeur par défaut.

flexion: Cela place les éléments à la fin du conteneur.

centre: Cela positionne les éléments au centre du récipient.

l'espace entre: Il ajoute de l'espace entre les articles.

spatial: Il ajoute des espaces avant, entre et après chaque élément.

espace-même: Cela donne à chaque élément des espaces égaux.

Exemple

Pour comprendre comment fonctionne la propriété de contenu align, consultez l'exemple ci-dessous.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
hauteur: 300px;
wrap flex: enveloppement;
Align Content: Space-Asound;

Ici, nous avons encore augmenté la hauteur du conteneur afin que vous puissiez comprendre cette propriété d'une meilleure manière. Enfin, nous avons attribué la propriété de contenu align la valeur de l'espace.

Sortir

L'espace autour de chaque élément verticalement a été ajouté avec succès.

Conclusion

Le conteneur Flex qui est un composant d'un Flexbox définit les propriétés de l'élément ancêtre en définissant son affichage sur flexion ou en ligne. CSS fournit de nombreuses propriétés connectées au conteneur Flex et peut être utilisée pour définir les caractéristiques du conteneur flexible. Peu de propriétés liées au conteneur Flex sont; Direction flexible, contenu align, éléments d'alignement, flux flexible, etc. Chacune de ces propriétés est expliquée en détail avec des exemples pertinents.