Estoy tratando de retener los 2 primeros elementos secundarios en la misma fila, mientras que el tercer elemento está en su propia abajo a ancho completo, todos mientras que el uso de flex.

Estoy particularmente interesado en el uso de la flex-grow y flex-shrink propiedades en los 2 primeros elementos (que es una de mis razones para no usar porcentajes) sin embargo, el tercer elemento tiene que ser en realidad todo lo ancho y a continuación los dos primeros.

La label, se agrega el elemento mediante programación después de la text elemento cuando hay un error y no puedo cambiar el código.

¿Cómo puedo forzar la etiqueta de elemento para cubrir un 100% de ancho debajo de los otros dos elementos que se colocan con flex?

CSS:

.parent {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #ececec;
}

.parent * {
  width: 100%;
}

.parent #text {
  min-width: 75px;
  flex-shrink: 2.25;
}

HTML:

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>

InformationsquelleAutor MPaul | 2018-01-04

2 Comentarios

  1. 55

    Cuando quieras una flex elemento para ocupar una fila completa, ajustar a width: 100% /flex-basis: 100%, y habilitar wrap en el contenedor.

    El elemento ahora consume todo el espacio disponible. Los hermanos se ven obligados a otras filas.

    CSS:

    .parent {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      background-color: #ececec;
    }
    
    .error {
      flex: 0 0 100%; /* fg: 0, fs: 0, fb: 100% */
      border: 1px dashed red;
    }
    
    #range, #text {
      flex: 1;
    }

    HTML:

    <div class="parent">
      <input type="range" id="range">
      <input type="text" id="text">
      <label class="error">Error message</label>
    </div>

  2. 3

    Que parecen estar buscando min-width al niño y a la flex-wrap:wrap de los padres:

    CSS:

    .parent {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
    }
    
    .parent > * {
      flex-grow: 1;
    }
    
    .parent > .error {
      min-width: 100%;
      background-color: rgba(255,0,0,.3);
    }

    HTML:

    <div class="parent">
      <input type="range" id="range">
      <input type="text" id="text">
      <label class="error">Error message</label>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here