Explication détaillée des propriétés de mise en page flexibles CSS : flex et justifier-contenu

Explication détaillée des propriétés de mise en page flexible CSS : flex et justifier-contenu

Dans la conception Web moderne, la mise en page flexible (flexbox) est devenue une méthode de mise en page très utile. Les mises en page flexibles nous permettent de créer facilement des mises en page adaptatives et flexibles pour s'adapter à une variété de tailles d'écran et de types d'appareils. Deux propriétés principales, flex et justifier-content, jouent un rôle important dans une mise en page flexible.

1. Attribut Flex

L'attribut flex est un attribut qui définit un conteneur de mise en page flexible et est utilisé pour contrôler l'évolutivité de chaque sous-élément du conteneur flexible. En définissant différentes valeurs de flexibilité, nous pouvons implémenter diverses mises en page adaptatives. La propriété

flex a trois valeurs :

1. flex-grow : définit le taux d'expansion du sous-élément, la valeur par défaut est 0. Lorsqu'il est défini sur 0, cela signifie aucune mise à l'échelle ; lorsqu'il est défini sur une valeur supérieure à 0, cela signifie une mise à l'échelle proportionnelle.
2. flex-shrink : définissez le taux de rétrécissement des sous-éléments, la valeur par défaut est 1. Lorsqu'il est défini sur 0, cela signifie aucun retrait ; lorsqu'il est défini sur une valeur supérieure à 0, cela signifie un retrait proportionnel.
3. flex-basis : définissez la taille de base du sous-élément, la valeur par défaut est auto. Il peut être défini sur une valeur de longueur spécifique ou sur auto, ce qui signifie que la taille est déterminée par le sous-élément lui-même.

L'exemple de code est le suivant :

.container { display: flex; justify-content: center; } .item { flex: 1; }

Dans cet exemple, nous configurons un conteneur et définissons le conteneur comme un conteneur de mise en page flexible en définissant display: flex. Alignez ensuite les sous-éléments horizontalement et centrés en définissant justifier-content: center. La valeur flexible d'un élément enfant est 1, ce qui signifie que tous les éléments enfants se dilatent et se contractent dans la même proportion.

2. Attribut justifier-content

L'attribut justifier-content est utilisé pour ajuster l'alignement des sous-éléments dans le conteneur flexible. Il contrôle l'alignement des sous-éléments sur l'axe principal (direction horizontale). La propriété

justify-content a les valeurs suivantes :

1. flex-start : Les éléments enfants sont alignés à la position de départ du conteneur flex.
2. flex-end : les sous-éléments sont alignés à la fin du conteneur flexible.
3. center : Les sous-éléments sont centrés dans le conteneur flexible.
4. espace entre : les sous-éléments sont répartis uniformément dans le conteneur flexible et l'espace entre les éléments est maintenu.
5. espace autour : les sous-éléments sont répartis uniformément dans le conteneur flexible, en conservant le même espacement avant et après les éléments.

L'exemple de code est le suivant :

.container { display: flex; justify-content: space-between; } .item { flex: 1; }

Dans cet exemple, nous configurons un conteneur et définissons le conteneur sur un conteneur de mise en page flexible en définissant display: flex. Définissez ensuite justifier-content: space-between pour répartir uniformément les éléments enfants dans le conteneur et conserver l'espace entre les éléments.

Les propriétés de mise en page flexibles CSS flex et justification-content offrent un moyen très pratique d'implémenter une mise en page adaptative et flexible. En tirant parti de ces deux propriétés, nous pouvons facilement créer des mises en page qui s'adaptent à différents appareils et tailles d'écran. Dans les projets réels, nous pouvons raisonnablement utiliser ces deux attributs en fonction des besoins et des exigences de conception pour obtenir le meilleur effet d'agencement.

Pour résumer, la propriété flex est utilisée pour contrôler l'évolutivité des sous-éléments, tandis que la propriété justifier-content est utilisée pour ajuster l'alignement des sous-éléments sur l'axe principal. Ces deux attributs sont des attributs très importants et couramment utilisés dans la mise en page flexible. En les utilisant correctement, nous pouvons facilement obtenir divers effets de mise en page adaptatifs.

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!