Explication détaillée de la disposition flexible

Cette fois, je vais vous apporter une explication détaillée de la disposition flex. Quelles sont les précautions pour l'explication détaillée de la disposition flex. Voici des cas pratiques, jetons un coup d'œil.

Le centrage vertical est une méthode de mise en page courante pour les éléments en ligne, vous pouvez définir text-align:center;vertical-align:center pour y parvenir,
Les éléments de niveau bloc peuvent généralement être obtenus via les paramètres suivants

.parent{    position: relative;
}.child{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);
}

Cependant, pour la simplicité et l'élégance du CSS, en plus de la mise en page en ligne, en bloc en ligne et en bloc, la quatrième méthode de mise en page de CSS, flex, est né
Vous pouvez facilement centrer l'élément verticalement avec uniquement les paramètres suivants

.parent{    display: flex;    justify-content: center;    align-items: center;
}

Remarque : lorsqu'ils sont définis sur la disposition flexible, les attributs float, clear et vertical-align de les éléments enfants seront invalides

flexConcepts de base

Les éléments qui utilisent la disposition flex sont appelés conteneurs flex. Tous les éléments enfants d'un élément sont appelés éléments flexibles.
Les conteneurs ont 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ébut principal, et la position finale est appelée fin principale ; la position de départ de l'axe transversal est appelée début croisé et la position finale est appelée croix. fin.
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 croisée.

Propriétés du conteneur flex

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction

La propriété flex-direction détermine la direction de l'axe principal.

ligne (valeur par défaut) : l'axe principal est dans le sens horizontal et le point de départ est à l'extrémité gauche.

ligne-inverse : l'axe principal est dans le sens horizontal et le point de départ est à l'extrémité droite

colonne : L'axe principal est dans le sens vertical, le point de départ est sur le bord supérieur

colonne-inverse : l'axe principal est vertical, le le point de départ est sur le bord inférieur

flex-wrap

Par défaut, les éléments sont disposés sur l'axe principal, L'attribut flex-wrap définit comment envelopper une ligne si une ligne de l'axe principal les lignes d'axe ne peuvent pas s'adapter.

nowrap (valeur par défaut) :, pas de retour à la ligne

wrap : retour à la ligne, la première ligne est en haut

wrap-reverse : retour à la ligne, la première ligne est en bas

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.

justify-content

L'attribut justifier-content définit l'alignement de l'élément (à partir de l'élément) sur l'axe principal.

flex-start (par défaut) : aligné à gauche

flex-end : aligné à droite

center : centré

espace-entre : aligné à aux deux extrémités, les intervalles entre les éléments sont tous égaux.

espace autour : chaque élément est également espacé des deux côtés. Par conséquent, l’espace entre les éléments est deux fois plus grand que l’espace entre les éléments et la bordure.

align-items

L'attribut align-items définit la façon dont les éléments sont alignés sur l'axe transversal.

étirement (valeur par défaut) : Si l'élément ne définit pas de hauteur ou est défini sur automatique, il occupera toute la hauteur du conteneur.

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 milieu de l'axe transversal.

baseline : l'alignement de base de la première ligne de texte de l'élément.

align-content

L'attribut align-content définit l'alignement de plusieurs axes. Cette propriété n'a aucun effet si le projet ne comporte qu'un seul axe.

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

flex-start : Alignez-vous 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 : alignez avec les deux extrémités de l'axe transversal et les intervalles entre les axes sont uniformément répartis.

espace autour : chaque axe est également espacé des deux côtés. Par conséquent, la distance entre les axes est deux fois plus grande que la distance entre les axes et le cadre.

attribut flex item (self element)

order
flex-grow
flex-shrink
flex-basis
flex
align-self
order

attribut order définit l'ordre dans lequel les éléments sont triés. Plus la valeur est petite, plus le classement est élevé. La valeur par défaut est 0.

flex-grow

L'attribut flex-grow définit le taux de grossissement de l'élément. La valeur par défaut est 0, c'est-à-dire que s'il reste de l'espace, il ne sera pas agrandi.
Si tous les éléments ont une propriété flex-grow de 1, ils diviseront également l'espace restant.
Si la propriété flex-grow d'un élément est 2 et que les autres éléments sont tous 1, le premier occupera deux fois plus d'espace restant que les autres éléments.

flex-shrink

L'attribut flex-shrink définit le taux de rétrécissement de l'élément. La valeur par défaut est 1, c'est-à-dire que s'il n'y a pas suffisamment d'espace, l'élément rétrécira.
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 0 et que les autres éléments sont 1, le premier ne rétrécira pas lorsque l'espace est insuffisant.
Les valeurs négatives ne sont pas valables pour cette propriété.

flex-basis

La propriété flex-basis définit la taille principale de l'élément avant d'allouer l'espace excédentaire.
Sur la base de cet attribut, le navigateur calcule s'il y a de l'espace supplémentaire sur l'axe principal. Sa valeur par défaut est auto, qui correspond à la taille d'origine du projet.
Il peut être défini sur la même valeur que l'attribut width ou height (tel que 350px), l'élément occupera alors un espace fixe.

flex

La propriété flex est l'abréviation de flex-grow, flex-shrink et flex-basis. La valeur par défaut est : 0 1 auto. Les deux dernières propriétés sont facultatives.
Cet attribut a deux valeurs de raccourci : auto (1 1 auto) et none (0 0 auto).

s'aligner

L'attribut align-self permet à un seul élément d'être aligné différemment des autres éléments, remplaçant ainsi l'attribut align-items.
Valeur par défaut : 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, cela équivaut à stretch.
Cet attribut peut prendre 6 valeurs À l'exception de auto, les autres sont exactement les mêmes que l'attribut align-items.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Modèle d'observateur de Javascript

Modèle de proxy de Javascript

Modèle stratégique de Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!