html - horizontal - ¿Cómo usar flex-grow en Bootstrap v4?

horizontal align bootstrap 4

Question

En el documento y en los temas de Bootstrap v4 (here) , no puedo ver ningún plan para admitir "flex-grow", algo con una sintaxis como esta, por ejemplo:

<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>

Aquí una muestra del diseño que me gustaría crear:

El botón de exportación está siempre a la derecha, y el botón de navegación ocupa todo el espacio que queda y, por lo tanto, se ve limpio.

¿Es posible construir tal diseño ya? Tal vez no se aconseja? Por supuesto, hay soluciones que utilizan CSS, pero estoy buscando una solución limpia, idealmente usando nombres de clases de Bootstrap solo para garantizar la coherencia.

Answer 1

Creé una clase para esto, revisé los documentos de Bootstrap y no encontré nada al respecto.

.flex-2 { flex-grow: 2 }

col-auto toma el espacio restante, pero si tiene más de una fila, el espacio no se distribuirá por igual. Es por eso que flex-grow hace el truco.

Answer 2

Para cualquiera que venga aquí desde una búsqueda de google (como yo).

Desde Bootstrap v 4.1 hay utilidades flex-grow y flex-shrink , ya que la documentation dice que puedes usarlas así:

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

Aquí hay un pequeño ejemplo.

<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>

Answer 3

use .col para un simple flex-grow: 1; . Se describe aquí 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>