1. L'attribut align-self définit l'alignement des éléments flexibles individuellement dans la direction de l'axe latéral (axe vertical).
2. align-self a un auto supplémentaire (valeur par défaut), qui représente la valeur de l'attribut align-items héritée du conteneur flex.
Exemple
.récipient{
/* Définir le conteneur flexible */
affichage : flexible ;
/*
Définir le sens de disposition des éléments à l'intérieur de la ligne du conteneur : définir le sens de disposition de gauche à droite. Ligne inversée : de droite à gauche Colonne : de haut en bas Colonne inversée : de bas en haut.
*/
direction flexible : rangée ;
/*
Définir l'alignement des éléments dans le conteneur sur l'étirement de l'axe transversal : lorsque la hauteur de l'élément n'est pas définie, la hauteur de l'élément sera étirée à la même hauteur que le conteneur (par défaut)
flex-start : vers la position de départ (haut/gauche) sur l'axe transversal. Aligner flex-end : vers la position finale (vers le bas/droite) sur l'axe transversal : ligne de base d'alignement centrée : assurez-vous que le texte est dans le texte. L'élément est en même temps une ligne de base (assurez-vous que chaque texte est sur la même ligne).
*/
align-items : ligne de base ;
hauteur : 800upx ;
couleur d'arrière-plan : #FFC0CB ;
}
.SMS{
taille de police : 20 px ;
largeur : 150upx ;
hauteur : 150upx ;
}
.rouge{
couleur de fond : rouge ;
/*
Réécrire l'alignement des éléments dans le conteneur sur l'axe transversal auto : Par défaut, indiquant l'héritage de la propriété align-items de l'élément parent stretch : Lorsque la hauteur de l'élément n'est pas définie, la hauteur de l'élément sera étirée au même hauteur du conteneur (par défaut)
flex-start : vers la position de départ (haut/gauche) sur l'axe transversal. Aligner flex-end : vers la position finale (vers le bas/droite) sur l'axe transversal : ligne de base d'alignement centrée : assurez-vous que le texte est dans le texte. L'élément est en même temps une ligne de base (assurez-vous que chaque texte est sur la même ligne).
*/
align-self : centre ;
}
.vert{
couleur de fond : vert ;
}
.bleu{
couleur de fond : bleu ;
}Ce qui précède est une introduction à l'attribut align-self en CSS. J'espère que cela sera utile à tout le monde.