Mais... Ce n'est pas ce que l'on vient de faire avec justify-content?En quelque sorte, si, mais justify-content aligne dans le sens du flow, alors que align-items va aligner dans l'autre sens.
Le flow?!?Si tu préfères, quand on utilise flex-direction en ligne, justify content va permettre de gérer l'alignement en ligne et align-items l'alignement en colonne. Par contre si on utilise flex-direction en colonne, justify-content va gérer l'alignement en colonne, alors que align-items gèrera l'alignement en ligne.
Je crois voir ce que tu veux dire maintenant.Si on assigne la valeur "flex-start" à align-items ça donne :
On peut ajouter le justify-content à "space-around" par exemple :
Ce qui modifie l'alignement à l'horizontal. Et si on modifie le align-items à flex-end :
Les éléments sont alignés en bas. On peut aussi utiliser "center"
Ou aussi stretch qui va étirer les éléments par rapport à l'espace disponible, c'est d'ailleurs la valeur par défaut si on ne précise pas de propriété align-items :
Ah oui, ça laisse pas mal de possibilité, mais si on stretch sur plusieurs lignes, ça donne quoi?Et bien, on va essayer pour voir !
Ah, ça s'adapte aussi sur plusieurs lignes !En effet, par contre, ça va aussi espacer les éléments, par exemple s'il y a trop de place en hauteur :
Ah oui, ce n'est pas nécessairement ce que l'on souhaiteEffectivement, et dans ce cas, il y a la propriété align-content qui peut permettre d'aligner l'ensemble du contenu plutôt que le flux d'affichage, mais il ne fonctionne que s'il y a plusieurs lignes avec un wrap, sinon il s'applique exactement comme align-items :
Ok c'est clair. J'ai terminé cette partie