Que signifie la valeur flex 1 en CSS3

Cela signifie : la valeur du taux d'agrandissement de l'élément "flex-grow" est de 1, la valeur du taux de réduction de l'élément "flex-shrink" est de 1 et l'espace occupé par l'élément "flex-basis" est de "0". %"; flex est "flex-grow, L'abréviation des trois valeurs d'attribut de "flex-shrink, flex-basis".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Que signifie la valeur flex de 1 en CSS3 ?

flex est en fait l'abréviation de la combinaison de ces trois valeurs d'attribut : flex-grow flex-shrink flex-basis Les équivalents sont les suivants :

Syntaxe :

auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Définition :

• flex-grow : Définissez 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.

• 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.

• flex-basis : Définit l'espace occupé par l'élément avant que l'espace excédentaire ne soit alloué. Le navigateur utilise cet attribut pour calculer 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. Si la valeur est 0, les unités doivent être ajoutées pour éviter d'être considérées comme évolutives.

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.

Introduction détaillée :

Flex-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 ne sera pas agrandi

Si. l'attribut flex-grow de tous les éléments est 1 , ils diviseront également l'espace restant (le cas échéant). 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

La propriété flex-shrink définit le taux de rétrécissement de l'élément, et 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. 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 de 1, lorsqu'il n'y a pas suffisamment d'espace, ils seront tous réduits proportionnellement. Si la propriété 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.

Flex-basis

La propriété flex-basis définit la taille principale de l'élément avant d'allouer l'espace excédentaire. Le navigateur utilise cet attribut pour calculer 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.

.item {
flex: 1;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

.item {
flex: auto;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

.item {
flex: none;
}
/* 等同 */
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

.item {
flex: 1 2;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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!