Propriétés CSS Flexbox | Expliqué

Un site Web réactif vous oblige à faire en sorte que les éléments modifient leur comportement tels que la largeur, la hauteur, la résolution, l'orientation, etc. CSS fournit certaines entités qui peuvent vous aider à créer un site Web réactif tel que les requêtes avec les médias, la grille, la flexion, etc. Ici, dans cet article, notre objectif sera sur Flexbox et les propriétés qui lui sont associées. Les sujets mis en évidence dans ce post sont les suivants.

1. Qu'est-ce que Flexbox
2. Qu'est-ce qu'un conteneur flexible
3. Qu'est-ce qu'un élément flexible
4. Propriétés Flexbox

Qu'est-ce que Flexbox

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.

Un Flexbox rend essentiellement des éléments flexibles et leur fournit une position appropriée et une symétrie.
Il comprend deux de deux composants qui sont des conteneurs flexibles et des éléments flexibles. Ces deux composants sont expliqués ci-dessous.

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.

Qu'est-ce qu'un élément flexible

Un élément flexible décrit les propriétés des éléments successeurs, en outre, il peut y avoir de nombreux éléments flexibles présents dans un conteneur flexible.

Maintenant que nous avons une bonne compréhension d'un Flexbox et de ses composants, nous explorerons diverses propriétés associées au Flexbox.

Propriétés Flexbox

Ci-dessous, nous avons expliqué en profondeur les différentes propriétés liées à un Flexbox.

affichage des biens

Dans le but de dire comment un élément sera affiché, la propriété d'affichage est utilisée.

Syntaxe

Affichage: flex;

Paramètres expliqués

Flex: cette valeur affiche un élément comme un conteneur flexible.

Exemple

Supposons que vous souhaitiez qu'un conteneur div soit affiché sous forme de flexion. C'est comme ça que c'est fait.

Html

Dans le but de dire comment un élément sera affiché, la propriété d'affichage est utilisée.

Ici, nous avons généré un conteneur Div et un paragraphe a été imbriqué à l'intérieur.

CSS

.récipient
Affichage: flex;
Color en arrière-plan: Aquamarine;

En utilisant la classe attribuée à l'élément div, nous définissons son affichage sur flexion et lui donnant une certaine couleur d'arrière-plan.

Sortir

Le div a été affiché avec succès comme un flex-box.

Les autres propriétés liées à Flexbox sont divisées en deux catégories, qui sont des propriétés de conteneur flex. Nous discuterons des deux classes séparément.

Propriétés du conteneur flexible

Les propriétés qui relèvent de cette catégorie sont les suivantes.

propriété de direction flexible

Cette propriété est utilisée pour décrire la direction des éléments présents dans un Flexbox.

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 les éléments d'affilée mais avec une direction inverse.
colonne: Il organise les articles verticalement.
Colonne-Reverse: Il organise les éléments dans une colonne mais d'une manière inverse.

Exemple

Placez certains éléments dans un flex-box ayant une direction «Row».

Html

Objet 1
Article 2
Article 3
Article 4

Dans le code ci-dessus, nous créons un récipient Div plus grand et nichent quatre autres conteneurs Div à l'intérieur.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
Direction flexible: ligne;

Ici, nous affichons la plus grande div comme un conteneur flex.

CSS

.éléments 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 les propriétés CSS de base.

Sortir

Les articles ont été organisés dans une rangée.

propriété de justifier

Si les éléments d'un Flexbox ne consomment pas entièrement l'espace horizontal, alors cette propriété 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

Start flexible: Il positionne les éléments au début du conteneur et est la valeur par défaut.
Flex-end: Cela place les éléments à la fin du conteneur.
centre: Cela positionne les éléments au centre du conteneur.
l'espace entre: Il ajoute de l'espace entre les articles.
Space-Assound: 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 au centre du conteneur flex.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
Justification-contenu: centre;

La valeur centrale positionnera tous les éléments flexibles au centre du conteneur.

CSS

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

En utilisant CSS de base, nous stylisons les éléments.

Sortir

Les articles ont été placés avec succès au centre.

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

Si les éléments d'un Flexbox ne consomment pas entièrement l'espace vertical, cette propriété les aligne sur l'axe transversal.

Syntaxe

_Strch _ Center _ Flex-Start _ Flex-end _ BASELINE _ Initial _ Héritage

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 conteneur.
Start flexible: Il positionne les éléments au début du conteneur et est la valeur par défaut.
Flex-end: Cela place les éléments à la fin du conteneur.
Baseline: Cela positionne les éléments à la ligne de base du conteneur.

Exemple

Ici, nous avons montré comment fonctionne la valeur de base de la propriété Align-Items.

CSS

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

Pour démontrer correctement cette propriété, nous fournissons une certaine hauteur au conteneur flex.

Sortir

La propriété fonctionne correctement.

Propriété de sport flex

S'il n'y a pas beaucoup d'espace sur une seule ligne de flexion, cette propriété décide d'envelopper des éléments 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

Pour comprendre cette propriété, consultez l'exemple ci-dessous.

CSS

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

Dans le code ci-dessus, nous avons réglé la propriété Flex-Wrap sur Wrap-Reverse, ce qui signifie que si nécessaire, les éléments dans le conteneur seront enveloppés mais de manière inverse.

Sortir

Les articles étaient enveloppés de manière inverse.

Propriété de contenu align

Il modifie le comportement de la propriété Flex-Wrap et est à peu près similaire à la propriété Align-Items avec la seule différence étant qu'il aligne les lignes flexibles plutôt que 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

Start flexible: Il positionne les éléments au début du conteneur et est la valeur par défaut.
Flex-end: Cela place les éléments à la fin du conteneur.
centre: Cela positionne les éléments au centre du conteneur.
l'espace entre: Il ajoute de l'espace entre les articles.
Space-Assound: Il ajoute des espaces avant, entre et après chaque élément.
Espace-même: Cela donne à chaque élément des espaces égaux.

Exemple

Voici un exemple de la propriété en discussion.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
hauteur: 300px;
wrap flex: enveloppement;
ALIGN-CONTENT: SPACE-BETTOUR;

Ici, nous avons encore augmenté la hauteur du conteneur afin que vous puissiez comprendre cette propriété d'une meilleure manière. En outre, nous avons attribué la propriété de contenu align la valeur de l'espace-intermédiaire qui ajoutera de l'espace entre les éléments.

Sortir

L'espace entre les articles a été ajouté avec succès.

propriété de flux flexible

Il décrit la direction des éléments tout en spécifiant s'il faut envelopper les éléments ou non, en outre, c'est une propriété scolarisée pour le suivi.

1. sens de l'écoulement
2. se débarrasser de l'écoulement

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.
débat de flux: 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: enveloppe de réverse colonne;

À l'aide de la propriété raccourci, nous avons réglé la direction des éléments flex.

Sortir

Les éléments ont été enveloppés dans une colonne mais dans l'ordre inverse.

Maintenant, nous allons discuter de notre prochaine catégorie.

Propriétés de l'élément flexible

Les propriétés associées à l'élément flex.

commander des biens

Il définit l'ordre d'un élément flex.

Syntaxe

Ordre: Num | Initial | hériter;

Paramètres expliqués

NUM Cette valeur définit l'ordre d'un élément flexible. Par défaut, la valeur est 0.

Exemple

Voici comment vous définissez l'ordre des éléments dans Flexbox.

Html

Objet 1
Article 2
Article 3
Article 4

Pour comprendre correctement cette propriété, nous attribuons à chaque div imbriqué un identifiant.

CSS

.flexbox
Affichage: flex;
Color en arrière-plan: Aquamarine;
hauteur: 250px;

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

Ici, nous affichons d'abord le conteneur DIV en tant que flexbox et lui fournissant une certaine hauteur pour démontrer le fonctionnement correctement, et enfin nous stylins nos éléments Flex.

CSS

#objet 1
Ordre: 4;

# item2
Commande: 1;

# item3
Ordre: 2;

# item4
Ordre: 3;

En utilisant ces ID, nous attribuons une commande à chaque élément.

Sortir

Les articles ont été passés dans la commande attribuée.

Aligner la propriété

Cette propriété est utilisée pour définir le positionnement des éléments à l'intérieur d'un conteneur flexible. Cette propriété remplace la propriété Align-Items et est utilisée sur des éléments flexibles.

Syntaxe

Align-Self: Auto | Étirement | Centre | START FLEX | Flex-end | Baseline | Initial | hériter;

Paramètres expliqués

auto: Il s'agit d'une valeur par défaut qui hérite des caractéristiques du conteneur des ancêtres ou s'il n'y a pas de conteneur d'ancêtre, il étire l'élément.
extensible: Il étire les articles pour s'adapter au conteneur.
centre: Cela positionne les éléments au centre du conteneur.
Start flexible: Il positionne les éléments au début du conteneur et est la valeur par défaut.
Flex-end: Cela place les éléments à la fin du conteneur.
Baseline: Cela positionne les éléments à la ligne de base du conteneur.

Exemple

Considérez l'exemple ci-dessous.

CSS

# item2
ALIGN-SEG: Centre;

# item3
ALIGN-SEG: Flex-Start;

En utilisant les ID attribués, l'article 2 a été positionné au centre du conteneur, cependant, l'article 3 a été placé au début du conteneur.

Sortir

Les deux éléments ont été alignés avec succès.

propriété flex-promenade

Cette propriété décrit la mesure dans laquelle un élément se développera par rapport aux autres éléments présents à l'intérieur du conteneur.

Syntaxe

Flex-Grow: Numéro | Initial | hériter;

Paramètres expliqués

nombre: Cette valeur indique l'étendue de la croissance d'un élément. Par défaut, la valeur est 0.

Exemple

Supposons que nous voulons simplement développer un élément par rapport aux autres. Voici comment tu fais.

CSS

# item2
Flex-Crow: 10;

Nous définissons la valeur de la propriété Flex-Grow sur 10, ce qui signifie que l'élément 2 sera 10 fois plus grand par rapport aux autres éléments.

Sortir

La propriété fonctionne correctement.

propriété flex-shrink

Cette propriété définit la mesure dans laquelle un élément se rétrécira par rapport aux autres éléments présents à l'intérieur du conteneur.

Syntaxe

flex-shrink: numéro | Initial | hériter;

Paramètres expliqués

nombre: Il indique la mesure dans laquelle un élément se rétrécira. Par défaut, la valeur est 0.

Exemple

Voici un exemple de cette propriété.

Html

1
2
3
4
5

Pour comprendre le fonctionnement de cette propriété, nous avons créé un plus grand conteneur div et imbriqué cinq autres conteneurs div à l'intérieur du plus grand. De plus, chaque div a reçu une couleur d'arrière-plan différente afin que le concept de cette propriété puisse être démontré correctement.

CSS

.récipient
Affichage: flex;
Largeur: 400px;
hauteur: 200px;

.conteneur div
Basis flexible: 100px;

Ici, nous affichons le plus grand div en tant que Flexbox, en outre, nous lui donnons également une certaine largeur et hauteur. Enfin, nous définissons son bas-bas à 100px qui définit la longueur de départ d'un élément flexible.

CSS

.article
flex-shrink: 4;

En utilisant la classe attribuée aux deux derniers conteneurs DIV, nous définissons leur flex-shrink sur 4, ce qui signifie que ces éléments seront 4 fois plus petits que les autres éléments de la grille.

Sortir

Les articles 4 et 5 sont plus petits que le reste des articles.

propriété de base flexible

Aux fins de la définition de la longueur de départ d'un élément flexible, cette propriété est utilisée.

Syntaxe

Flex-bass: Auto | num | Initial | hériter;

Paramètres expliqués

auto: Il s'agit d'une valeur par défaut qui fournit un élément avec la longueur égale à celle de l'élément flexible.
NUM Il indique la longueur d'origine d'un élément.

Exemple

Supposons que vous souhaitiez donner un élément flexible une longueur initiale. Nous avons montré comment c'est fait.

CSS

# item4
Basis flexible: 300px;

Nous définissons le bassage flexible de l'article 4 à 300px, ce qui signifie que la longueur d'origine du quatrième élément sera de 300px.

Sortir

La longueur initiale du troisième élément a été définie avec succès.

propriété flexible

Cette propriété établit la croissance, le retrait et la durée d'un article en même temps, en outre, c'est une propriété scolarisée pour

1. croissance flexible
2. flexion
3. bassin flexible

Syntaxe

Flex-Property: Flex-Grow Flex-Shrink Flex-Basis | Initial | hériter;

Paramètres expliqués

Flex-Grow: Il spécifie la croissance de l'élément flexible par rapport aux autres éléments du conteneur.
flex-shrink: Il indique le retrait d'un élément par rapport aux autres éléments
Basis flexible: Il fournit la longueur de départ d'un élément.

Exemple

Consultez l'exemple ci-dessous pour comprendre la propriété Flex.

CSS

# item2
Flex: 0 0 250px;

L'article 2 ne grandira ni ne rétrécira, cependant, il aura une longueur de 250px.

Sortir

La propriété fonctionne correctement.

Conclusion

Les propriétés associées à Flexbox sont classées en deux catégories qui sont des propriétés de conteneur Flex et des propriétés Flex Box. Les propriétés liées au conteneur Flex sont; flex-flow, direction flexible, contenu align, justifier, etc. Pendant ce temps, les propriétés liées à l'élément Flex sont; commande, flex-culte, flex-bass, aligne-self, etc. Toutes ces propriétés sont discutées dans ce tutoriel ainsi que des exemples pertinents.