Quelles sont les propriétés du flex ?

Les attributs de flex sont : 1. flex-direction, définit la direction de l'axe principal ; 2. justifier-contenu, définit la disposition des sous-éléments sur l'axe principal 3. flex-wrap, définit si le sous-élément ; -elements wrap ; 4. align-content , définit la disposition de tous les sous-éléments sur l'axe latéral 5. align-items : définit la disposition des sous-éléments sur l'axe latéral, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell G3.

Attributs de flex :

1, flex-direction

Définir la direction de l'axe principal

Description de la valeur de la propriété

row La valeur par défaut est de gauche à droite

row-reverse De gauche à droite

column De haut en bas

column-reverse De haut en bas

2, justifier-contenu

Définir la disposition des éléments enfants sur l'axe principal

L'attribut justifier-content définit l'alignement des éléments sur l'axe principal axis

Remarque : utilisez ceci. Assurez-vous de déterminer quel est l'axe principal avant d'utiliser l'attribut

Description de la valeur de l'attribut

flex-start Valeur par défaut, en commençant par la tête (si l'axe principal est l'axe X, puis de gauche à à droite)

flex-end Organiser à partir de la queue

le centre est aligné au centre de l'axe principal (si l'axe principal est le

Définir si les éléments enfants s'enroulent

Par défaut, les éléments sont disposés sur une ligne ( également appelé « axe »). Définition de l'attribut flex-wrap, la valeur par défaut dans la mise en page flex est pas de retour à la ligne

Description de la valeur de l'attributnowrap Valeur par défaut, pas de retour à la ligne

enveloppement de ligne

4. align-content

Définissez la disposition de. éléments enfants sur l'axe latéral Mode (lignes multiples)

Description de la valeur d'attribut

flex-start Valeur par défaut, commencez à organiser à la tête de l'axe transversal flex-end Commencez à organiser à la queue de l'axe transversal

centre Afficher au milieu de l'axe transversal

espace -autour Les enfants divisent d'abord l'espace restant de manière égale sur l'axe transversal

espace-entre Les enfants sont d'abord répartis aux deux extrémités sur l'axe transversal, puis divisent l'espace restant de manière égale

stretch Définissez la hauteur de l'élément enfant pour diviser également la hauteur de l'élément parent align-items : Définissez la hauteur sur l'axe transversal Disposition des éléments enfants (une seule rangée)

5, align-items

Set la disposition des éléments enfants sur l'axe latéral (une seule rangée)

Description de la valeur d'attribut

flex-start Valeur par défaut, de haut en bas flex-end de bas en haut

centre serré ensemble et centre (centre vertical)

stretch stretch

6, flex-flow

La propriété composite des propriétés flex-direction et flex-wrap

description de la valeur de la propriété

flex : La proportion de sous-éléments

align-self : Contrôler l'arrangement des sous-éléments sur son propre axe latéral
ordre : L'attribut définit l'ordre des sous-éléments (ordre avant et arrière)

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!