Dans le cours : CSS : Maîtriser les Flexbox

Accédez au cours complet aujourd’hui

Inscrivez-vous aujourd’hui pour accéder à plus de 24 100 cours dispensés par des experts.

Aligner des éléments flex de manière individuelle.

Aligner des éléments flex de manière individuelle. - Tutoriel CSS

Dans le cours : CSS : Maîtriser les Flexbox

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Aligner des éléments flex de manière individuelle.

“

Dans la vidéo précédente, nous avons vu comment disposer tous les flex items le long de l'axe secondaire grâce à la propriété align-items du CSS. Dans cette vidéo, nous allons faire la même chose, mais avec un flex item en particulier. Au niveau de mon code, je vais devoir choisir l'un de mes flex items, l'un de mes éléments <li>. J'ai donc besoin d'un nouveau style CSS, et mettons que je choisisse par exemple le flex item numéro 3, l'élément li numéro ( 3 ), celui du milieu. Je vais utiliser maintenant la propriété align-self du CSS. Les valeurs possibles pour la propriété align-self sont exactement les mêmes que pour la propriété allign-items. La seule différence, c'est que je travaille ici avec un des éléments flex plutôt qu'avec l'ensemble des éléments flex. Mettons par exemple align-self : center. Au niveau de mon document, lorsque je rafraîchis ma page, je constate que seul le troisième flex item se trouve au centre de l'axe secondaire, l'axe qui va de haut en bas. Bien sûr…

Table des matières