Comment utiliser la propriété CSS Flex-Grow?

Julien Dumas

La propriété CSS Flex-Grow fait partie du «fléchir" mise en page. Son objectif principal est de permettre un espace supplémentaire pour l'élément du Flexbox. Cela se fait en attribuant des nombres en valeur au «flexion" propriété. Un grand nombre de navigateurs prennent en charge cette propriété qui rend la conception inchangée lors de l'ouverture dans plusieurs navigateurs. Il est principalement utilisé lors de la conception de sections de la page Web pour améliorer l'apparence globale du site Web.

Cet article démontre la procédure étape par étape pour utiliser le «flexion" propriété.

Comment utiliser la propriété CSS «Flex-Grow»?

La propriété CSS Flex-Grow est utilisée pour spécifier combien un élément devrait croître avec ses frères et sœurs dans un conteneur flexible. Suivez les étapes mentionnées ci-dessous pour utiliser la propriété CSS Flex-Grow:

Étape 1: Créez un Flexbox
Dans le fichier html, créez d'abord un div parent et ajoutez plusieurs "»Tag Elements dedans. Après cela, attribuez différentes classes à chacun "”Tag qui est utilisé à des fins de style:

S.Non
ID des employés
Nom de l'employé
Salaire
Remarques

Maintenant, dans le fichier CSS, ajoutez les propriétés CSS suivantes:

.struct
Affichage: flex;
Justify-Content: Space-Asound;
flexion-flux: enveloppement en rang;
Align-Items: Stretch;
rembourrage: 20px;
Couleur: Whitesmoke;
Color en arrière-plan: MidnightBlue;

L'explication des propriétés CSS utilisées ci-dessus est écrite ci-dessous:

Premièrement la "fléchir" et "spatial«Les valeurs sont définies pour le«afficher" et "justifier" propriétés. Il crée un div parent comme flex et attribue une partition égale pour chaque élément flex.
Après cela, réglez "enveloppement de rangée" et "extensible"Comme valeur pour le"flexion" et "align-items" propriétés. Il définit la direction de l'élément flexible vers «ligne»Et fait des articles couverts dans l'espace disponible.
En fin de compte, le «rembourrage","Couleur de l'arrière plan" et "couleur«Les propriétés sont utilisées à des fins de visualisation de meilleures.

Après avoir exécuté le code ci-dessus, la page Web ressemble à ceci:

La sortie montre que Flex a été créé et le «items flexibles"Sont alignés dans la direction de la rangée.

Étape 2: Utilisation de la propriété «flex-culb»
Maintenant, sélectionnez différentes classes qui ont été affectées à chaque enfant div dans les étapes ci-dessus. Et attribuer les propriétés CSS suivantes:

.Grow1
Flex-Crow: 1;
Color en arrière-plan: orangered;
rembourrage: 5px;

.Grow2
Flex-Crow: 2;
Color en arrière-plan: bleu;
rembourrage: 5px;

.Grow3
Flex-Crow: 2;
Color en arrière-plan: SpringGreen;
rembourrage: 5px;

.original
Color en arrière-plan: RoyalBlue;
rembourrage: 5px;

L'explication du code ci-dessus est décrite ci-dessous:

Tout d'abord, sélectionnez la classe nommée «Grow1»Et définissez la valeur de 1 au«flexion" propriété. Après cela, des valeurs «orangered» et «5px» sont fournies au «Couleur de l'arrière plan" et "rembourrage»Propriétés, respectivement.
De la même manière, les propriétés de couleur de fond et de rembourrage sont définies sur d'autres classes Div. Ces propriétés sont utilisées pour le «Grow2" et "Grow3»Classes et affectez la propriété Flex-Grow avec différentes valeurs.
Le "flexion«La propriété étend cette division à une certaine valeur à l'intérieur du flexion. Plus la valeur est grande, plus la taille de cette div dans le Flexbox est grande.

Après l'exécution du code ci-dessus, la page Web ressemble à ceci:

La sortie affiche que le «glissade flexible”La propriété étend la div en fonction de certaines valeurs à l'intérieur du flex-box.

Conclusion

Le CSS "flexion»La propriété est utilisée pour attribuer des espaces supplémentaires aux éléments de Flexbox. Le développeur sélectionne le div dans le flexbox puis utilise le «flexion»Propriété et attribue la valeur spécifique. Plus la valeur est grande, plus l'espace alloué à cet élément div à l'intérieur du flexion. Cet article a démontré avec succès comment utiliser la propriété CSS Flex-Grow.