disposition flexible – examen

flex est une mise en page flexible.
N'importe quel conteneur peut être désigné comme disposition flexible.
　.box{display: flex}
Les éléments en ligne peuvent utiliser la disposition flex
　.box{display: inline-flex>
Les navigateurs dotés du noyau webkit doivent ajouter le préfixe -webkit.
　.box{display:-webkit-flex; display:flex;>
Remarque : Une fois qu'un élément est défini sur une disposition flexible, les attributs float, clear et vertical-align des éléments enfants ne seront pas valides.
Concept de base :
Un élément qui utilise la disposition flex est appelé un conteneur flex, et tous ses éléments enfants deviennent automatiquement des membres du conteneur, appelés éléments flex
.
Le conteneur a deux axes par défaut, l'axe principal horizontal et l'axe transversal vertical. La position de départ de l'axe principal (l'intersection avec la bordure) est appelée départ principal, et la position finale est appelée fin principale
La position de départ de l'axe transversal est appelée départ croisé, la position finale est appelée début croisé ; , et la position technique est appelée extrémité croisée.
Projet unique L'espace de l'axe principal occupé est appelé taille principale et l'espace de l'axe transversal occupé est appelé taille transversale.

Attributs du conteneur :
Il y a 6 attributs définis sur le conteneur.
flex-direction flex-wrap flex-flow justifié-content
align-items align-content
1.flex-direction
L'attribut détermine la direction de l'axe principal (c'est-à-dire la direction de disposition de les éléments)
.box{flex-direction:row | row-reverse | column-reverse;}
　　　　　　row (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 est sur le bord supérieur.
Colonne inversée : L'axe principal est vertical et le point de départ est au bord inférieur.
　　　2. attribut flex-wrap
　　　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 une ligne d'axe
ne peut pas être disposée.
.box{flex-wrap: nowrap | wrap | wrap-reverse;>
nowrap (par défaut) : pas de retour à la ligne.
Wrap : Wrap : retour à la ligne, première ligne en haut.
wrap-reverse : wrap-reverse : enveloppe la première ligne ci-dessous.
　　　3.flex-flow
　　　　L'attribut flex-flow est l'abréviation de l'attribut flex-direction et de l'attribut flex-wrap. La valeur par défaut est row nowrap.
　　　.box{ flex-flow:<. ;flex-direction> || ;}
　　　 4.justify-content attribut
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　DUQuatch in] 4.justify-content attribut
　　　 L'attribut définit l'alignement de l'élément sur le principal axe.
.box{justify-content: flex-start | flex-end | space-between | space-around;>
5 valeurs, l'alignement spécifique est lié à la direction de l'axe. en dessous, l'axe principal est l'esclave de gauche à droite.
flex-start (par défaut) : aligné à gauche
flex-end aligné à droite
centré au centre
espace entre : éléments alignés Les intervalles entre eux sont tous égaux.
espace autour : chaque élément a un espacement égal des deux côtés, de sorte que l'espace entre les éléments est deux fois plus grand que l'espace entre les éléments et la bordure.
　5.align-items
L'attribut définit la manière dont les éléments sont alignés sur l'axe transversal.
.box{align-items: flex-start | flex-end | baseline | stretch;>
Peut prendre 5 valeurs. l'axe transversal est activé De haut en bas.
flex-start : Alignez le point de départ de l'axe transversal.
　　　　　flex-end : Alignez le point final de l'axe transversal.
Centre : alignez le point médian de l'intersection.
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 se définit automatiquement, il occupera toute la hauteur du conteneur.
　6.align-content
L'attribut définit l'alignement de plusieurs axes. Si le projet ne peut avoir qu'un seul axe, cet attribut n'a aucun effet.
　　　　.box{align-content: flex-start | flex-end center | space-between | space-around |
　stretch;>
L'attribut peut prendre 6 valeurs.
flex-start : Aligné avec le point de départ de l'axe transversal.
flex-end : aligné avec le point final de l'axe transversal.
Centre : aligné avec le milieu de l'axe transversal.
Espace entre les deux ; Alignez avec les deux extrémités de l'axe transversal et les intervalles entre les axes sont uniformément répartis.
espace autour : L'espace des deux côtés de chaque axe est égal.

étirement (valeur par défaut) : L'axe occupe tout l'axe transversal.

Propriétés du projet
Vous pouvez définir 6 propriétés sur le projet.

commander flex-grow flex-shrink flex-basis flex align-self

　　　1.order attribut
　　　　　order attribut définit l'ordre de tri des éléments, avec la plus petite valeur, plus il est classé haut, la valeur par défaut est l'attribut o -grow
l'attribut flex-grow définit le taux d'agrandissement de. l'élément. La valeur par défaut est 0, c'est-à-dire que s'il reste de l'espace, il sera également agrandi.
.item { flex-grow: ;}
Si tous les éléments ont un attribut flex-grow de 1, ils enfermeront l'espace restant si l'attribut flex-grow d'un élément est 1 2. Si. les autres éléments sont tous à 1, les premiers occuperont deux fois plus d'espace restant que les autres éléments.

　　　 Attribut 3.flex-shrink
　　　　　 L'attribut flex-shrink définit le taux de réduction de l'élément. La valeur par défaut est 1, c'est-à-dire qu'il n'y a pas suffisamment d'espace et l'élément sera réduit.

.item{flex-shrink:;}

Si la propriété flex-shrink de tous les éléments est 1, lorsqu'il n'y a pas suffisamment d'espace, ils seront tous réduits proportionnellement.
Si l'attribut flex-shrink d'un élément est o et que les autres éléments sont tous 1, alors le premier
ne rétrécira pas lorsqu'il n'y a pas suffisamment d'espace. Les valeurs négatives ne sont pas valables pour cette propriété.
4. Attribut Flex-Basis
CraftUi devrait nécessiter une place sur place-phstenphible >> Flex-Basis définit l'espace d'axe principal occupé par l'article avant d'allouer un espace excédentaire. 🎜> s'il y a un excès d'espace sur l'axe principal. Sa valeur par défaut est auto, qui correspond à la taille d'origine du projet.
　　　　　.item {flex-basis: auto;}
　　　　　 Il peut être défini sur la même valeur que l'attribut width ou height, l'élément occupera alors un espace fixe.
　　　Attribut 5.flex
　　L'attribut flex est l'abréviation de flex-grow et flex et flex-basis La valeur par défaut
est 0 1 auto.
.item { flex:none | [<'flex-grow'> <'flex-shrink'> || <'flex-basis'>]>
Il existe deux valeurs de raccourci : auto (1 1 auto) et none (0 0 auto).
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 puisque le navigateur déduira les valeurs pertinentes
　　　6.align-self attribut
　　　　　　　　　　　　　　　　　　　　 si d'autres éléments ont des alignements différents , tu peux remplacez l'attribut align. La valeur par défaut est auto, ce qui signifie hériter de l'attribut align-items de l'élément parent
S'il n'y a pas d'élément parent, il est égal à stretch.
. : auto | flex-start | flex-end | baseline | stretch;>
Cet attribut peut prendre 6 valeurs À l'exception de auto, les autres sont exactement les mêmes que l'attribut align-items.

Plus de mises en page flexibles - pour consulter les articles connexes, veuillez faire attention au site Web PHP chinois !