Conception Web réactive à l'aide de Flexbox | Expliqué

Une conception Web réactive est appelée une conception qui modifie sa disposition en fonction de l'environnement dans lequel il est utilisé. Par environnement, nous voulons dire que le comportement du site Web changera en fonction de la taille de l'écran de l'appareil, de la largeur, de la résolution, de l'orientation, etc. Il existe de nombreuses façons dont vous pouvez rendre votre site Web réactif tel que les requêtes avec les médias, la grille, le flex-box, etc. L'objectif de cette rédaction sera sur la façon de rendre votre conception Web réactive à l'aide de Flexbox.

Conception Web réactive à l'aide de 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é.

Cela rend les éléments sensibles, ce qui signifie que les éléments modifient leur comportement en fonction du type d'appareil qui les affichait. De plus, il rend les éléments flexibles et leur fournit une position appropriée et une symétrie.

Un Flexbox a deux composants, qui sont un conteneur flex. Un conteneur Flex décrit les propriétés de l'élément ancêtre, tandis qu'un élément flexion définit les propriétés des éléments successeurs. Chacun de ces composants utilise diverses propriétés pour implémenter un Flexbox.

Ici, nous vous présenterons diverses dispositions réactives que vous pouvez créer pour différents appareils à l'aide de Flexbox.

Comment créer une barre de navigation réactive à l'aide de flexbox?

Ici, nous allons montrer comment vous pouvez faire une barre de navigation réactive en utilisant la disposition d'une colonne pour des appareils tels que les téléphones portables, les tablettes, etc. qui ont des tailles d'écran plus grandes.

Voici une représentation visuelle d'une disposition en une colonne pour les petites tailles d'écran.

Le diagramme ci-dessous montre la disposition à deux colonnes pour des tailles d'écran plus grandes.

Passons maintenant au code.

Html

Maison
Service
À propos

Dans le code ci-dessus, nous avons fabriqué un flexbox en niant trois conteneurs DIV à l'intérieur d'un plus grand conteneur div.

CSS

.flex-container
Affichage: flex;
Flex-Direction: colonne;
taille de police: 25px;
Texte-aligne: Centre;
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

En utilisant la classe attribuée au plus grand div, nous définissons son affichage pour flexion puis lui donnant une direction en utilisant la valeur de la colonne de la propriété de direction de flux, puis de notre div avec CSS de base.

CSS

.nav1
Color d'arrière-plan: DarkGray;
rembourrage: 15px;
Flex: 50px;

.Nav: Hover
Color en arrière-plan: LightGray;

Ici, nous stylisons simplement nos colonnes Navbar en leur fournissant une couleur, un rembourrage et une longueur initiale d'arrière-plan en utilisant la propriété Flex et en définissant un style sur le plan de navigation.

CSS

@Media (Min-Width: 768px)
.flex-container
Direction flexible: ligne;

La requête ci-dessus indique que lorsque la largeur d'un dispositif particulier est de 768px ou plus large, la direction de la disposition passera de la disposition d'une colonne à deux colonnes.

Sortir

Lorsque la largeur est de 767px ou moins.

Lorsque la largeur est de 768px ou plus large.

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

Comment créer une grille d'image réactive à l'aide de flexbox?

Voici comment créer une galerie réactive qui change son comportement en fonction de la fenêtre du navigateur.

Html

Ici, nous avons créé un conteneur div et imbriqué deux autres conteneurs div à l'intérieur. Les deux conteneurs imbriqués nichent trois images chacune.

CSS

.récipient
Affichage: flex;
wrap flex: enveloppement;
rembourrage: 5px;

La div avec la classe «conteneur» est affichée en tant que flex-box et a reçu un certain rembourrage. De plus, la propriété Flex-wrap se voient attribuer une valeur de pellicule qui signifie que si nécessaire, les images seront enveloppées à l'intérieur du conteneur.

CSS

.colonnes img
Largeur: 100%;

.Colonnes
Flex: 30%;
largeur maximale: 30%;
rembourrage: 5px;

Les images ont reçu une largeur à 100% afin qu'elles s'inscrivent de manière appropriée dans le conteneur, en outre en utilisant le flex et la largeur maximale, nous créons deux colonnes qui seront placées côte à côte.

CSS

@media (max-large: 600px)
.Colonnes
Flex: 50%;
largeur maximale: 50%;

La requête multimédia spécifie que si la largeur est inférieure au nombre spécifié, le deux colonnes sera converti en un.

Sortir

Lorsque la largeur est de 600px, ou plus large.

Lorsque la largeur est de 600px, ou moins.

Une galerie d'images réactive a été créée.

Conclusion

Une conception Web réactive peut être créée à l'aide de diverses propriétés Flexbox telles que Flex-Direction, Flex-Flow, Flex-Wrap, etc. ainsi que la spécification de certaines requêtes multimédias. La requête multimédia doit spécifier le type et les fonctionnalités d'un appareil selon lequel la conception Web modifiera son apparence sur divers appareils. Dans l'article ci-dessus, nous avons démontré quelques dispositions que vous pouvez créer en utilisant diverses propriétés Flexbox ainsi que des requêtes multimédias.