En el doc y en el tema de Bootstrap v4 (aquí), no puedo ver ningún plan de apoyo a 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 de la disposición que me gustaría crear:

Cómo utilizar flex-grow?

El botón exportar está siempre a la derecha, y el botón de navegación toma todo el espacio a la izquierda y por lo tanto se ve limpio.

Es posible construir un diseño ya? Tal vez no es aconsejable? Por supuesto, no hay soluciones mediante el uso de CSS, pero estoy en busca de una solución limpia, idealmente utilizando Bootstrap nombres de clase sólo para garantizar la coherencia.

OriginalEl autor Eric Burel | 2017-02-09

1 Comentario

  1. 0

    He creado una clase para esto, he comprobado los archivos de inicio de google docs y no encontré nada al respecto.

    .flex-2 { flex-grow: 2 }

    col-auto toma el espacio restante, pero si usted tiene más de una fila, por lo que el espacio no será distribuido en partes iguales. Es por eso que flex-grow hace el truco.

    OriginalEl autor LTroya

Dejar respuesta

Please enter your comment!
Please enter your name here