Propriétés des éléments Flexbox dans CSS | Expliqué
Cet article vous aidera à comprendre les aspects ci-dessous des éléments CSS Flexbox:
- Éléments Flexbox dans CSS
- Propriétés des éléments de Flexbox dans CSS
- Comment implémenter les propriétés des éléments Flexbox dans CSS
Alors, commençons!
Éléments Flexbox dans CSS
Lors de la création du conteneur Flex dans le Flexbox, nous utilisons la propriété d'affichage et y attribuons une valeur, comme Flex, en ligne. À ce moment-là, l'enfant direct de ce conteneur Flex devient l'élément flexible. Le chiffre ci-dessous fournira une meilleure compréhension:
Propriétés des éléments de Flexbox dans CSS
Le tableau ci-dessous vous fournira un bref aperçu des propriétés Flexbox:
| Propriétés | Description |
|---|---|
| commande | Il contrôle l'ordre des éléments enfants dans le conteneur flex. |
| flexion | Il détermine le facteur de croissance d'un élément flexible. |
| flexion | Il détermine le facteur de rétrécissement pour un élément enfant / élément flexible. |
| bassin flexible | Il détermine la taille initiale d'un élément enfant / élément flex. |
| fléchir | Il s'agit d'une propriété raccourci pour trois propriétés Flex-Grow, Flex-Shrink et Flex-Basis. |
| s'aligner | Il permet à l'alignement par défaut (le long de l'axe transversal) d'être remplacé pour les éléments enfants individuels / éléments flexibles. |
Comment implémenter les propriétés des éléments Flexbox dans CSS
Dans cette section, nous discuterons de chaque propriété Flexbox mentionnée ci-dessus et les implémenterons pratiquement pour une compréhension profonde:
Exemple 1: propriété de commande CSS
Il faut une valeur numérique pour trier les éléments dans un ordre spécifique. L'extrait de code ci-dessous vous permettra de comprendre comment la propriété de commande fonctionne dans un Flexbox:
Commander des biens
Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément
Dans l'extrait de code ci-dessus, nous avons utilisé la propriété de commande pour organiser les éléments Flexbox en fonction de notre choix:
La sortie montre que la propriété de commande a organisé les éléments Flex en fonction de la commande spécifiée par l'utilisateur.
Exemple 2: propriété CSS Flex-Grow
Il faut une valeur numérique qui représente la vitesse à laquelle un élément flexion se développera par rapport aux autres éléments flexibles. Pour la clarté des concepts, considérons le morceau de code ci-dessous:
propriété flex-promenade
Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément
Dans cet exemple, la valeur par défaut de la propriété Flex-Grow est 0, donc chaque élément de conteneur augmentera en conséquence. Cependant, les deuxième et quatrième éléments du conteneur augmenteront douze fois plus rapidement que les autres éléments car ces deux éléments ont spécifié la valeur de la propriété Flex-Grow à 12:
L'extrait ci-dessus a vérifié le fonctionnement de la propriété flex-promenade.
Exemple 3: propriété CSS Flex-Basis
Dans l'extrait de code ci-dessous, nous implémenterons la propriété Flex-Basis pour définir la taille des deuxième et quatrième éléments du conteneur:
propriété de base flexible
Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément
Nous définissons la valeur de la propriété Flex-Basis comme 150px pour les deuxième et quatrième éléments. Le code ci-dessus générera la sortie suivante:
De même, nous pouvons utiliser les autres propriétés de l'élément Flexbox pour atteindre différentes fonctionnalités.
Conclusion
Le conteneur Flex ou l'élément parent est une boîte / conteneur qui contient plusieurs éléments flex. Pour créer le conteneur Flex dans le Flexbox, nous utilisons la propriété Affichage et lui attribuons la valeur flex ou en ligne; En conséquence, l'enfant direct de ce conteneur flex. Dans CSS, plusieurs propriétés sont disponibles pour fonctionner avec des éléments Flexbox, tels que les commandes de l'ordre des éléments Flexbox, Flex-Grow détermine le facteur de croissance des éléments Flex, etc. Cet article a couvert plusieurs propriétés de l'élément Flexbox et a expliqué comment les utiliser pour atteindre leurs fonctionnalités.