Modèle de mise en page CSS Flexbox | Expliqué
Cet article vous aidera dans les aspects suivants du modèle CSS Flexbox:
- Quel est le modèle de mise en page CSS Flexbox
- Qu'est-ce qu'un conteneur CSS Flex
- Caractéristiques du modèle Flexbox
- Concept de base du modèle de mise en page CSS Flexbox
- Propriétés Flexbox
- Exemples
Alors, commençons!
Quel est le modèle de mise en page CSS Flexbox
Il s'agit d'un module de mise en page flexible disponible dans CSS3 qui offre un moyen simple et clair d'organiser des éléments flexibles à l'intérieur d'un conteneur. Cela nous aide à concevoir la disposition réactive.
Qu'est-ce qu'un conteneur CSS Flex
Afin de travailler avec le modèle Flexbox, nous devons d'abord comprendre ce qu'est un conteneur Flex et le faire, considérons la figure ci-dessous:
Dans l'extrait ci-dessus, la zone grise représente un conteneur flexible tandis que l'article 1, l'article 2, etc. sont ses articles. Ainsi, nous pouvons dire que le conteneur Flex est une boîte / conteneur qui peut contenir plusieurs éléments flexibles.
Caractéristiques du modèle Flexbox
Le modèle de mise en page CSS Flexbox offre de nombreuses fonctionnalités, certaines d'entre elles sont répertoriées ci-dessous:
- Dans le modèle de disposition CSS Flexbox, il n'y a pas de flotteurs.
- CSS Flexbox offre une disposition réactive et conviviale.
- Les marges du conteneur Flex ne s'effondrent pas avec les marges de son contenu.
- Positionner l'élément enfant est très facile dans le modèle Flexbox.
- L'ordre de l'élément peut être modifié facilement sans modifier la source HTML.
Concept de base du modèle de mise en page CSS Flexbox
Certains des concepts de base du modèle de mise en page CSS Flexbox sont répertoriés ci-dessous:
- Le modèle CSS Flexbox a la capacité de modifier la hauteur et la largeur de l'élément au meilleur ajustement dans l'espace libre disponible du conteneur.
- Flexbox est en direction de la direction, ce qui signifie que les éléments du Flexbox peuvent être disposés horizontalement et verticalement en fonction des exigences.
Propriétés Flexbox
Pour concevoir une disposition réactive, une vaste gamme de propriétés flexibles est disponible dans CSS3 comme décrit dans les tables fournies ci-dessous:
Tableau 1
| Propriétés | Description |
|---|---|
| afficher | Détermine le type de conteneur flex.e., en ligne, bloquer. |
| direction flexible | Spécifie la direction des éléments dans le conteneur tels que le haut-fond, la gauche à droite, etc. |
| se dérober à la flexion | Détermine si les articles doivent être enveloppés ou non. |
| flexion | Fournit les fonctionnalités à la fois de Flex-Wrap et Flex-Direction. |
| justifier | Il aligne les éléments / éléments le long de l'axe principal. |
| align-items | Il aligne les éléments le long de l'axe transversal. |
| contenir l'alignement | Il aligne les lignes du conteneur flex. |
| écart | Contrôle explicitement les espaces entre les éléments flexibles. |
Tableau 2
| 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 les éléments enfants / éléments flexibles. |
| bassin flexible | Il détermine la taille par défaut de l'élément enfant / élément flex. |
| fléchir | Il est utilisé pour atteindre les fonctionnalités de trois propriétés i.e. flex-culte, flex-shrink et flex-basis. |
| s'aligner | Il permet à l'alignement par défaut (le long de l'axe croisé) d'être remplacé pour l'élément enfant individuel. |
Les propriétés décrites dans le tableau 1 sont connues récipient flexible ou élément parent les propriétés, tandis que celles décrites dans le tableau 2 sont connues Articles fléchis ou élément enfant propriétés.
Exemples
Dans cette section, nous implémenterons les propriétés des éléments Flexbox ci-dessus et des propriétés des éléments Flexbox.
Exemple Flexbox
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é diverses propriétés de conteneurs flexibles et d'élément Flex telles que l'affichage, la direction flexible, les éléments d'alignement, l'espace et le flexion qui définiront l'affichage flexible, la direction de la ligne de ligne, l'alignement étiré, les lignes 5px et Écart des colonnes 50px respectivement, et le troisième élément augmentera deux fois plus rapide que les autres éléments:
La sortie vérifie le fonctionnement des propriétés CSS Flexbox.
Conclusion
Le modèle CSS Flexbox offre un moyen facile et propre d'organiser des éléments Flexbox à l'intérieur d'un conteneur. Il fournit de nombreuses fonctionnalités telles que la conception réactive, l'alignement simple des éléments, etc. De plus, de nombreuses propriétés peuvent être utilisées pour concevoir et aligner les éléments d'une meilleure manière, comme la direction flex. Cet article a discuté du modèle de mise en page Flexbox, du conteneur Flex et de leurs propriétés.