Wie man ein `div` in CSS zentriert

 (joshwcomeau.com)
5 Punkte von GN⁺ 2024-02-14 | 3 Kommentare | Auf WhatsApp teilen
  • Das Zentrieren in CSS ist nicht länger nur ein einzelner Trick, sondern eine Frage der Auswahl zwischen Flow, Flexbox, Positioned layout, CSS Grid und text-align, je nachdem, ob sich das Element im Dokumentfluss befindet, schwebt oder mehrfach vorkommt
  • Wenn ein einzelnes Element horizontal zentriert werden soll, begrenzt der Flow-Layout-Ansatz mit max-width: fit-content und margin-inline: auto die Auswirkungen auf Geschwisterelemente
  • Mit Flexbox lassen sich einzelne oder mehrere Kinder allein mit justify-content: center und align-items: center horizontal und vertikal zentrieren; selbst bei überlaufenden Kindern entsteht ein symmetrischer Overflow
  • Für schwebende UI wie Modals oder Banner ist die Kombination aus position: fixed, inset: 0, Größenbegrenzung und margin: auto passend, und CSS Grid eignet sich mit kurzer Syntax gut für überlagerndes Stapeln
  • Text selbst braucht nicht Layout-Ausrichtung, sondern text-align: center; wenn die Unterstützung für align-content im Flow-Layout breiter wird, könnte es seltener nötig sein, für einfache vertikale Ausrichtung auf Flexbox oder Grid umzusteigen

Horizontales Zentrieren im Flow-Layout mit Auto-Margin

  • Eine der älteren Strategien besteht darin, die Breite eines Elements zu begrenzen und dann beide Margins auf auto zu setzen
.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
  • Elemente im Flow-Layout füllen standardmäßig den horizontalen Raum aus, daher ist zum Zentrieren zunächst eine Breitenbegrenzung nötig
  • fit-content sorgt dafür, dass das Element seinen Inhalt umschließt, sodass width ähnlich wie height von der Inhaltsgröße bestimmt wird
  • Wenn statt width max-width verwendet wird, wird nur die maximale Größe begrenzt, sodass das Element bei schmalerem Container ebenfalls schrumpfen kann
  • Mit nur margin-left: auto landet der freie Raum im linken Margin; wenn beide Margins auf auto gesetzt werden, wird der freie Raum gleichmäßig verteilt und das Element in die Mitte gesetzt
.element {
  max-width: fit-content;
  margin-inline: auto;
}
  • margin-inline ist die moderne Methode, margin-left und margin-right auf denselben Wert zu setzen, und die Browser-Unterstützung ist gut
  • margin-inline ist Teil der logischen Eigenschaften (logical properties) und orientiert sich nicht an links und rechts, sondern an der Inline-Achse der Schreibrichtung
    • Dadurch kann in links-nach-rechts- und rechts-nach-links-Sprachen jeweils auf der richtigen Seite Margin angewendet werden
  • Dieser Ansatz ist nützlich, wenn nur ein einzelnes Kind zentriert werden soll, etwa ein Bild zwischen Blog-Absätzen, ohne Geschwisterelemente zu beeinflussen

Einzelne oder mehrere Kinder mit Flexbox zentrieren

  • Flexbox ist ein Layout-Modus, der stark bei der Anordnung mehrerer Elemente entlang der Hauptachse ist und daher oft auch fürs Zentrieren verwendet wird
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • Mit justify-content: center und align-items: center zusammen lassen sich Kinder horizontal und vertikal zentrieren
  • Selbst wenn Kinder nicht in den Container passen, bleibt die Ausrichtung erhalten, und auch im Überlauf-Fall entsteht symmetrischer Overflow
  • Mehrere Kinder lassen sich ebenfalls zentrieren, und mit flex-direction wird die Stapelrichtung gesteuert
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
  • Das eignet sich gut als Standardwahl, die breit für einzelne oder mehrere Kinder einsetzbar ist

Schwebende UI mit Positioned Layout zentrieren

  • Elemente wie Modals, Prompts oder Banner, die sich aus dem normalen Dokumentfluss lösen und darüber schweben sollen, lassen sich mit Positioned layout behandeln
.element {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}
  • position: fixed fixiert das Element am Viewport, und inset: 0px setzt top, left, right und bottom alle auf 0px
  • Mit nur inset: 0px würde das Element versuchen, den gesamten Viewport zu füllen, daher muss seine Größe mit width, height, max-width und max-height begrenzt werden
  • Diese Kombination erzeugt absichtlich eine unmögliche Bedingung
    • Das Element kann nicht gleichzeitig links und rechts jeweils 0px entfernt sein und zugleich eine Breite von 12rem haben
    • Die CSS-Rendering-Engine priorisiert die width-Vorgabe und löst die Spannung je nach Sprachrichtung auf, indem sie das Element an einer Seite ausrichtet
  • Wenn zusätzlich margin: auto gesetzt wird, ändert sich das Auflösungsverhalten des Browsers, sodass das Element horizontal und vertikal zentriert wird
  • Die vier nötigen Bedingungen sind position: fixed, inset: 0px, begrenzte Breite und Höhe sowie margin: auto

  • Nur in einer Richtung zentrieren, etwa bei einem unteren Banner

    .element {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}
    • Wenn top: 0px weggelassen wird, entfällt die unmögliche Bedingung in vertikaler Richtung, und das Element bleibt am unteren Rand fixiert
    • calc(100vw - 8px * 2) begrenzt die maximale Breite so, dass auf beiden Seiten des Viewports ein Puffer bleibt
    • margin-inline: auto macht die Absicht der horizontalen Zentrierung präziser sichtbar

  • Elemente mit unbekannter Größe

    .element {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
    • Wenn die Elementgröße im Voraus nicht bekannt ist, können width: fit-content und height: fit-content gesetzt werden, damit das Element seinen Inhalt umschließt
    • Zusätzliche Begrenzungen wie max-width: 60vw sind möglich, aber nicht zwingend nötig; das Element bleibt im Viewport enthalten

  • Absichtlich leicht von der Mitte versetzt

    • Wenn ein einzelner inset-Wert wie bottom: 48px angepasst wird, verschiebt sich das Element um die Hälfte dieses Werts
    • Bei bottom: 48px rückt das Element um 24px nach oben
    • Das liegt daran, dass das Element innerhalb einer virtuellen Box zentriert wird, die zwischen oberer und unterer Begrenzung aufgespannt ist
    • Mit transform: translateY(-48px) lässt sich das Element exakt 48px nach oben verschieben
    • Der bottom-Offset-Ansatz hat den Vorteil, dass die transform-Eigenschaft für spätere Animationen oder Eintrittseffekte frei bleibt

Mit CSS Grid kurz zentrieren und überlappend stapeln

  • Der kürzeste Code zum Zentrieren in CSS Grid ist die Kombination aus display: grid und place-content: center
.container {
  display: grid;
  place-content: center;
}

  • place-content ist die Kurzform von justify-content und align-content und weist Zeilen und Spalten denselben Wert zu

  • Mit dieser Einstellung entsteht in der Mitte des Eltern-Containers eine 1×1-Grid-Zelle

  • Unterschied zu Flexbox

    • Obwohl es ähnlich aussieht, verwendet CSS Grid einen vollständig anderen Layout-Algorithmus als Flexbox
    • Der Unterschied wird sichtbar, wenn einem Kind width: 50% und height: 50% gegeben wird
    • In Flexbox werden Prozentwerte relativ zum Eltern-Container .container berechnet
    • In CSS Grid werden Prozentwerte relativ zur Grid-Zelle berechnet
    • Wenn grid-template-columns oder grid-template-rows nicht angegeben werden, werden Grid-Tracks anhand des Inhalts dimensioniert, wodurch ein Element kleiner als erwartet werden kann
    • In solchen Fällen lässt sich Grid mit zusätzlichem CSS anpassen, aber für einfaches Zentrieren kann Flexbox unkomplizierter sein

  • Mehrere Elemente an derselben Position überlagern

    .container {
  display: grid;
  place-content: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • CSS Grid kann mehrere Kinder in derselben Zelle platzieren
    • Wenn allen .element grid-row: 1 und grid-column: 1 gegeben wird, teilen sie sich denselben Grid-Bereich und werden vorne und hinten überlagert gestapelt
    • Das kann auch bei unterschiedlich großen Kindern funktionieren
    .container {
  display: grid;
  place-content: center;
  place-items: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • Um unterschiedlich große Kinder überlagert in der Mitte zu platzieren, wird zusätzlich place-items: center benötigt
    • place-items ist die Kurzform von justify-items und align-items und steuert die Ausrichtung von Bildern innerhalb der Grid-Zelle
    • Ohne diese Eigenschaft liegt zwar die Grid-Zelle selbst in der Mitte, die Bilder innerhalb der Zelle würden jedoch links oben gestapelt
    • Wer tiefer in CSS Grid einsteigen möchte, kann sich An Interactive Guide to CSS Grid ansehen

Text separat mit text-align ausrichten

  • Text muss in CSS separat behandelt werden; Layout-Techniken wie Flexbox richten keine einzelnen Zeichen aus
  • Wenn ein Absatz mit Flexbox zentriert wird, landet zwar der Absatz-Block in der Mitte, die Zeichen im Absatz bleiben aber linksbündig
  • Um den Text selbst zu zentrieren, muss text-align: center verwendet werden
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Die Zukunft des Flow-Layouts: align-content

  • Horizontales Zentrieren im Flow-Layout ist mit Auto-Margin möglich, für vertikales Zentrieren waren bislang jedoch andere Layout-Modi wie Flexbox oder Grid nötig
  • Stand Anfang 2024 arbeiten Browser-Hersteller an der Implementierung von align-content im Flow-Layout
  • Dieses neue Verhalten steuert die Ausrichtung des Inhalts in Block-Richtung und war damals nur hinter einem Flag in Chrome Canary sowie in Safari Technical Preview verfügbar
  • Die Beispiel-Demo zeigt nicht das tatsächliche Verhalten des Flow-Layouts, sondern wurde nach Prüfung des Verhaltens in Chrome Canary und Safari TP mit Flexbox nachgebaut
  • Diese Funktion schafft keine neue UI, könnte aber die Notwendigkeit verringern, für einfaches Zentrieren auf einen separaten Layout-Modus umzuschalten

Auswahlkriterien je nach Situation

  • Wenn ein einzelnes Element horizontal zentriert werden soll, ohne Geschwister zu beeinflussen, ist die Strategie Flow-Layout mit Auto-Margin passend
  • Für schwebende UI wie Modals oder Banner ist Positioned layout mit Auto-Margin die richtige Wahl
  • Wenn mehrere Elemente an derselben Position überlagert und zentriert gestapelt werden sollen, eignet sich CSS Grid
  • Wenn Text zentriert werden soll, wird text-align verwendet; es kann zusammen mit anderen Zentrierungsansätzen eingesetzt werden
  • In den meisten übrigen Fällen ist Flexbox die universellste Wahl
    • Es kann einzelne oder mehrere Kinder behandeln
    • Es ermöglicht horizontales und vertikales Zentrieren
    • Es funktioniert sowohl dann, wenn Kinder im Container bleiben, als auch wenn sie darüber hinauslaufen

Verwandte Beiträge

3 Kommentare

 
v08zbv8fvlkjasdflkj 2024-02-15

Wo wir gerade dabei sind: Mir fällt plötzlich auf die Nerven, dass bei GeekNews die Artikel auch nicht zentriert sind seufz haha
 
joyfui 2024-02-14

place-items: center; nutze ich sehr häufig, aber es gibt offenbar noch mehrere weitere Methoden.
 
GN⁺ 2024-02-14
Hacker-News-Kommentare

  • Da die anderen Kommentare schon die Kommentare selbst kommentieren, klinke ich mich auch ein: Das CSS-Centering-Meme bedeutet meist „wie man ein Element exakt in die Mitte eines anderen Elements setzt“.
    Dass Zentrierung aus Implementierungssicht schwierig ist und verschiedene Bedeutungen haben kann, stimmt zwar, aber für die GeoCities-/AngelFire-Generation war das schwer nachzuvollziehen, weil man schon in den 90ern mit HTML problemlos hello genau in die Mitte eines gelben 600x600-Blocks setzen konnte.
    Es war frustrierend, dass das neue Werkzeug, das angeblich besser sein sollte, eine Standardaufgabe nicht konnte, die vorher schon möglich war, und deshalb habe ich bis in die späten 2000er weiter Tabellenlayout verwendet. Ich mag CSS, aber vielleicht ist das auch eine Art Stockholm-Syndrom.
    Ich war überrascht, dass valign in Chromium auch ohne vorhanden zu sein funktioniert; ich weiß allerdings nicht, ob das eine neuere Änderung ist.

    • So wie du es beschrieben hast, also hello genau in die Mitte eines gelben 600x600-Blocks zu setzen, war schon seit der ersten CSS-Version möglich. Das HTML-Attribut valign entspricht zum Beispiel der CSS-Eigenschaft vertical-align für inline-, inline-block- und table-cell-Boxen.
      Allerdings haben meiner Erfahrung nach viele der Leute, die nostalgisch fordern, man solle einfach Tabellen benutzen, oder sich darüber beschweren, CSS sei eingeschränkt und verwirrend, nie besonders viel Mühe darauf verwendet, tatsächlich zu lernen, wie CSS funktioniert. Der Autor ist sich dieses Punkts immerhin bewusst.
    • Auch in Firefox funktioniert es ohne das Attribut "valign". Wenn man Tabellen ohne festes Layout verwendet, habe ich zwischen den drei großen Browsern aber immer wieder subtile Unterschiede gesehen, daher würde ich mich im Allgemeinen nicht auf Auto-Layout-Verhalten verlassen.

  • Guter Artikel, und die Reaktionen hier sind für ein nominell technisches Publikum ziemlich überraschend. Automatisches Seitenlayout und Formatierung sind wirklich schwierig und tatsächlich Stoff für Dissertationen[1].
    Zu erwarten, dass sich diese Komplexität durch eine simple Formulierung wie „mach es so, wie ich es will“ abstrahieren lässt, ist unrealistisch.
    Wenn man sich die Website von Gwern Branwen[2] ansieht, ist das fast schon Kunst, aber der Kern ist, dass man zuerst festlegt, wie etwas aussehen soll, und den Text dann so einschränkt, dass er sich innerhalb dieses Stils darstellen lässt.
    Ich schaue mir Web-Layouts an, seit ich 1995 bei einem Startup für „das erste Golfmagazin im Web“[3] angefangen habe, und dank Zen Garden sowie der Mailingliste/Website von A List Apart[4] habe ich verstanden, wie schwierig es ist, Webinhalte zu erstellen, die in vielen unterschiedlichen Ausgabekontexten gut aussehen.
    Semantische Inhalte auf Bildschirm, Papier oder eine andere endliche Fläche zu übertragen ist letztlich eine Abbildung oder Projektion vom ursprünglichen Raum in die Regelmenge des Zielraums, und zu diesen Regeln gehören physische Einschränkungen, Beschränkungen der Browser-Software und das jeweilige Eigenverhalten einzelner Browser.
    Deshalb wirkt CSS auf jemanden, der „einfach mal eben eine Webseite bauen“ will, chaotisch, aber in Wirklichkeit ist es weniger eine Einschränkung dessen, was man tun kann, als vielmehr eine Situation mit zu vielen Möglichkeiten.
    [1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes...
    [2] https://gwern.net/
    [3] Es hieß Golfweb und ist am Ende wohl Teil von CBS Sports geworden.
    [4] https://www.alistapart.com

    • Meine Web-Layout-Erfahrung beginnt erst 1998, ich hänge also etwa drei Jahre hinterher, aber über meine gesamte einschlägige Erfahrung hinweg habe ich noch nichts gesehen, das so hervorragend ist wie das Material von Every Layout[1]. Sehr zu empfehlen.
      [1] https://every-layout.dev/rudiments/boxes/
    • Das Problem von CSS ist fast vollständig selbst erzeugte Komplexität. Dass Layout schwierig ist, stimmt, aber ich frage mich, warum man ausgerechnet auf ein Modell gezielt hat, das es noch schwieriger macht.
      Insbesondere steckt dahinter das sisyphusartige Ziel, ein einziges großes Modell anzustreben, das für alle Seiten passt, und dabei für jede Seite das automatische Layout immer wieder neu zu berechnen. Wenn dann noch das Ziel dazukommt, jede mögliche Fenstergröße abzudecken, frage ich mich wirklich, warum man dachte, das sei machbar.
    • Ich konnte es mir nicht verkneifen, diesen Link anzufügen, weil ich noch mehr CSS-Kunst sehen wollte.
      https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/
      Ich weiß nicht, wie viele zentrierte div-Elemente darin vorkommen.
    • In den letzten Tagen habe ich versucht, flussbasiertes Layout und Seitentrennung gewaltsam in ein Flexbox-basiertes Layoutsystem zu pressen, und das hat noch einmal bestätigt, dass Layout und Formatierung wirklich schwierig sind.
      Gerade bei Tabellen, in deren Spalten Text und Objekte unterschiedlicher Größe stehen, ist es eine heikle Aufgabe, gute Heuristiken dafür zu wählen, wann und wie Elemente auf die nächste Seite umbrochen werden sollen.
    • Ich weiß nicht, wie man unterscheiden soll, ob das ein selbstverschuldetes Problem ist oder ein inhärent schwieriges Forschungsproblem. Bevor ich in die Webentwicklung gekommen bin, hätte ich nie gedacht: „Layout ist schwierig“, und damals gab es ebenfalls scrollbare und in der Größe veränderbare Fenster.
      In benutzerdefiniertem AppKit, GTK-Controls und auch in nicht veröffentlichten Lua-basierten Toolkits war es nichts Besonderes, Inhalte zu zentrieren oder Elemente umzubrechen und auszurichten; ich frage mich also, was mir beim Web entgeht.
      „Es gibt nur besonders viele Optionen“ klingt auch ein bisschen wie das längst begrabene TMTOWTDI.

  • Ausgezeichneter Artikel, und die interaktiven Elemente sind besonders gut. Was mir vor ein paar Jahren sehr geholfen hat, CSS-Positionierung und Zentrierung zu verstehen, war die Lektüre zum Box-Modell.
    Wenn man das Box-Modell versteht, hilft das dabei, den Fluss innerhalb des DOM zu beurteilen, und die CSS-Eigenschaften display und position sind ebenfalls grundlegend, wenn man Positionierung lernen will. Die MDN-Dokumentation ist sehr gut.
    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

  • „Wie zentriert man etwas?“ ist eine klassische CSS-Frage, und schon die Tatsache, dass es nicht so offensichtlich ist, wie es vor einem stehen sollte, sagt viel aus. CSS ist eher ein trübes Sammelsurium und keine Sache, die von einem einzigen Gremium entworfen wurde, sondern eine Art Küchenspülen-Sammlung, die mehrere Gremien gleichzeitig gestaltet haben
    Das Konzept echter Releases hat man schon vor langer Zeit aufgegeben, und der aktuelle Zustand von CSS ist eher eine Sammlung der Zustände einzelner Module, die sich ständig verändern. So entwickelt man keine Software, und eigentlich ist das auch für die Herstellung von irgendetwas keine gute Methode

    • Dem stimme ich zu und widerspreche zugleich. Große Gruppen von Menschen bewegen sich nun einmal langsam und chaotisch, fast wie Katzenhüten
      Auch ist nicht klar, wohin sich das Web und seine Technologien als Ganzes bewegen, daher sind gescheiterte Experimente und Inkonsistenzen kaum zu vermeiden. Das ist ein viel breiteres Feld als ein gut geplantes Ingenieurprojekt mit klaren Zielen und einem eindeutigen Weg
    • Dass die Frage nach dem Zentrieren so oft auftaucht, liegt meiner Meinung nach daran, dass sie aus Sicht von Lernenden eine sehr natürliche erste Frage ist
      Wer eine Webseite in die gewünschte Form bringen will, lernt meist zuerst Schriftgröße, Farbe, Hintergrundfarbe und Ausrichtung, und abgesehen von der Ausrichtung entspricht der Rest fast 1:1 den Methoden vor CSS
      Vor CSS musste man Inhalte einfach nur in einen Tag setzen, wenn man sie zentrieren wollte, egal ob Text, ein div, eine Tabelle oder ein HTML-Objekt wie ein Button. Viele erwarteten, dass CSS wie früher funktioniert, ohne Unterscheidung zwischen Inline- und Block-Objekten, und als CSS nicht zu dieser Vorerwartung passte, entstand diese Frage

  • Dieser Artikel ist wirklich gut, und besonders die Art der Interaktion ist hervorragend. Es gibt auch ein Werkzeug, das schon seit langer Zeit fast immer das gewünschte Ergebnis geliefert hat
    http://howtocenterincss.com

  • CSS hat Jahrzehnte gebraucht, um eine Lösung hervorzubringen, die so brauchbar ist wie Tabellen mit zentriertem Inhalt, und in der Zwischenzeit wurde die Nutzung von Tabellen für Layouts kritisiert

  • Wie viele hier halte ich CSS für eine völlige Katastrophe. Das Kernproblem ist, dass Stil-Anweisungen sich ständig gegenseitig überschreiben oder stillschweigend ohne jede Wirkung scheitern

  • Mir gefiel, dass einer der Cookie-Hinweise in den Beispielen brutal ehrlich war
    „Wir schätzen Ihre personenbezogenen Daten. Um Ihr Browser-Erlebnis zu verbessern, verwenden wir Cookies, mit denen wir diese Daten an Werbetreibende verkaufen. Das ist sehr wertvoll“

  • Es ist interessant, was man aus der Geschichte der Verwendung von Tabellen für Layouts lernen kann. Tabellen haben Rahmen, Padding und ein zellenbasiertes Layout, das in Spalten angeordnet ist, und wenn man es erweitert, braucht man um Tabellen und Zellen auch Abstände, also Margins
    Tabellen sind ein seit Langem etabliertes Element im Layout, und tatsächlich steckte darin die Einsicht, dass alle Elemente bis zu einem gewissen Grad wie Tabellenzellen funktionieren sollten
    Elemente sollten dem Box-Modell folgen, was für Menschen, die sich mit Typografie beschäftigen, ziemlich selbstverständlich ist; dass sie zugleich in Spalten angeordnet sein sollten, ist weniger offensichtlich und bildet die Grundlage von Grid-Layouts und Bootstrap
    Auf ein Layout-Problem zu stoßen, es mit Tabellen zu lösen und dann zu merken, dass man neue Funktionen braucht, die einige Eigenschaften von Tabellen haben, aber nicht alle, ist eine natürliche Evolution
    CSS hat das erkannt, aber seltsamerweise konnten manche Systeme wie Textverarbeitungen Elemente nicht unter dem Box-Modell vereinheitlichen

  • Die Beschwerden nach dem Motto „Warum ist das immer noch so schwierig?“ wirken ziemlich fehlgeleitet. Wie im Artikel gesagt, löst Flexbox alle einfachen Fälle der Zentrierung auf intuitive Weise
    Wenn es sich nicht mit Flexbox lösen lässt, dann geht es eben nicht nur um simples Zentrieren, sondern um etwas Komplexeres, und dann ist die Erwartung einer extrem einfachen Umsetzung nicht angemessen

    • Aus der Perspektive von jemandem, der das schon lange macht: Vor Flexbox war es schwierig, und selbst in der Zeit, als Flexbox noch nicht zu 100 % unterstützt wurde, musste man ständig die Browsernutzung im Blick behalten, um zu entscheiden, ob man es einsetzen kann
      Heute ist es eher so, dass es zu viele Wege gibt und die Komplexität dadurch überwältigend wird. Man repariert öfter alten Code, als dass man etwas neu baut, und muss abwägen, warum CSS auf eine bestimmte Weise geschrieben wurde, welche Edge Cases kaputtgehen könnten, ob man es überhaupt ändern darf und welche von mehreren Lösungen man wählen sollte, wenn es nicht simpel ist
      Selbst beim Überfliegen des Artikels wirkt es nicht intuitiv. Auch bei Flexbox ist die horizontale Einstellung justify-content und die vertikale align-items, und CSS hat einfach zu viele und zu willkürliche Eigenschaftsnamen, als dass ich sie mir noch gut merken könnte
      Am Ende ist der Unterschied, ob man komplexe Lösungen aus einfachen, intuitiven und verlässlichen Bausteinen zusammensetzt oder aus komplexen Bausteinen, die sich teilweise überlappen und bei denen man ständig wieder suchen muss
      Go oder Python sind eher Ersteres, CSS eher Letzteres
    • Flexbox ist für mich immer das gewesen, was CSS eigentlich hätte sein sollen; lange Zeit war es das nicht, und dann war es plötzlich doch so, und man konnte die Unterstützung für Browser ohne Flexbox fallen lassen. Es fühlt sich fast wie die Endform von CSS an
      Es gab Gründe, warum Leute das Grid-System von Bootstrap mochten, und Flexbox erledigt all das und noch mehr direkt im Browser. Es ist kaum zu übertreiben, wie sehr ich das mag
    • Früher war es in bestimmten Fällen durchaus etwas schwierig, aber seit etwa zehn Jahren ist das Problem eigentlich gelöst. Trotzdem reden manche noch immer so, als läge das Zentrieren eines div in CSS irgendwo zwischen Alchemie und Raketenwissenschaft
      Das zeigt, dass sie CSS-Veränderungen nicht so aufmerksam verfolgen wie andere Bereiche der Webentwicklung und solche Behauptungen trotzdem ganz locker raushauen
    • Außerdem wird Flexbox seit über zehn Jahren breit unterstützt. Der Kommentarverlauf hier ist ziemlich spannend
    • Absolut richtig. Wenn man mit Flexbox ringt, hilft es, einen Schritt zurückzutreten und alles nacheinander zu entwirren
      Wenn man von außen nach innen geht, also vom Elternelement zum Kindelement, wird es deutlich einfacher. Es braucht zwar etwas Technikverständnis, aber im Grunde ist es eher elastische Algebra