Quelles sont les règles d'une mise en page flexible ?

Les règles de disposition flexible comprennent : 1. Déclaration des conteneurs et des articles ; 2. Axe principal et axe transversal ; 3. Alignement et distribution ; 5. Emballage de ligne et inverse ; ajustement de la taille ; 7. Ordre transversal ; 8. Alignement transversal ; 9. Règles supplémentaires pour les conteneurs flexibles emboîtés, etc. Introduction détaillée : 1. Déclaration des conteneurs et des éléments. Dans une disposition flexible, les conteneurs sont utilisés pour contenir des éléments. 2. L'axe principal et l'axe transversal sont disposés sur l'axe principal. et axe transversal ;3.

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

Les règles de disposition élastique incluent principalement les aspects suivants :

1. Déclaration des conteneurs et des articles : Dans la disposition élastique, les conteneurs sont utilisés pour contenir des articles. Le conteneur peut être n’importe quel élément de niveau bloc, tel qu’un div. En CSS, un élément est déclaré conteneur flex en définissant la propriété display sur flex ou inline-flex. L'élément est l'élément qui doit être présenté et peut être n'importe quel élément enfant. Les éléments utilisant la disposition flexible deviennent automatiquement des éléments flexibles.

2. Axe principal et axe transversal : les éléments de la disposition flexible sont disposés sur l'axe principal et l'axe transversal. La direction de l'axe principal dépend de la valeur de la propriété flex-direction, tandis que l'axe transversal est perpendiculaire à l'axe principal. En définissant la propriété flex-direction, vous pouvez définir la direction de l'axe principal, déterminant ainsi la direction de la disposition des éléments.

3. Alignement et distribution : L'alignement et la distribution sont des règles importantes dans une mise en page flexible. La propriété justifier-content peut contrôler l'alignement des éléments sur l'axe principal, tandis que la propriété align-items peut contrôler l'alignement des éléments sur l'axe transversal. Ces propriétés permettent de centrer l'élément horizontalement et verticalement, de le déplacer vers la gauche ou la droite, etc.

4. Propriétés des éléments flexibles : les propriétés des éléments flexibles incluent flex-grow, flex-shrink et flex-basis. flex-grow définit le taux d'agrandissement de l'élément lorsqu'il y a un espace insuffisant, flex-shrink définit le taux de rétrécissement de l'élément lorsqu'il y a un excès d'espace et flex-basis définit la taille par défaut de l'élément. Ces propriétés peuvent être utilisées pour contrôler l'évolutivité et le redimensionnement du projet.

5. Retour à la ligne et inversion : en définissant l'attribut flex-wrap, vous pouvez contrôler si l'élément s'enroule ou non. S'il est défini sur flex-wrap: wrap, les éléments seront enveloppés dans le conteneur. De plus, vous pouvez utiliser l'attribut flex-reverse pour inverser l'ordre des éléments et implémenter une disposition inversée.

6. Répartition de l'espace et ajustement de la taille : en définissant les propriétés align-content et justifier-content, vous pouvez contrôler la répartition de l'espace et l'alignement des éléments multilignes. De plus, vous pouvez également utiliser les propriétés flex-basis, flex-grow et flex-shrink pour ajuster la taille de l'élément afin d'obtenir un effet de mise en page plus flexible.

7. Ordre transversal : dans une disposition flexible, en plus d'être déterminé par la direction de l'axe principal, l'ordre des éléments peut également être ajusté en définissant l'ordre de l'axe transversal. L'ordre dans lequel les éléments sont disposés peut être défini à l'aide des propriétés flex-start, flex-end, flex-left et flex-right, qui spécifient la position de début ou de fin des éléments sur l'axe transversal.

8. Alignement des axes transversaux : L'alignement de l'axe transversal peut être défini individuellement via l'attribut align-self. Cela nous permet d'aligner les éléments sur l'axe transversal, en remplaçant les paramètres d'alignement dans le conteneur. L'attribut align-self peut être défini sur auto, flex-start, flex-end, center, baseline ou stretch.

9. Règles supplémentaires pour les contenants élastiques : Pour les contenants élastiques, certaines règles supplémentaires doivent être respectées. Par exemple, un conteneur flexible peut utiliser les propriétés align-items et justifier-content pour contrôler l'alignement des éléments. De plus, les conteneurs flexibles ont un sous-élément supplémentaire : les séparateurs flexibles. Ce séparateur peut être utilisé pour contrôler l'espacement entre les éléments et peut être utilisé pour aligner le premier élément sur le bord du conteneur flexible et le dernier élément sur le bord du conteneur flexible en définissant justifier-content: espace-entre;.

10. Conteneurs flexibles imbriqués : Dans une disposition flexible, nous pouvons emboîter un conteneur flexible dans un autre conteneur flexible. Dans ce cas, le conteneur interne hérite des propriétés d’alignement, d’orientation de l’axe principal et d’habillage du conteneur externe. Cependant, l'axe transversal du conteneur interne est toujours perpendiculaire à l'axe principal du conteneur externe.

Ce qui précède sont les règles de base d'une mise en page flexible. En utilisant ces règles de manière flexible, nous pouvons obtenir divers effets de mise en page complexes. Dans le développement réel, nous devons également prendre en compte les problèmes de compatibilité des navigateurs pour garantir que notre site Web puisse afficher et utiliser correctement une mise en page élastique sur différents navigateurs et appareils.

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!