Flex est l'abréviation de flexible box, qui se traduit par « disposition flexible ». Il est utilisé pour fournir une flexibilité maximale pour le modèle de boîte. Tout conteneur peut être désigné comme une disposition flexible. Il vous suffit de définir « display:flex ». ; les éléments en ligne peuvent être définis par "display:inline-flex" ; il convient de noter que si la disposition flex est définie, les attributs float, clear et vertical-align des éléments enfants ne seront pas valides.
1. Notions de base
La mise en page flexible est un modèle de mise en page, souvent appelé flexbox. Après avoir utilisé la mise en page flexible, il fournira de puissantes capacités d'allocation d'espace et d'alignement pour les éléments enfants.
Avant d'utiliser la mise en page flexible, les mises en page couramment utilisées incluent : la mise en page fluide, la mise en page flottante, la mise en page de positionnement, etc. L'inconvénient est que l'élément enfant doit contrôler sa position dans l'élément parent et également faire attention à l'effondrement en hauteur de l'élément parent.
L'avantage de flex est d'éviter les formes de mise en page rigides, de créer davantage de modes de mise en page parmi lesquels choisir et de résoudre des problèmes tels que l'alignement, la distribution et la réactivité des sous-éléments. L'inconvénient est qu'il ne peut s'appuyer que sur son propre mode de mise en page et qu'il ne peut pas être modifié s'il y a un léger changement.
Les éléments qui utilisent la disposition flexible sont appelés conteneurs flexibles, ou « conteneurs » en abrégé. Tous ses éléments enfants génèrent automatiquement des membres de conteneur, appelés éléments flexibles (éléments flexibles), appelés « éléments » ;
Le conteneur a deux axes principaux par défaut : l'axe principal horizontal (axe principal) et l'axe transversal vertical (axe transversal). La position de départ de l'axe principal (c'est-à-dire l'intersection des bordures) est appelée départ principal, et la position finale est appelée extrémité principale ; la position de départ de l'axe transversal est appelée début croisé et la position finale est appelée extrémité croisée. Les éléments sont disposés le long de l'axe principal par défaut. L'espace de l'axe principal occupé par un seul élément est appelé taille principale, et l'espace de l'axe transversal occupé par un seul élément est appelé taille transversale.
Les propriétés suivantes sont fournies en CSS pour implémenter la mise en page Flex :
Selon différentes portées, ces propriétés peuvent être divisées en deux catégories : les propriétés du conteneur (flex-direction, flex-wrap, flex-flow, justification-content, align-items, align-content) et les propriétés des éléments (order, align -self). , flex, flex-grow, flex-shrink, flex-basis). Présentons l'utilisation de ces attributs.
2. Propriétés du conteneur
(1) flex-direction : Spécifiez la direction de disposition des sous-éléments dans la boîte flexible ;
Les valeurs facultatives pour l'attribut sont les suivantes :
La propriété flex-direction détermine la direction de l'axe principal (c'est-à-dire la direction de la disposition des éléments) ;
.box{flex-direction:row|row-reverse|column|column-reverse;}Cet attribut a 4 valeurs
● ligne (valeur par défaut) : l'axe principal est horizontal et le point de départ est à l'extrémité gauche ;
●row-reverse : L'axe principal est horizontal et le point de départ est à l'extrémité droite ;
●colonne : l'axe principal est vertical et le point de départ se trouve sur le bord supérieur ;
●colonne inversée : l'axe principal est vertical et le point de départ est au bord inférieur ;
L'effet ci-dessus est illustré dans la figure ci-dessous :
(2) flex-wrap : Spécifiez la méthode d'emballage des sous-éléments dans la boîte flexible ;
Par défaut, les éléments sont disposés sur une ligne (également appelée « axe »). L'attribut flex-wrap définit comment envelopper la ligne si un axe ne peut pas être disposé. Il existe trois valeurs :
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap (par défaut) : pas de retour à la ligne, l'effet d'arrangement est le suivant :
●wrap : wrap, la première ligne est en haut, l'effet d'arrangement est le suivant :
●wrap-reverse : wrap, la première ligne est en bas, l'effet d'arrangement est le suivant :
(3) flex-flow : Cette propriété agit sur le conteneur flex box et est utilisée pour contrôler la direction de la disposition et le retour à la ligne des éléments dans le conteneur. Cette propriété est une propriété composite composée de flex-direction et flex-wrap ;
.box{flex-flow :<flex-direction><flex-wrap>;}(4) justifier-contenu : cet attribut agit sur les sous-éléments dans le conteneur de boîte flexible et est utilisé pour contrôler la distribution des sous-éléments eux-mêmes dans le sens de l'arrangement ;
La propriété justifier-contenu définit l'alignement de l'élément sur l'axe principal
.box{justify-content:flex-start|flex-end|center|espace-entre|espace-autour;}Cet attribut a 5 valeurs :
● flex-start (valeur par défaut) : aligné à gauche ;
●extrémité flexible : alignée à droite ;
●centre : centré ;
● espace entre : alignez les deux extrémités et les intervalles entre les éléments sont égaux ;
●espace autour : l'espacement des deux côtés de chaque élément est égal, donc l'espacement entre les éléments est deux fois plus grand que l'espacement entre l'élément et la bordure ;
L'effet ci-dessus est illustré dans la figure ci-dessous :
(5) align-items : cet attribut agit sur le conteneur de la boîte flexible et est utilisé pour contrôler l'alignement de tous les sous-éléments de la boîte flexible dans la direction verticale de la direction de l'arrangement ;
La propriété align-item définit la manière dont les éléments sont alignés sur l'axe transversal.
.box{align-items:flex-start|flex-end|center|baseline|stretch;}Cet attribut a 5 valeurs. L'alignement spécifique est lié à la direction de l'axe transversal. On suppose que l'axe transversal est de haut en bas :
●flex-start : alignez le point de départ de l'axe transversal ;
●flex-end : alignez le milieu de l'axe transversal ;
●centre : aligner le milieu de l'axe transversal ;
●baseline : l'alignement de base de la première ligne de texte de l'élément ;
●stretch (valeur par défaut) : si l'élément ne définit pas de hauteur ou est défini sur auto, il occupera toute la hauteur du conteneur ;
L'effet ci-dessus est illustré dans la figure ci-dessous :
3. Propriétés du projet
(1) attribut de commande
L'attribut order est utilisé pour définir l'ordre dans lequel les éléments apparaissent dans le conteneur. Vous pouvez définir la position de l'élément dans le conteneur via des valeurs spécifiques. Le format de syntaxe de l'attribut est le suivant :
commande:numéro;
Où nombre est la position de l'élément dans le conteneur et la valeur par défaut est 0.
Exemple:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; border:1pxsolidblack;}.flexdiv:nth-child(1){order:3;}.flexdiv:nth-child( 2){ordre:1;}.flexdiv:nth-child(3){ordre:2;}.flexdiv:nth-child(4){ordre:5;}.flexdiv:nth-child(5){ordre : 4;</style></head><body><div><div>A</div><div>B</div><div>C</div><div>D</div><div >E</div></div></body></html>Résultats en cours d'exécution :
(2) attribut align-self
L'attribut align- selfe vous permet de définir un alignement différent pour un élément par rapport aux autres éléments. Cet attribut peut remplacer la valeur de l'attribut align-items. Les valeurs facultatives pour l'attribut align-self sont les suivantes :
Exemple:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{largeur : 60px;hauteur:60px;bordure:1 pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</div><div>B</ div><div>C</div><div>D</div><div>E</div></div></body></html>Résultats en cours d'exécution :
(3) attribut flexible
L'attribut flex est l'abréviation des trois attributs flex-grow, flex-shrink et flex-basis. Le format de syntaxe est le suivant :
flex:flex-growflex-shrinkflex-base;
La description des paramètres est la suivante :
● flex-grow : (paramètre obligatoire) un nombre utilisé pour définir le montant de la croissance de l'élément par rapport aux autres éléments, la valeur par défaut est 0 ;
●flex-shrink : (paramètre facultatif) un nombre utilisé pour définir le retrait d'un élément par rapport aux autres éléments. La valeur par défaut est 1 ;
●flex-basis : (paramètre facultatif) La longueur de l'élément, les valeurs légales sont auto (valeur par défaut, indiquant automatique), hériter (indiquant l'héritage de la valeur de cet attribut de l'élément parent) ou en ajoutant %, px, em , etc. à une valeur spécifique La forme de l'unité.
De plus, l'attribut flex a deux valeurs de raccourci, à savoir auto (1 1 auto) et none (0 0 auto).
L'exemple de code est le suivant :
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height : 60px;bordure:1pxsolidblack;}.f lexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>Résultats en cours d'exécution :
