html - Forza l'elemento flessibile a estendersi per l'intera larghezza della riga

css css3 (2)

Ogni volta che si desidera che un oggetto flessibile occupi un'intera riga, impostarlo su width: 100% / flex-basis: 100% e abilitare l' wrap sul contenitore.

L'articolo ora consuma tutto lo spazio disponibile. I fratelli sono costretti ad altre file.

.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;
}

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

Sto cercando di trattenere i primi 2 elementi figlio sulla stessa riga mentre il terzo elemento è nel suo sotto a tutta larghezza, il tutto usando flex.

Sono particolarmente interessato all'utilizzo delle proprietà flex-grow e flex-shrink sui primi 2 elementi (che è una delle mie ragioni per non usare le percentuali), tuttavia il terzo elemento deve essere realmente a larghezza piena e inferiore ai primi due.

L'elemento label viene aggiunto a livello di text dopo l'elemento di text quando si verifica un errore e non riesco a modificare il codice.

Come posso forzare l'elemento dell'etichetta a una larghezza del 100% al di sotto degli altri due elementi che sono posizionati usando flex?

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

.parent * {
  width: 100%;
}

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

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

Sembra che tu stia cercando una min-width per il bambino e flex-wrap:wrap il genitore:

.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);
}

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