Milligram: Feature-Anfrage: vertikaler Ausrichtungshelfer

Erstellt am 7. Nov. 2016  ·  4Kommentare  ·  Quelle: milligram/milligram

Da das Grid-System von Milligram auf Flexboxen basiert, ist es schwierig, Utility-Klassen zu implementieren, um einige Dinge vertikal auszurichten? Bitte, es ist 2k16!

help wanted

Hilfreichster Kommentar

Um vertikal auszurichten, muss flexbox height: 100%; auf dem übergeordneten Element haben. In diesem Fall müssen Sie html , body , .container und .row einstellen

html,
body,
.container,
.row {
  height: 100%;
}

Dann funktioniert das .row-center .

Alle 4 Kommentare

Hallo @neronmoon
Du hast Recht, es ist 2016! Milligram verwendet Flexbox im Rastersystem. Verwenden Sie für die vertikale Ausrichtung diese Klassen:
.row-top , .row-bottom , .row-center , .row-stretch , .row-baseline .

Lassen Sie es mich wissen, wenn Sie noch Zweifel an der vertikalen Ausrichtung haben.

Hey @neronmoon Vorerst schließe ich diese Ausgabe. Fühlen Sie sich frei, wieder zu öffnen, wenn dies für Sie nicht ausreicht.

@cjpatoilo was ist die empfohlene Methode, diese zu verwenden?

Ich habe versucht, dies in Ihrem Beispielraster zu verwenden, wie unten gezeigt, aber nichts zentriert.

<div class="row row-center">
  <div class="column column-10">
    <span class="column-demo">10%</span>
  </div>
</div>

Haben Sie in diesem Zusammenhang eine empfohlene Methode, das einzige Ding in einer Reihe zu zentrieren?

<div class="row">
  <button>Some Button Text</button>
</div>

Dafür habe ich margin: 0 auto . Das einzige Problem ist jedoch, dass Zeilen einen negativen Rand haben, was bedeutet, dass alles nach links verschoben ist.

Um vertikal auszurichten, muss flexbox height: 100%; auf dem übergeordneten Element haben. In diesem Fall müssen Sie html , body , .container und .row einstellen

html,
body,
.container,
.row {
  height: 100%;
}

Dann funktioniert das .row-center .

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen