CSS Flex raccourci
Parmi plusieurs propriétés, il existe une propriété CSS Flex qui est appliquée au Flexbox. Un flexbox est un conteneur qui contient d'autres boîtes ou blocs appelés flex. Une propriété Flex traite de la flexibilité. C'est la propriété qui est utilisée pour appliquer des longueurs flexibles sur les articles flexibles. Cette flexibilité est liée à l'expansion et au rétrécissement du flex. Dans cet article, nous verrons la propriété Flex Shrink pour voir la mesure d'un flex réduit par rapport aux autres éléments des conteneurs.
La mise en œuvre de la propriété Flex Shrink implique des codes HTML et CSS. Les outils de base qui sont essentiels pour l'implémentation des codes sont: un éditeur de texte dans lequel nous écrivons les balises HTML et CSS, et un navigateur utilisé pour exécuter le fichier texte et une page Web est affichée. Tout d'abord, nous comprendrons la création flexible en utilisant HTML et CSS. Deux approches de base du CSS sont utilisées ici: en ligne ou écrite à l'intérieur des balises HTML et du CSS interne qui est déclaré à l'intérieur de la partie de la tête de l'étiquette de style CSS. Ils sont accessibles en créant des identifiants et des classes mentionnées au moment de la création de contenu. De même, la syntaxe donnée ci-dessous est écrite à l'intérieur de la balise de style de la section Head dans le code HTML.
Syntaxe de la propriété Flex Shrink:
Flex-shrink: valeur (nombre);
Le «nombre» est la valeur qui est ajoutée à la propriété pour déterminer comment l'élément se rétrécira par rapport aux autres éléments. 1 est la valeur par défaut de cette propriété. Cela signifie qu'en utilisant 1, le raccourci vers le flex sera zéro.
Création flexible:
Les balises HTML sont responsables du développement du contenu de la page Web. Dans le corps, nous créerons un Flexbox qui sera conçu via CSS. Tout d'abord, nous avons changé la couleur par défaut d'arrière-plan en un effet facultatif. Une simple rubrique est déclarée. Un div est créé pour contenir le contenu à l'intérieur. À l'intérieur de la div, il y a un autre div présent qui en fait un div imbriqué. Tous ces div déclarés à l'intérieur sont stylisés par le style en ligne ayant la propriété de couleur d'arrière-plan pour ajouter des couleurs au flex. De plus, nous avons également utilisé des alphabets simples comme texte pour nommer chaque bloc Flex. La div externe est accompagnée de la classe CSS. Cette classe est déclarée dans le CSS et aura des propriétés à appliquer à la div, ce qui en fait un flex-box.
Code corporel HTML:
Toute la div à l'intérieur de la div externe créera des conteneurs séparés connus sous le nom de flex. Chacun aura une couleur différente. Ce code entier fonctionnera en utilisant CSS, comme jusqu'à présent dans le HTML, nous n'avons également fourni aucun alignement ou dimension sur le Flexbox ou les blocs intérieurs. Considérons d'abord la feuille de style.
À l'intérieur de la balise de style, nous allons maintenant expliquer tous ces ID qui ont été déclarés à l'intérieur des étiquettes du contenu HTML. Comme la balise «contenu» est déclarée dans la div externe. La largeur est donnée avec une valeur d'affichage flexible. Cela formera un bloc connu sous le nom de Flexbox. Maintenant, nous allons styliser les blocs intérieurs. Le nom d'identification suivra le div intérieur. La div intérieure contiendra une propriété de base. Cette base flexible est la distance ou la zone d'un seul flex à l'intérieur de la boîte. Une bordure est appliquée à chaque boîte avec une couleur donnée dans le code.
#Content div
Basis flexible: 240px;
Border: 3px solide RGBA (0,0,0,.1);
Chaque flex aura une superficie de 240 pixels. Après ces balises de style, fermez toutes les balises, y compris la balise de tête.
Code HTML CSS:
Enregistrez le code dans le fichier d'éditeur de texte avec l'extension HTML et après cela, exécutez le fichier sur le navigateur. Vous verrez qu'une page Web statique est formée avec de petites flexions formées avec différentes couleurs et alphabets.
Sortir:
Cela se fait principalement en utilisant les dimensions de largeur vers l'extérieur et les blocs div intérieurs pour être ajusté. De cette façon, un simple flex est créé.
Maintenant, nous verrons comment un seul bloc de flex réduira.
FLEX ROSH:
La partie du corps HTML pour le retrait Flex sera la même, car le nombre de blocs div dans le flex-box est le même avec le même effet de couleur et le texte qui y est ajouté. Tandis que la propriété de style CSS aura un rapport différent pour chaque zone flexible. Dans le corps HTML, chaque div intérieur qui provoque un flex est affectée à une classe. Chaque nom de classe a son effet de propriété qui est appliqué à la div intérieure.
Dans la partie tête, à l'intérieur de la balise de style, chaque classe aura une description des effets qui sont appliqués pour provoquer le rétrécissement flexible.
Code corporel HTML:
Les détails qui sont présents sous l'ID de contenu et le contenu div seront les mêmes que nous avons expliqué ci-dessus dans la création flexible. Le Flexbox recevra une largeur appropriée et la zone Flex est également donnée dans des pixels qui y appliquent une bordure avec la même couleur du flex.
Code HTML CSS:
Certaines informations supplémentaires qui sont ajoutées pour provoquer le rasage flexible est l'explication de la classe. Chaque classe contient une valeur flexible. Le premier bloc ou Flex a 1 valeur, le second en a 2 et les 3e et 4e Flex ont ces valeurs en conséquence.
.box0
Flex-shrink: 1;
La première boîte a une taille approximativement plus proche de la taille d'origine du flex. Nous avons utilisé «1» à la valeur qui provoque la taille du flex sans aucun changement. Vous remarquerez que la taille réduira du 1er à la 4ème Flex. Le dernier 4ème est le plus petit du 3ème.
Enregistrer le code avec le changement. Ensuite, exécutez pour voir les modifications du navigateur Web. Vous verrez que lorsque le flex va du côté gauche à droite, le flex continue de rétrécir.
Sortir:
Conclusion
L'article CSS Flex Shrink est écrit pour décrire la propriété CSS Shrink qui est appliquée au Flex. Cette propriété est utilisée pour rétrécir le flex à l'intérieur du Flexbox en augmentant la valeur de la propriété Flex en nombres. Par défaut, 1 est le nombre utilisé pour garder le flex sans aucun changement. À mesure que le nombre augmente, le retrait du flex augmente également. Premièrement, dans l'article, nous avons donné un aperçu des dépendances HTML et CSS les unes sur les autres. Après cela, nous avons expliqué la création d'une simple boîte flexible ayant quatre flexions à l'intérieur. À ce moment-là, nous n'avons appliqué aucune propriété flex. Mais sur le même code, nous avons ajouté un style interne pour ajouter la propriété Flex-Shrink à chaque flexion du bloc.