0

Estoy haciendo un formulario en el cual, si no me alcanza en la pantalla deseo que se pase a la siguiente línea:

.container {
  display: flex;
  flex-wrap: wrap;
}

input {
  width: 100%;
}
<div class="container">
  <div>
    <div>titulo</div>
    <div><input /></div>
  </div>

  <div>
    <div>titulo</div>
    <div><input /></div>
  </div>

  <div style="width:100%;">
    <div>titulo</div>
    <div><input /></div>
  </div>

  <div>
    <div>titulo</div>
    <div><input /></div>
  </div>

</div>

Pero cuando le pongo width: 100% al penúltimo, por lógica me ocupa todo el width y manda los demás div al siguiente renglón, pero yo busco que mis div se puedan distribuir al 100% en el width container, pero si ya no alcanza pasarse a la siguiente línea con flex-wrap.

De antemano, gracias por su ayuda

0

1 respuesta 1

0

Para lograr lo que cito a continuación:

Pero cuando le pongo width 100% al penúltimo, por lógica me ocupa todo el width y manda los demás div al siguiente renglón, pero yo busco que mis div se puedan distribuir al 100% en el width...

Debes colocar en los divs contenido en .container la propiedad flex-grow a 1. Es decir:

.container > div {
  flex-grow: 1;
}

Eso hará que se distribuya entre los elementos el ancho disponible, pero también, debes establecer una anchura mínima para lograr ir a la siguiente fila una vez no haya espacio disponible:

.container > div {
  ...
  min-width: 200px; /* Esto es asumiendo que quieres 200px como anchura mínima */
}

Para no alargar la explicación dejo el siguiente fragmento con los comentarios:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  /* Propiedad CSS que ayuda distribuir entre los 
     elementos el ancho disponible de su contenedor */
  flex-grow: 1;
  
  /* Esto es, asumiendo que desee 200px de anchura
     mínima */
  min-width: 200px;
}

input {
  width: 100%;
}
<div class="container">
  <div>
    <div>Título</div>
    <div><input /></div>
  </div>

  <div>
    <div>Título</div>
    <div><input /></div>
  </div>

  <div>
    <div>Título</div>
    <div><input /></div>
  </div>

  <div>
    <div>Título</div>
    <div><input /></div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.