Maison > Article > interface Web > Comment définir la propriété align-self sur sa valeur par défaut en CSS ?

Comment définir la propriété align-self sur sa valeur par défaut en CSS ?

WBOYavant: 2023-09-23 15:53:02752parcourir

CSS ou Cascading Style Sheets est un outil puissant qui fournit un ensemble de propriétés pour aligner et positionner des éléments sur une page Web. La propriété align-self est l'une des nombreuses propriétés disponibles en CSS pour ajuster l'alignement des éléments Flex individuels dans un conteneur Flex. Par défaut, align-self est défini sur auto, ce qui signifie que l'élément héritera de l'alignement de son conteneur parent. Cependant, ce comportement peut être modifié pour des éléments Flex individuels en définissant la propriété align-self.

scc selector{
	align-self: auto;
}

attribut align-self en CSS

Avant de discuter de la façon de réinitialiser la propriété align-self à sa valeur par défaut, il est important de comprendre ce qu'est align-self. La propriété align-self est une sous-propriété de la propriété raccourcie flex ; elle est utilisée pour aligner un seul élément flexible le long de l'axe horizontal du conteneur. La valeur par défaut de l'attribut align-self est auto, ce qui fait que l'élément hérite de l'attribut align-items de son conteneur parent. L'attribut align-self peut être défini sur l'une des valeurs suivantes -

Auto (par défaut),
Lancement Flex,
Côté Flex,
Centre,
Baseline, et
étirement

Si vous définissez l'attribut align-self sur une valeur autre que auto, il remplacera l'attribut align-items du conteneur pour cet élément spécifique.

Réinitialiser align-self à la valeur par défaut en CSS

Pour réinitialiser l'attribut align-self à sa valeur par défaut, supprimez simplement la valeur automatique de l'attribut de la déclaration CSS de l'élément. Par exemple

.element {
   align-self: center;
}

Lorsque l'attribut align-self est supprimé de la déclaration, il est réinitialisé à sa valeur par défaut.

.element {
   /* align-self: center; */
}

Nous allons maintenant explorer quelques exemples de réinitialisation de la propriété align-self à sa valeur par défaut en CSS.

Utiliser les valeurs automatiques

Un moyen simple de réinitialiser la propriété align-self à sa valeur par défaut consiste à la définir sur auto. Lorsque la valeur de align-self est définie sur auto, les éléments Flex seront alignés en fonction de la valeur de la propriété align-items définie sur le conteneur Flex.

Exemple

Dans cet exemple, nous utiliserons la valeur auto pour sélectionner tous les éléments .item qui n'ont pas de classe .div1 ou .div3 et définirons leur attribut align-self sur auto. Cela garantira que seuls les éléments .div1 et .div3 ont des valeurs d'alignement personnalisées.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center;  }
      .container {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 200px;
         background-color: lightgray;
      }
      .item { width: 100px;  height: 50px; background-color: white; border: 1px solid black; margin: 10px; }
      .div1 { align-self: flex-start; }
      .div2 { align-self: auto; }
      .div3 { align-self: flex-end; }
   </style>
</head>
<body>
   <h3>Set align-self property to its default value using the align-self:auto</h3>
   <div class="container">
      <div class="item div1">HTML</div>
      <div class="item div2">CSS</div>
      <div class="item div3">JavaScript</div>
   </div>
</body>
</html>

Utilisez le sélecteur :not()

Le sélecteur

:not() est un autre moyen de réinitialiser la propriété align-self à sa valeur par défaut. Ce sélecteur permet de sélectionner tous les éléments ne répondant pas à certains critères. En utilisant le sélecteur :not(), nous pouvons sélectionner tous les éléments sauf ceux auxquels nous souhaitons appliquer une valeur d'alignement spécifique.

Exemple

Dans cet exemple, nous utiliserons le sélecteur :not() pour sélectionner tous les éléments .item qui n'ont pas de classe .box1 ou .box3 et définirons leur attribut align-self sur auto. Cela garantira que seuls .box1 et .box3 et les éléments ont des valeurs d'alignement personnalisées.

<!DOCTYPE html>
<html>
<head>
   <style>
      h1, h3{ text-align:center;}
      .container {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 200px;
         background-color: lightgray;
      }
      .item:not(.box1):not(.box3) { align-self: auto;}
      .item { width: 100px; height: 50px; border: 1px solid black; margin: 10px;  background-color:pink;  }
      .box1 { align-self: flex-start; background-color:lightgreen;}
      .box3 { align-self: flex-end; background-color:lightblue; }
   </style>
</head>
<body>
   <h3>Set align-self property to its default value using the :not() selector</h3>
   <div class="container">
      <div class="item box1">Java</div>
      <div class="item">Python</div>
      <div class="item box3">PHP</div>
   </div>
</body>
</html>

Conclusion

La propriété

align-self est un outil puissant pour définir l'alignement vertical des éléments Flex dans un conteneur Flex. Cependant, nous devrons parfois réinitialiser la propriété align-self en CSS à sa valeur par défaut. En réinitialisant la propriété align-self à sa valeur par défaut auto, ou en utilisant align-items à la place, nous pouvons simplifier le CSS et éviter les problèmes d'alignement.

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!

css auto 继承选择器样式表 flex

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Utilisez CSS pour changer l'apparence de votre curseurArticle suivant：Utilisez CSS pour changer l'apparence de votre curseur

Articles Liés

Voir plus