Conseils d'optimisation des propriétés de mise en page flexibles CSS : align-items et align-self

Compétences d'optimisation des attributs de mise en page flexibles CSS : aligner les éléments et aligner soi-même

Dans le développement Web moderne, la mise en page flexible (Flexbox) est devenue une méthode de mise en page très populaire et puissante. La mise en page flexible rend non seulement la mise en page plus flexible et plus réactive, mais simplifie également la disposition et l'alignement des éléments pour les développeurs. Parmi eux, les deux attributs de mise en page flexibles align-items et align-self jouent un rôle important dans l'optimisation de la mise en page des pages Web.

align-items est un attribut utilisé pour contrôler l'alignement de l'axe vertical (direction verticale) des éléments dans le conteneur flexible, et align-self est un attribut utilisé pour contrôler l'alignement de l'axe vertical de chaque élément enfant dans le conteneur flexible. Ci-dessous, nous présenterons ces deux propriétés en détail et donnerons quelques exemples de code spécifiques.

1. attribut align-items

L'attribut align-items est appliqué au conteneur flexible (flex-container) et est utilisé pour contrôler l'alignement de tous les sous-éléments du conteneur dans la direction de l'axe vertical. Il peut accepter les valeurs suivantes :

1. flex-start : L'élément enfant est aligné en haut sur l'axe vertical ;
2. flex-end : L'élément enfant est aligné en bas sur l'axe vertical ; L'élément enfant est aligné sur l'axe vertical Aligné au centre dans la direction ;
3. ligne de base : les éléments enfants sont alignés avec la ligne de base dans la direction de l'axe vertical ;
4. stretch : les éléments enfants sont étirés dans la direction de l'axe vertical pour remplir l'ensemble récipient.
5. Ce qui suit est un exemple spécifique montrant comment utiliser l'attribut align-items pour les paramètres d'alignement :

.flex-container {
  display: flex;
  align-items: center;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Dans l'exemple ci-dessus, nous utilisons align-items : centre à centre, alignez les éléments enfants dans la direction de l'axe vertical.

2. Attribut align-self

L'attribut align-self est appliqué à chaque élément enfant dans le conteneur flexible et est utilisé pour contrôler l'alignement de chaque élément enfant dans la direction de l'axe vertical. Sa valeur est la même que celle de align-items et peut remplacer l'alignement défini par align-items.

Voici un exemple concret montrant comment utiliser l'attribut align-self pour définir l'alignement de chaque élément enfant individuellement :

.flex-container {
  display: flex;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
  align-self: flex-end;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Dans l'exemple ci-dessus, nous alignons le deuxième élément enfant à l'extrémité flex via align-self : flex -end Aligné en bas le long de l'axe vertical, tandis que les autres éléments enfants restent centrés.

Conclusion

align-items et align-self sont deux attributs de mise en page flexibles qui sont très utiles lors de l'optimisation de la mise en page d'une page Web. En définissant correctement ces deux propriétés, nous pouvons facilement contrôler l'alignement vertical des éléments sur la page sans écrire de code CSS compliqué, ce qui rend la mise en page plus flexible et plus belle.

Pour résumer, align-items contrôle l'alignement de tous les éléments enfants dans le conteneur flex, tandis que align-self contrôle l'alignement de chaque élément enfant lui-même. Ils peuvent tous nous aider à mieux utiliser la mise en page flexible et à obtenir de meilleurs effets de page. Ce qui précède est le contenu sur les techniques d'optimisation des attributs de mise en page flexibles CSS. J'espère qu'il vous sera utile dans le développement Web.

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!