Die eigentümliche Magie des flexbox-und auto-Margen

0
23

Im front-end-Entwicklung, oft gibt es Zeiten, wenn ich weiß, dass ich etwas nicht weiß. Ich könnte wissen genug, um zu wissen, was CSS zu suchen, aber ich habe absolut keine Idee, wie es zu benutzen oder was die richtige syntax ist. Irgendwie, in meinem Kopf, es scheint ein Aktenschrank, der ist komplett leer und wenn ich versuche, etwas zu suchen, alles was ich finde ist eine fast unleserliche Notiz statt.

Ein Thema wie dieses (das ist ein Gebiet, habe ich irgendwie immer gewusst, aber noch nie wirklich verstanden) ist, wie die automatische Ränder und flexbox mit einer anderen interagieren.

Nehmen Sie dieses Beispiel:

.Elternteil {
display: flex
}

.Kind {
margin: auto;
}

Was hat das wieder tun? Ich glaube mich zu erinnern es gibt ein paar nette Dinge, die man machen kann, und Anfang dieser Woche habe ich die Hälfte-erinnerte sich an Sie nach der Lektüre eine große post by Sam Provenza aus eine Weile zurück, dass zeigt, wie die auto-Margen und flexbox-Arbeit zusammen. Aber ich habe noch nicht ganz das Konzept, auch nach dem Lesen dieses post, und es war nicht bis ich begann, demos meiner eigenen, dass es anfing zu klicken.

In diesem post, Sam beschreibt wie margin: auto schlägt in flex-items etwa so:

Wenn Sie sich bewerben, auto-Margen in einem flex-Element, das Element wird automatisch verlängern die angegebene Marge zu besetzen, der zusätzliche Platz in der flex-container, je nachdem, in welche Richtung die auto-Marge angewendet wird.

Nehmen wir an, dass neben ein bisschen und sagen, wir haben eine einfache parent-div mit einem Kind div drin:

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

Und nehmen wir an, wir sind mit den folgenden CSS-style-diese divs:

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

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

Das Ergebnis ist so etwas wie dieses:

Finden Sie die Pen-Marge-auto: #1 von Robin Rendle (@robinrendle) auf CodePen.

Wenn wir hinzufügen margin-left: auto auf die .Kind-element etwa so:

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

…dann sehen wir dies:

Finden Sie die Pen-Marge-auto: #2 von Robin Rendle (@robinrendle) auf CodePen.

Seltsam, nicht wahr? Am linken Rand ist es, an die Eltern, damit das Kind schmiegt sich in die weit Rechte Ecke. Aber es wird ein wenig seltsamer, wenn wir setzen Sie alle Ränder auf auto:

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

Finden Sie die Pen-Marge-auto: #3 von Robin Rendle (@robinrendle) auf CodePen.

Es ist, als würden wir mit einem beliebten Zentrierung trick durch Einstellung begründen-Inhalt und align-items: center da entscheidet das Kind zur Ruhe in der Mitte des übergeordneten, sowohl horizontal als auch vertikal. Ebenso, wenn wir setzen margin-left und margin-top auf auto, dann können wir uns den flex-Element drängt sich in der unteren rechten der Eltern:

Finden Sie die Pen-Marge-auto: #4 von Robin Rendle (@robinrendle) auf CodePen.

Wenn Sam sagt, “das Element wird automatisch verlängern die angegebene Marge zu besetzen, der zusätzliche Platz in der flex-container,” der Weg meiner leeren Aktenschrank Gehirn interpretiert, das ist in etwa so:

Einstellung der margin-Eigenschaft auf einem flex-Kind drücken, das Kind Weg aus dieser Richtung. Set margin-left auf auto, wird das Kind Links drücken. Set margin-top auto und das Kind wird push an die Spitze.

Nachdem ich schreiben, es klingt so offensichtlich für mich jetzt, dass es schon fast töricht, aber manchmal ist das, was es braucht, um ein neues Konzept zu kleben in meinem big dumb spongey Birne.

Warum ist es nützlich zu wissen? Naja, ich denke, es gibt einige Momente, in denen rechtfertigen,-selbst-oder align-self könnte nicht bekommen Sie genau das, was Sie wollen in einem layout, in dem mittels automatischer Ränder gibt Ihnen die zusätzliche Flexibilität, um die Feinabstimmung Dinge. Eine Menge an demos, die ich gesehen habe, gibt auch die, die Sam für Ihre original-Beitrag, meist erscheinen zum ausrichten von Navigations-Elemente in einem Menü. Also, schieben Sie ein Element in dem Menü nach unten oder zu weit rechts von einem flex-Muttergesellschaft ist sicherlich hilfreich in diesen Szenarien.

Jedenfalls denke ich, dass diese komischen trick ist wichtig, daran zu erinnern, nur für den Fall.