Commande CSS Flex

Un flexox ou un élément est utilisé pour contenir des contenus HTML. Une propriété CSS Flex est utilisée pour appliquer les effets des longueurs flexibles sur les éléments flexibles. Une feuille de style en cascade offre la propriété de commande utilisée pour organiser les articles flexibles. Pour appliquer la propriété de commande, les éléments à l'intérieur du Flexbox doivent être flexibles. Sinon, la propriété ne sera pas affectée.

Création et commande flexibles

Dans cet exemple, nous avons utilisé un Div simple pour ajouter d'autres divs à l'intérieur, créant un phénomène de div nicheur. La div externe est connue sous le nom de Flexbox à plusieurs contenus à l'intérieur. Leur div externe est la div principale qui porte plusieurs divs à l'intérieur. Il est déclaré avec une classe CSS pour appliquer certains effets CSS. Cette classe est décrite dans la section Head avec la balise de style en formant un CSS interne.

À l'intérieur de la div, quatre autres divs sont déclarés. Chaque div a fait référence au seul flex. Nous ajouterons ici un style en ligne pour ajouter de la couleur à chaque flex. Chaque div est également diverti avec les ID CSS. Ces identifiants sont responsables de l'application de tous les effets sur le flex qui est organisé dans un ordre approprié.

IDS et classe CSS

À ce stade, il est nécessaire de développer ces deux terminologies de CSS. Alors que nous discutons des propriétés CSS affectées, ces identifiants et ces classes jouent un rôle essentiel dans l'application de tout effet sur le contenu HTML. Chaque fois que nous parlons de CSS internes et externes, nous rencontrons des identifiants et des classes. Ces identifiants et classes ont la couleur, le style de texte, les dimensions et de nombreux autres effets sur le contenu déclaré dans la section du corps. Pour accéder à ces effets à partir des classes et des identifiants, nous devons mentionner qu'ils sont nommés dans la balise de contenu, tout comme l'identifiant «un». Et tous les identifiants du premier au quatrième sont également déclarés.

Revenant au code HTML, ici avec chaque div ou flex interne, nous avons également utilisé le texte qui montrera plus clairement l'ordre. Cela se produit lorsque la phrase est formée en organisant le flex dans l'ordre approprié. La direction de la commande du flex est le choix de l'utilisateur. Nous pouvons numéroter le flex aléatoire. Ces flexbox sont formés lorsque le style CSS leur est appliqué. Maintenant, considérons le code CSS.

Nous déclarerons d'abord l'ID qui appartient à la div externe à l'intérieur de la balise de style. Cette div spécifiera la zone dans laquelle sont formées tous les divs intérieurs. Nous ajouterons des propriétés de largeur, de hauteur et de frontière à cet identifiant. Une caractéristique importante qui est utilisée pour former un flex est l'effet «Affichage». Parce que cette propriété est supprimée, des rectangles simples seront formés sur la page Web. Ces flexions seront formées en utilisant cette propriété d'affichage:

#un
Affichage: flex;

Flex est généralement formé dans une direction horizontale de gauche à droite. D'accord, c'était pour la div externe. Pour ajouter des dimensions à tous les div ou flex intérieurs, nous utiliserons l'ID «un» avec div. Ces propriétés incluent la largeur et la hauteur d'un seul bloc ou flexion. La hauteur de la seule div intérieure est égale à la hauteur de la div externe. Tandis que la largeur de la div externe est divisée en les quatre divs intérieurs. Cela se fait en déclarant la description de l'ID réaccédé par chaque flexion à l'intérieur de la balise avec les différents noms d'ID pour chaque flex. Chaque nom de div est donné selon l'ordre. Par exemple, le premier div contient l'ordre comme 1. Peu importe dans lequel vous déclarez le code dans CSS ou HTML, mais le numéro de commande décidera de l'ordre de chaque flex.

Div # First
Commande: 1

Fermez toutes les balises. Maintenant, enregistrez le code avec l'extension HTML pour l'ouvrir en tant que texte et une page Web.

Sur l'exécution, à l'intérieur du navigateur, vous verrez que l'ordre dans lequel vous avez défini chaque div intérieur ou le flex est affiché avec les blocs de couleurs respectives, ce qui rend le flex dans le bon ordre. De plus, le texte ajouté avec chaque étiquette div intérieure illustre que la phrase est formée en arrangeant le flex dans l'ordre. Cela montre que l'ordre que nous avons mentionné est suivi avec précision.

Ordre inversé de flexion

Avec Flexbox et Flex Creation, il est visible qu'il n'est pas nécessaire de mentionner un flux flexible dans le code. Par défaut, le flux de flexion est dans une direction horizontale, et l'ordre est suivi de la même manière qu'il est décrit, c'est-à-dire par défaut. Mais, une fois que vous avez déclaré l'ordre de Flex dans la création de flexion, vous pouvez l'inverser en mentionnant la direction du flex.

#un
Flex-Direction: Row-Reverse;

Cette propriété est ajoutée au Flexbox ou à la DIV externe car il est responsable de contenir des flexions intérieures à l'intérieur. Et si vous souhaitez utiliser l'ordre par défaut, supprimez complètement cette propriété de direction ou ajoutez la direction flexible sous forme de «ligne». Il fera à nouveau l'ordre croissant.

Sur l'exécution, vous verrez que toute l'ordre de la flexion est inversé, vous pouvez voir clairement à travers les couleurs de la flex.

Flexion verticale

Comme nous l'avons décrit précédemment, la direction de Flex n'est pas décrite. Par défaut, c'est dans la direction horizontale d'avoir une seule colonne et plusieurs lignes. Mais, pour faire un flex vertical, alors la direction du flexbox est changée de la ligne en colonnes.

#un
Flex-Direction: colonne;

En utilisant cette fonctionnalité, un Flexbox vertical sera formé, ayant tout le div flex intact, et l'ordre de tout le flex sera le même.

Réorganiser Flexbox

Le Flexbox peut être réorganisé en spécifiant tout flex à l'intérieur de la boîte pour arriver à la première position. Nous avons choisi le 3ème qui reçoit un ordre de -1, la couleur du texte est passée du noir au rouge, et la taille est également augmentée pour la discriminer des autres.

Ce troisième flex sera supprimé de la liste de commandes. Ce faisant, la commande ne sera pas maintenue. La boîte qui arrivera à la première position perturbera l'ordre de toute la div.

Sur l'exécution, vous verrez que le premier bloc est déplacé vers la droite pour former une place pour le 3^rd bloc. De cette façon, nous pouvons réorganiser le Flexbox en spécifiant n'importe qui Flex.

Conclusion

Dans cet article, nous avons essayé de décrire la propriété CSS Flex Order en créant un contenu Flexbox et Flex à l'intérieur. L'ordre de flexion est appliqué en ajoutant des couleurs et du texte au Flex montrant que l'ordre que nous avons mentionné est maintenu. De plus, nous pouvons inverser l'ordre en mentionnant le flux de direction flexible dans l'ordre inversé. La direction horizontale est la direction par défaut du flex; Il peut également être modifié dans la direction verticale en modifiant la direction de la ligne dans la colonne. Tous ces effets sont expliqués en utilisant des codes spécifiés pour expliquer le concept d'ordre flexible.

.