Ich habe neulich mit einem Kumpel gesprochen und mich zum millionsten Mal über Flexbox beschwert, weil ich den Unterschied zwischen den Eigenschaften justify-content und align-items kurz vergessen hatte.
„Wie zentriere ich ein Element mit Flexbox horizontal wieder?“ fragte ich mich. Da gab sie mir, was meiner Meinung nach die beste Eselsbrücke ist, um zu verstehen, wie die beiden zusammenarbeiten.
Sie sagte, dass justify-content Elemente auf der horizontalen Achse positioniert, weil das Wort selbst länger ist als align-items. Zuerst dachte ich, das sei eine wirklich alberne Idee, aber jetzt ist es die Art und Weise, wie ich es mir merke. Ich habe es sogar vor fünf Minuten benutzt, als ich diese beiden schnellen Demos machen musste.
Siehe das Pen justify-content: center von Robin Rendle (@robinrendle) auf CodePen.
Siehe das Pen align-items: center von Robin Rendle (@robinrendle) auf CodePen.
Also, zusammenfassend
justify-content: längeres Wort: horizontale Ausrichtungalign-items: kürzeres Wort: vertikale Ausrichtung
Das hat mich zum Nachdenken gebracht, ob es noch andere Mnemotechniken oder Wege gibt, sich komplexe Dinge in CSS zu merken? Gibt es andere Tricks, die Sie empfehlen würden? Es erinnert mich irgendwie daran, wie Kindern beigebracht wird, sich die Namen der Planeten mit Dingen wie „Mein Vater erklärt mir jeden Sonntag unseren Nachthimmel“ zu merken, wobei der erste Buchstabe jedes Wortes den ersten Buchstaben jedes Planeten darstellt: Merkur, Venus, Erde, Mars, Jupiter, Saturn, Uranus und Neptun.
Ich persönlich merke es mir immer, indem ich daran denke, wie der Textumbruch die horizontale Positionierung beeinflusst.
Rechtfertigen ist etwas, das man normalerweise mit Text macht. Text ist horizontal. So merke ich es mir.
Oder justify-content ist ähnlich wie text-align: justify (Achse X), bleibt Achse Y (align-items).
Der beste Weg, sich das zu merken, ist, Flex-Werte sehr oft zu verwenden :-)
justify-content richtet sich nach der Hauptachse, nicht unbedingt horizontal. Wenn Sie flex-direction auf row ändern, wird es vertikal ausgerichtet.
Und hier kommt der Spruch, wenn man denkt, man hätte gerade etwas Kluges gesagt :-)
Du hast recht, Ken (und Chris, und Ajay etc.)
Jedenfalls, wieder mit Chris, ist das Nachdenken über Text in einer Standardumgebung ein einfacher Weg.
Ich kam hierher, um das zu sagen, aber du hast es vorher gesagt und ich bin froh, diese Idee zu unterstützen. Bleiben Sie also nicht bei der Idee, dass
justify-contentdie Elemente über die x-Achse ausrichtet, denn wenn wir die Flex-Richtung auf Spalte ändern, wird es das Gegenteil tun.Hallo Robin, danke fürs Teilen! Was mich betrifft, denke ich einfach, dass „justify“ in Flexbox dasselbe bedeutet wie das Rechtfertigen von Wörtern in einem Textverarbeitungsprogramm; dann ergibt sich „align“ aus dem Ausschlussverfahren.
Tschüss!
CSS ist Trouble (oder TRBL) für Dinge wie padding: 1 2 3 4;
Ich schätze, 90 %+ der Flexbox-Nutzung ist die Standardeinstellung
flex-direction: row;, aber ich nehme an, es ist erwähnenswert, dass sichjustify-contentundalign-itemsumkehren, wenn man das ändert (flex-direction: column;). Es ist also nicht so sehr „die horizontale Achse“, sondern „die Hauptachse“ (und die Sekundärachse für die Vertikale).Die Art und Weise, sich das zu merken, könnte immer noch funktionieren
Grid ist irgendwie cool, weil es, obwohl es genauso kompliziert oder noch komplizierter ist, immer zweidimensional ist, sodass die gleichen Eigenschaften immer „das Gleiche“ tun.
Das war auch meine Sorge, was mich dazu veranlasste
align-itemsist auf der Kreuz-Achse, währendjustify-contentauf der Haupt-Achse ist.justify-contentrichtet sich nicht horizontal aus. Es richtet sich entlang derflex-direction(Standard: row) aus.Wenn also
flex-direction: columngesetzt ist, richtet sichjustify-contentvertikal aus.Ich bin vielleicht ein Außenseiter, aber ich verlasse mich auf die Tatsache, dass es in Flex-Layouts kein
justify-itemsoderjusitfy-selfgibt. Es ist nurjustify-contentals eine einzige Eigenschaft zum Ausrichten von Elementen auf der Hauptachse. Es kann nicht auf der Querachse liegen, denn ich weiß, dass ich mehr Kontrolle über die Querachse habe (z. B. kann ich Flex-Reihen als Ganzes und Flex-Elemente einzeln ausrichten).Solange Sie sich also daran erinnern, dass die Ausrichtung auf der Hauptachse in Flex-Layouts begrenzt ist (Sie können Elemente nicht einzeln ausrichten, und die
flex-Eigenschaft hat Vorrang), werden Sie sich daran erinnern, dass die einzigejustify-content-Eigenschaft auf dieser Achse funktioniert.[A]lign/[A]cross (Hauptachse)
Naja… ich gehe normalerweise hin und tippe „cmd+T flexbox css-tricks“ und suche danach.
Jemand hat bereits „trouble“ (TRBL) erwähnt. Ein weiterer Trick, den ich vor langer Zeit gehört habe und den ich ständig benutze, ist „LoVe/HAte“ (LVHA), um sich a:link, a:visited, a:hover, a:active zu merken.
Das erinnert mich an diesen Artikel https://css-tricks.de/remember-selectors-with-love-and-hate/
Ich merke mir Michael Jackson = MJ = Main Axis -> justify-content.
Ich habe mir die 4 Werte, die für Margin/Padding benötigt werden, immer als TROUBLE (top, right, bottom, left) gemerkt.
Auch im Bereich der WebGL-Shader ist die Art und Weise, wie man Matrix-Transformationen auf ein Modell anwendet, umgekehrtes TRASH (zuerst skalieren, dann rotieren, zuletzt verschieben).
Wenn ich versuche, mich an die Reihenfolge der Zahlen in der
margin- oderpadding-Kurzschreibweise zu erinnern (wie inmargin: 2rem 1rem 1rem 0), denke ich immer an die Eselsbrücke für die Himmelsrichtungen: Never Eat Shredded Wheat. Die Elemente kommen in der gleichen Reihenfolge (N-O-S-W oder oben-rechts-unten-links).Ich habe eine einfachere Lösung
1 – Denken Sie zuerst an „justify-content“ als „Text-Ausrichtung“: das wird horizontal gemacht.
2 – Denken Sie dann an die entgegengesetzte Achse (vertikal).
Wenn Sie also zuerst, und unter der Annahme, dass Sie den Standardwert von flex-direction verwenden, der „row“ ist, Dinge relativ zu dieser Hauptachse ausrichten möchten: entweder links, rechts oder mittig. All das ist horizontal. Dann, zweitens, möchten Sie sie vielleicht vertikal ausrichten.
Natürlich müssen Sie die Sache umkehren, wenn Sie in column arbeiten: die Hauptachse ist vertikal! ;)
Wenn Sie nur zwei Optionen haben und sie verwechseln, ist der beste Weg, sich die einfachere zu merken. Merken Sie sich nur „justify-content“, das wie Schriftart-Ausrichtung horizontal wirkt. Also wird align-items, unter Berücksichtigung des Standard-Flex-Flows, einfach das Gegenteil sein.
Wenn Sie den Flex-Flow in Spalte ändern, denken Sie daran, dass sich die Richtung des Flex-Flow geändert hat, also wird sich auch justify-content ändern. Merken Sie sich wieder nur eine Sache.
Margin spielt eine erstaunliche Rolle bei Kindelementen, wenn das Elternteil ein Flex-Container ist.
Sie können beides gleichzeitig erreichen, indem Sie der Kindelementen margin: auto zuweisen, unabhängig vom Flex-Flow. Es wird sowohl vertikal als auch horizontal zentriert. Margin am Kindelement ignoriert immer den Flex-Flow.
Versuchen Sie margin-left: auto, und das Element wird sich ganz rechts befinden, und es ist ähnlich für alle anderen Richtungen, wenn nur in einer Richtung angewendet.
Versuchen Sie margin: auto auto 0, und das Element wird unten zentriert.
Meine Eselsbrücke für die Planeten ist einfach „jsun“ (denken Sie an den männlichen Vornamen „Jason“). Das funktioniert nur, wenn man die ersten vier Gesteinsplaneten Merkur, Venus, Erde und Mars bis zum Asteroidengürtel kennt, was ich vermute. Dann steht jeder Buchstabe für die Gasplaneten.
Jupiter, Saturn, Uranus und Neptun.