Die seltsame Magie von Flexbox und Auto-Rändern

In der Frontend-Entwicklung gibt es oft Zeiten, in denen ich weiß, dass ich etwas nicht weiß. Ich weiß vielleicht genug, um zu wissen, nach welchem CSS ich suchen muss, aber ich habe absolut keine Ahnung, wie ich es benutzen soll oder wie die richtige Syntax lautet. Irgendwie scheint in meinem Kopf ein Aktenschrank zu sein, der komplett leer ist, und wenn ich etwas nachschlagen will, finde ich stattdessen nur eine fast unleserliche Haftnotiz.

Ein solches Thema (ein Bereich, von dem ich irgendwie immer wusste, aber nie wirklich verstanden habe) ist die Interaktion zwischen Auto-Rändern und Flexbox.

Nehmen wir zum Beispiel:

.parent {
  display: flex
}

.child {
  margin: auto;
}

Was macht das nochmal? Ich glaube mich zu erinnern, dass man damit eine Menge nützlicher Dinge machen kann, und Anfang dieser Woche habe ich sie halbwegs wiedererkannt, nachdem ich einen großartigen Beitrag von Sam Provenza von vor einiger Zeit gelesen hatte, der zeigt, wie Auto-Ränder und Flexbox zusammenarbeiten. Aber ich habe das Konzept auch nach dem Lesen dieses Beitrags noch nicht ganz verstanden, und erst als ich anfing, eigene Demos zu erstellen, begann es zu klick machen.

In diesem Beitrag beschreibt Sam, wie margin: auto Flex-Elemente wie folgt beeinflusst:

Wenn Sie Auto-Ränder auf ein Flex-Element anwenden, erweitert dieses Element automatisch seinen angegebenen Rand, um den zusätzlichen Platz im Flex-Container zu füllen, abhängig von der Richtung, in der der Auto-Rand angewendet wird.

Lassen Sie uns das ein wenig auseinandernehmen und sagen, wir haben eine einfache übergeordnete div mit einer untergeordneten div darin.

<div class="parent">
  <div class="child"></div>
</div>

Und nehmen wir an, wir verwenden das folgende CSS, um diese divs zu stylen:

.parent {
  display: flex;
  height: 400px;
  background-color: #222;
}

.child {
  background-color: red;
  width: 100px;
  height: 100px;
}

Das Ergebnis ist etwas wie das:

Siehe den Pen margin-auto: #1 von Robin Rendle (@robinrendle) auf CodePen.

Wenn wir margin-left: auto zum .child-Element hinzufügen, wie hier:

.child {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-left: auto;
}

…dann sehen wir stattdessen das hier:

Siehe den Pen margin-auto: #2 von Robin Rendle (@robinrendle) auf CodePen.

Seltsam, oder? Der linke Rand schiebt das übergeordnete Element so, dass das untergeordnete Element in die rechte Ecke gedrängt wird. Aber es wird noch seltsamer, wenn wir alle Ränder auf auto setzen:

.child {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: auto;
}

Siehe den Pen margin-auto: #3 von Robin Rendle (@robinrendle) auf CodePen.

Es ist, als würden wir einen beliebten Zentrierungstrick anwenden, indem wir justify-content und align-items auf center setzen, da das untergeordnete Element beschließt, sich horizontal und vertikal in der Mitte des übergeordneten Elements zu positionieren. Ebenso können wir, wenn wir margin-left und margin-top auf auto setzen, das Flex-Element in die untere rechte Ecke des übergeordneten Elements schieben lassen.

Siehe den Pen margin-auto: #4 von Robin Rendle (@robinrendle) auf CodePen.

Wenn Sam sagt: „das Element erweitert automatisch seinen angegebenen Rand, um den zusätzlichen Platz im Flex-Container zu füllen“, interpretiert mein Gehirn mit leerem Aktenschrank das wie folgt:

Das Setzen der margin-Eigenschaft auf ein Flex-Kind drängt das Kind in diese Richtung. Wenn Sie margin-left auf auto setzen, drängt das Kind nach rechts. Wenn Sie margin-top auf auto setzen, drängt das Kind nach unten.

Nachdem ich das aufgeschrieben habe, klingt es für mich jetzt so offensichtlich, dass es fast dumm ist, aber manchmal muss es so sein, damit ein neues Konzept in meinem großen, dummen, schwammigen Köpfchen haften bleibt.

Warum ist das nützlich zu wissen? Nun, ich denke, es gibt einige Momente, in denen justify-self oder align-self Ihnen in einem Layout, in dem Auto-Ränder Ihnen die zusätzliche Flexibilität zur Feinabstimmung von Dingen geben, nicht genau das liefern, was Sie wollen. Viele Demos, die ich gesehen habe, einschließlich derjenigen, die Sam für ihren ursprünglichen Beitrag erstellt hat, scheinen hauptsächlich für die Ausrichtung von Navigationsmenüpunkten gedacht zu sein. Das Schieben eines Elements in diesem Menü nach unten oder ganz nach rechts eines Flex-Containers ist in diesen Szenarien sicherlich nützlich.

Wie auch immer, ich denke, es ist wichtig, sich diesen seltsamen Trick zu merken, nur für den Fall.