Différence entre justifier-contenu vs align-items?
J'ai vraiment du mal à comprendre quelle est la différence? D'après mes recherches, il semble que justify-content peut faire... space-between et space-around, tandis que align-items peut faire ... stretch, baseline, initial et inherit?
On dirait aussi que les deux propriétés se partagent, flex-start, flex-end et center.
Y at-il et des inconvénients/avantages à utiliser l’un sur l’autre ou est-ce simplement une préférence? J'ai l'impression qu'ils ressemblent beaucoup à faire la même chose, mais que connaissez-vous la différence? Merci!!
Remarque:
Le [~ # ~] x [~ # ~] et [~ # ~] y [~ # ~] La direction de l'axe/de l'alignement peut changer en fonction de l'utilisation de flex-direction: ligne ou colonne
1. justify-content: Horizontal
Alignement et espacement le long de primaire axe (axe X)
flex-start; Aligner les enfants horizontalement à gauche
flex-end; Aligner les enfants horizontalement droit
center; Alignez les enfants horizontalement centrés (étonnez!)
space-between; Distribuez les enfants horizontalement uniformément sur toute la largeur
space-around; Distribuez les enfants horizontalement uniformément sur toute la largeur (mais avec de l’espace sur les bords
2. align-items: Vertical
Alignement uniquement le long de secondaire axe (axe des Y)
flex-start; Aligner les enfants verticalement top
flex-end; Aligner les enfants verticalement bas
center; Alignez les enfants verticalement centrés (étonnez!)
baseline; Enfants alignés verticalement afin que leurs lignes de base soient alignées (ne fonctionne pas vraiment)
stretch; Forcer les enfants à avoir la hauteur du conteneur (idéal pour les colonnes)
Voyez-le en action:
http://codepen.io/enxaneta/full/adLPwv/
À mon avis:
Ceux-ci auraient dû être nommés:
flex-x: gauche ou droite ou centre ou étirement ou espace-entre ou espace-autour
flex-y: gauche ou droite ou centre ou étirement
Mais avec le langage HTML, vous ne pouvez jamais avoir de belles choses. Jamais.