Quelles sont les propriétés de mise en page Flex couramment utilisées ?

Quelles sont les propriétés communes de la mise en page flexible, des exemples de code spécifiques sont requis

La mise en page flexible est un outil puissant pour concevoir une mise en page Web réactive. Il facilite le contrôle de la disposition et de la taille des éléments dans une page Web à l'aide d'un ensemble flexible de propriétés. Dans cet article, je présenterai les propriétés communes de la mise en page Flex et fournirai des exemples de code spécifiques.

1. affichage : Définissez le mode d'affichage de l'élément sur Flex.

   .container {
     display: flex;
   }

2. flex-direction : Définissez la direction de l'axe principal de l'élément.

   .container {
     flex-direction: row;
   }

3. flex-wrap : Définissez la méthode d'emballage des éléments.

   .container {
     flex-wrap: wrap;
   }

4. justify-content : Définissez l'alignement de l'élément sur l'axe principal.

   .container {
     justify-content: center;
   }

5. align-items : définissez l'alignement des éléments sur l'axe transversal.

   .container {
     align-items: center;
   }

6. align-content : définissez l'alignement des éléments multilignes sur l'axe transversal.

   .container {
     align-content: space-around;
   }

7. flex-grow : définissez le taux de grossissement de l'élément.

   .item {
     flex-grow: 1;
   }

8. flex-shrink : Définissez le taux de retrait de l'élément.

   .item {
     flex-shrink: 0;
   }

9. flex-basis : Définit la taille initiale de l'élément sur l'axe principal.

   .item {
     flex-basis: 50%;
   }

10. order : Définissez l'ordre d'affichage des éléments.

    .item {
      order: 3;
    }

Les éléments ci-dessus sont des attributs courants de la mise en page Flex. En combinant et en ajustant de manière flexible les valeurs de ces propriétés, nous pouvons facilement obtenir divers effets de mise en page. Il convient de noter qu'il existe certaines abréviations entre les noms de propriété et les valeurs de propriété de la disposition Flex. Par exemple, flex : 1 0 20 % peut remplacer flex-grow : 1 ; % ;.

Pour résumer, les attributs communs de la mise en page Flex sont : display, flex-direction, flex-wrap, justification-content, align-items, align-content, flex-grow, flex-shrink, flex-basis et order. En utilisant habilement ces propriétés et en les combinant avec des exemples de code spécifiques, nous pouvons facilement créer des mises en page Web flexibles et esthétiques. J'espère que cet article sera utile à tout le monde pour apprendre et maîtriser la mise en page Flex !

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!