Les valeurs de la propriété align-self

Bonjour,
j'observe qu'il y a beaucoup de type d'alignements verticaux possibles sur cette propriété mais j'ai du mal à saisir les différences entre les valeurs baseline, auto, normal, start, flex-start, self-start qui donnent le même résultat. Dans quel cas utiliser l'une plutôt que l'autre?
Et je n'ai pas trouvé de ressources (en Français tout au moins) traitant précisément de ce sujet.
Modifié par Hermann (11 Mar 2019 - 09:51)

Salut,


https://la-cascade.io/align-self/

Ils ne donnes pas tous le même résultat selon le contexte.

Hermann a écrit :
Dans quel cas utiliser l'une plutôt que l'autre?

Ça va paraître con mais il faut juste utiliser celle qui donne le résultat que tu souhaites.
En gros tu ne vas utiliser que 5 valeurs : flex-start / flex-end / center / baseline / stretch

Hello,

Voici les 2 ressources que j'utilise lorsque j'utilise flexbox:

https://yoksel.github.io/flex-cheatsheet/#align-self

https://la-cascade.io/align-self/

En espérant que ça puisse t'aider...

Merci à vous deux, très bonnes ressources ! J'aurais dû au moins vérifier la liste des valeurs standards car elles ne le sont manifestement pas toutes dans celles que j'ai citées...

Hello,

Dans un premier temps, on peut déjà distinguer les valeurs "start" et "flex-start".

- start n'existe que dans Grid Layout (ne fonctionne pas dans Flexbox)
- flex-start n'est censé exister que dans Flexbox (mais fonctionne aussi dans Grid Layout )

La valeur "auto" (par défaut) dit à l'élément de prendre l'alignement général (celui défini sur la parent via "align-items"... est qui est donc un équivalent de "stretch")
Modifié par Raphael (11 Mar 2019 - 15:07)

Raphael a écrit :
Hello,

Dans un premier temps, on peut déjà distinguer les valeurs "start" et "flex-start".

- start n'existe que dans Grid Layout (ne fonctionne pas dans Flexbox)
- flex-start n'est censé exister que dans Flexbox (mais fonctionne aussi dans Grid Layout )

La valeur "auto" (par défaut) dit à l'élément de prendre l'alignement général (celui défini sur la parent via "align-items"... est qui est donc un équivalent de "stretch")

Merci pour ces précisions, j'ai été trompé par ma console qui m'affichait plus de valeurs qu'autorisées (car croisées avec celles du grid module, j'y avais pas pensé et je connais encore assez mal ce module), tout s'éclaircit pour le coup.