Explication détaillée de la mise en page Flex en CSS3

1. Attribut Order

L'attribut order définit l'ordre des articles. Plus la valeur est petite, plus le classement est élevé. La valeur par défaut est 0.

2. Attribut 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 tous les éléments ont une propriété flex-grow de 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.

3. Attribut 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 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. Les valeurs négatives ne sont pas valables pour cette propriété.

4. Attribut flex-basis

L'attribut flex-basis définit l'espace de l'axe principal (taille principale) occupé par 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.

5. Attribut Flex

L'attribut 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.

6. Attribut align-self

L'attribut align-self permet à un seul élément d'avoir un alignement différent de celui des autres éléments et peut remplacer l'attribut align-items. 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, 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.

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!