Fai piegare l’articolo flessibile su tutta la larghezza di una fila

Sto cercando di mantenere i primi 2 elementi figlio sulla stessa riga mentre il terzo elemento è al suo sotto a tutta larghezza, il tutto mentre si usa flex.

Sono particolarmente interessato all’utilizzo delle proprietà flex-grow e flex-shrink sui primi 2 elementi (che è uno dei motivi per cui non utilizzo percentuali), tuttavia il terzo elemento deve essere effettivamente a larghezza intera 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 faccio a forzare l’elemento etichetta a coprire una larghezza del 100% al di sotto degli altri due elementi 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; } 
 

Ogni volta che si desidera che un object flessibile occupi un’intera riga, impostarlo su width: 100% / flex-basis: 100% e abilita 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; } 
 

Sembra che tu stia cercando min-width su child e flex-wrap:wrap on parent:

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