Ik vind het heel moeilijk om te begrijpen wat het verschil is? Uit mijn onderzoek blijkt dat justify-contentkan doen… space-betweenen space-around, terwijl align-itemskan doen… stretch, baseline, initialen inherit?

Ziet er ook uit als beide eigenschappen share, flex-start, flex-enden center.

Zijn er nadelen/voordelen aan het gebruik van de ene boven de andere of is het gewoon de voorkeur? Ik heb het gevoel dat ze veel te veel op elkaar lijken om gewoon hetzelfde te doen, weet iemand het verschil? Met dank!!

Antwoord 1, autoriteit 100%

Beide stellen de uitlijning van de inhoud in.

1. justify-content:langs de primaireas

(horizontale uitlijning/afstand instellen als flex-richting rij is of verticale uitlijning/afstand als flex-richting kolom is)

Als flex-richting bijvoorbeeld rij is (standaard):

flex-start;Kinderen horizontaallinks uitlijnen

flex-end;Kinderen horizontaalgoed uitlijnen

center;Kinderen horizontaalcentreren (verbazingwekkend!)

space-between;Verdeel kinderen horizontaalgelijkmatig over de gehele breedte

space-around;Verdeel kinderen horizontaalgelijkmatig over de gehele breedte (maar met ruimte aan de randen

2. align-items:langs de secundaireas

(verticale uitlijning instellen als de flex-richting rij is of horizontale uitlijning als de flex-richting kolom is)

Als flex-richting bijvoorbeeld rij is (standaard):

flex-start;Kinderen verticaalboven uitlijnen

flex-end;Kinderen verticaalonderaan uitlijnen

center;Kinderen verticaalin het midden uitlijnen (verbazingwekkend!)

baseline;Kinderen verticaaluitgelijnd zodat hun baselines (werkt niet echt) uitlijnen

stretch;Kinderen dwingen de hoogte van de container te zijn (ideaal voor kolommen)

Zie het in actie:

http://codepen.io/enxaneta/full/adLPwv/

Naar mijn mening:

Deze hadden moeten heten:

flex-x:uitlijning/afstand in primaire as

flex-y:uitlijning in secundaire as

Maar met HTML kun je nooit leuke dingen hebben. Nooit.