Ett Snabbt Sätt att komma Ihåg Skillnaden Mellan att “motivera-innehåll” och ” align-objekt`

0
34

Jag pratade med en kompis häromdagen och tjat om flexbox för den miljonte gången eftersom jag hade tillfälligt glömt skillnaden mellan motivera-innehåll och anpassa-objekt fastigheter.

“Hur gör jag för att centrera en del horisontellt med flex igen?” Undrade jag. Tja, det var då hon gav mig det jag tycker är det bästa stenografi sätt för att minnas hur de två tillsammans.

Hon sa att motivera-innehåll positioner element över den horisontella axeln eftersom ordet i sig är längre än align-objekt. Först trodde jag det var en riktigt dum idé men detta är nu hur jag minns det. Jag har även använt den för fem minuter sedan när jag behövde för att göra dessa två snabba demos:

Se Pennan motivera-innehåll: center av Robin Rendle (@robinrendle) på CodePen.

Se Pennan anpassa objekt: center av Robin Rendle (@robinrendle) på CodePen.

Så, för att sammanfatta:

  • motivera-innehåll: längre ord: horisontell justering
  • align-objekt: kortare ord: vertikal justering

Detta fick mig att tänka om det är det något annat minnesstöd enheter eller sätt att komma ihåg komplicerade saker i CSS? Finns det några andra knep du skulle rekommendera? Det typ av påminner mig om hur barn får lära sig att komma ihåg namnen på planeterna med saker som “Min Mycket Välutbildad Mor Just Visade Oss Nio”, där den första bokstaven i varje ord representerar den första bokstaven i varje planet: Merkurius, Venus, Jorden, Mars, Jupiter, Saturnus, Uranus och Neptunus.