Qu'est-ce que Flexbox dans CSS?

Lors de la conception d'un site Web réactif, vous souhaitez que vos éléments modifient leur comportement tels que la largeur, la hauteur, la résolution, l'orientation, etc. Cet article explique comment rendre vos éléments réactifs en utilisant la disposition Flexbox. Les sujets en discussion sont les suivants.

1. Qu'est-ce que Flexbox
2. Arrière-plan
3. Flexbox Composants
4. Axe flexbox
5. Propriétés Flexbox

Qu'est-ce que Flexbox

CSS Flexbox est un modèle de mise en page qui permet un arrangement efficace et dynamique des éléments. Cette disposition est unidimensionnelle et permet le placement des éléments à 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 rend les éléments flexibles et leur fournit une position appropriée et une symétrie.

Flexbox a été introduit dans CSS version 3 pour organiser des éléments dans un conteneur plus efficacement et dynamiquement. Avant Flexbox, il y avait initialement quatre méthodes de mise en page que nous avons énumérées ci-dessous.

1. Bloc
   Dans le but de créer des sections dans une page Web, la disposition du bloc est utilisée.
2. En ligne
   C'est une méthode de mise en page utilisée pour le texte.
3. Tableau
   Ceci est utilisé pour une table avec des données bidimensionnelles.
4. Positionné
   Ceci est utilisé pour une position définie d'un élément.

Nous allons maintenant discuter de divers composants d'un Flexbox.

Flexbox Composants

Un flexbox se compose de deux composants que nous avons expliqués ci-dessous.

1. contenant du flexion
   Ce composant d'un Flexbox définit les propriétés de l'élément ancêtre en définissant son affichage sur flex ou en ligne.
2. items flexibles
   Il décrit les propriétés des éléments successeurs, en outre, il peut y avoir de nombreux éléments présents à l'intérieur d'un contenant du flexion.

Voici une représentation visuelle d'un Flexbox.

Axe flexbox

Lorsque vous traitez la disposition Flexbox, il y a deux axes qui devraient être pris en charge. Ces axes ont été répertoriés ci-dessous.

1. Axe principal
2. Axe transversal

Les deux axes sont expliqués en détail ci-dessous.

Axe principal

L'axe principal (de gauche à droite) est défini par le direction flexible propriété. Cet axe peut rendre quatre valeurs qui sont; ligne, ligne de ligne, colonne et réverse de colonne.

Dans le cas des deux premières valeurs qui sont ligne, et Row-Reverse, Le Flexbox présente une direction en ligne, ce qui signifie que le conteneur Flex et les éléments seront alignés horizontalement. Alors que, pour le colonne, et chronique-réverse Valeurs La direction du Flexbox sera un bloc, ou en mots plus simples, le conteneur et les éléments seront organisés verticalement.

Axe transversal

La direction de cet axe est perpendiculaire à l'axe principal. Si la direction de l'axe principal est ajustée à ligne ou Row-Reverse Ensuite, l'axe transversal se déplacera le long des colonnes vers le bas, tandis que, dans le cas de la colonne, et la colonne-réverse, l'axe se déplacera le long des lignes.

Les deux axes ont un départ, un point de fin et une certaine longueur entre ces points.

Propriétés Flexbox

Les propriétés d'un flexbox ont été fournies ci-dessous.

1. afficher
Il affiche un élément comme un flex-box.

2. direction flexible
Cette propriété définit la direction des éléments dans un conteneur flex.

3. 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.

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

5. se dérober à la flexion
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.

6. contenir l'alignement
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.

7. flexion
Une propriété raccourci pour la direction flex.

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

9. s'aligner
Cette propriété remplace la propriété Align-Items et est utilisée sur des éléments flexibles.

dix. fléchir
Il indique la longueur des éléments flex.

Voyons un exemple.

Exemple
Ci-dessous, nous vous avons montré un exemple de la façon de créer un Flexbox.

Html

Article
Article
Article<
Article

Ici, nous avons créé un conteneur Div ayant une «flexbox» de classe et nichent quatre autres conteneurs div à l'intérieur.

CSS

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

Tout d'abord, nous attribuons au conteneur principal un affichage flex.

CSS

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

Enfin, nous stylisons les éléments Flex présents dans le Flexbox en utilisant diverses propriétés CSS.

Sortir

Un flexbox a été généré avec succès.

Conclusion

Un Flexbox est un modèle de mise en page qui organise des éléments de manière efficace et dynamique tout en leur donnant des espaces distribués égaux à l'intérieur d'un conteneur. 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 d'un conteneur flexible et d'éléments considérés comme ses composants. De plus, il a des axes principaux, et croix et il présente plusieurs propriétés. Cette écriture couvre tous les détails nécessaires sur un Flexbox ainsi qu'un exemple approprié.