26636 sujets

CSS et mise en forme, CSS3

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
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...
Administrateur
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 Smiley sweatdrop )

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 Smiley sweatdrop )

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.