Flex des articles dans CSS | Expliqué

Flexbox est un modèle de mise en page qui aligne les éléments à l'intérieur d'un conteneur dynamiquement en les attribuant un espace également distribué. Cette mise en page s'avère utile pour rendre les éléments réactifs, ce qui signifie que les éléments modifieront leur comportement en fonction du type d'appareil qui les affichait. Ce modèle se compose de deux composants qui sont, un conteneur flexible et des éléments flexibles. Cependant, notre objectif dans cet article sera sur des conteneurs flexibles. Les sujets discutés dans cette rédaction sont les suivants.

1. Qu'est-ce qu'un élément flexible
2. Propriétés de l'élément flexible

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.

Ces éléments rendent certaines propriétés qui sont expliquées en détail ci-dessous.

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

Les propriétés suivantes sont associées à un élément flexible.

commander des biens

Afin de définir l'ordre d'un élément flex.

Syntaxe

Ordre: Num | Initial | hériter;

Paramètres expliqués
nobs: Cette valeur définit l'ordre d'un élément flexible. Par défaut, la valeur est 0.

Exemple
Voici un exemple de la propriété de commande.

Html

Objet 1
Article 2
Article 3
Article 4

Dans le code ci-dessus, un conteneur div a été créé et quatre autres divs ont été imbriqués à l'intérieur. Chacun des div imbriqués a été attribué à une pièce d'identité.

CSS

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

Ici, la plus grande div a été affichée comme un conteneur flexible et a reçu une couleur d'arrière-plan.

CSS

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

Nous stylisons maintenant nos articles présents à l'intérieur du conteneur Flex avec certaines propriétés CSS de base.

CSS

#objet 1
Ordre: 4;

# item2
Commande: 1;

# item3
Ordre: 2;

# item4
Ordre: 3;

Dans le code ci-dessus, nous utilisons l'ID de chaque élément pour lui fournir une commande.

Sortir

Chaque élément a été placé en fonction de sa commande.

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

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

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

#objet 1
Flex-Crow: 15;

Nous définissons la valeur de la propriété Flex-Grow à 15. L'article 1 sera 15 fois plus grand par rapport aux autres articles.

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 dans quelle mesure 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

Afin de régler la longueur de départ d'un élément flexible, la propriété Flex-Basis est utilisée.

Syntaxe

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

Paramètres expliqués
auto: C'est une valeur par défaut qui fournit un élément avec la longueur égale à celle de l'élément flex.

nobs: 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

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

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

# item3
Basis flexible: 300px;

Nous définissons le bassage flexible de l'article 3 à 300px, ce qui signifie que la longueur d'origine du troisiè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é définit la croissance, le rétrécissement et la longueur d'un article en même temps. Il s'agit d'une propriété raccourci pour la croissance flexible, le flex-shrink et le bassin flexible.

Syntaxe

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

Paramètres expliqués
flexion: Il spécifie la croissance de l'élément flexible par rapport aux autres éléments du conteneur.

flexion: Il indique le retrait d'un élément par rapport aux autres éléments

bassin 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

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

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

# item2
Flex: 0 0 300px;

En utilisant la propriété raccourci, la croissance et le rétrécissement du deuxième élément ont été définis sur 0, ce qui signifie que cet élément ne se développera ni ne rétrécira, cependant, il aura une longueur de 300 pixe.

Sortir

La propriété fonctionne correctement.

Aligner la propriété

Afin de décrire la disposition des éléments à l'intérieur d'un conteneur flex.

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 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
Considérez l'exemple ci-dessous pour comprendre la propriété Align-Self.

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 avons fourni une certaine hauteur au conteneur Flex pour montrer le concept de cette propriété de manière claire, en attendant, le reste du code est le même que ci-dessus.

CSS

# item2
Align-Self: Flex-End;

# item3
ALIGN-SEG: Flex-Start;

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

Sortir

Les deux éléments ont été positionnés différemment en utilisant la propriété Align-Self.

Conclusion

Un élément Flex est un composant d'un Flexbox qui définit les propriétés des éléments successeurs. Vous pouvez placer de nombreux éléments flexibles dans un conteneur flex. Il existe certaines propriétés CSS associées à ces éléments tels que l'ordre, l'alignement-soi, la croissance flexible, le flex, etc. Chacun de ceux-ci rend plusieurs valeurs et sert un objectif différent que nous avons démontré à l'aide d'exemples pertinents.