wake-up-neo.net

Wie benutze ich Flex-Grow?

Im doc und in den Ausgaben von Bootstrap v4 (hier) sehe ich keinen Plan zur Unterstützung von flex-grow, etwas mit einer Syntax wie der folgenden: 

<div class="d-flex">
      <div  class="flex-grow">
        I use all the space left
      </div>
      <div>
        I am a small text on the right
      </div>
</div>

Hier ein Beispiel des Layouts, das ich erstellen möchte:

image

Die Exportschaltfläche befindet sich immer auf der rechten Seite, und die Navigationsschaltfläche nimmt den verbleibenden Platz ein und wirkt daher sauber.

Kann man schon ein solches Layout erstellen? Vielleicht ist es nicht ratsam Natürlich gibt es Workarounds mit CSS, aber ich suche nach einer sauberen Lösung, die im Idealfall nur Bootstrap-Klassennamen verwendet, um Konsistenz zu gewährleisten.

csslayoutflexboxbootstrap-4
25
Eric Burel

verwenden Sie .col für einen einfachen flex-grow: 1;. Es wird hier beschrieben https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      I use all the space left
    </div>
    <div class="col-sm col-sm-auto">
      I am a small text on the right
    </div>
  </div>
</div>

29
Michael Coker

Für alle, die von einer Google-Suche hierher kommen (wie ich).

Seit Bootstrap v 4.1 gibt es flex-grow- und flex-shrink-Dienstprogramme, da die documentation besagt, dass Sie sie folgendermaßen verwenden können:

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1

Hier ist ein kleines Beispiel

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
  <div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
    Grow 0
  </div>
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
</div>

21
KacosPro

Ich habe dafür eine Klasse erstellt, die Bootstrap-Dokumente geprüft und nichts darüber gefunden.

.flex-2 { flex-grow: 2 }

col-auto nimmt den verbleibenden Speicherplatz ein. Wenn Sie jedoch mehr als eine Zeile haben, wird der Speicherplatz nicht gleichmäßig verteilt. Deshalb macht flex-grow den Trick.

0
LTroya