CSS Flexbox in un modulo

Question

Desidero utilizzare la proprietà di visualizzazione flessibile sul mio modulo Web per disporre di due campi di testo affiancati e in crescita automatica per riempire lo spazio. Ho scelto di usare il flex su un layout di tabella perché voglio che si spostino sulla loro linea quando la finestra si restringe.

Credo di essere frainteso su come utilizzare la flexbox.

Di seguito è riportato il mio lavoro (semplificato per la pubblicazione qui). Sto usando un fieldset come genitore flessibile e ogni elemento di forma che dovrebbe "crescere" affiancato è racchiuso in una div (impostata su display: inline in modo che possano essere sulla stessa linea). Ho anche una legenda per il fieldset, impostata su display:block e width:100% in modo che sia sulla propria riga.

jsFiddle link

fieldset { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    border: none; 
 
} 
 

 
label { 
 
    display: none; 
 
} 
 

 
legend { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
fieldset > div { 
 
    display: inline; 
 
    flex: 1 1 auto; 
 
} 
 

 
input { 
 
    width: 100%; 
 
}

<form> 
 
    <fieldset> 
 
     <legend>These are Text Fields</legend> 
 
     <div> 
 
      <input type="text" id="text1"> 
 
      <label for="text1">Text Field</label> 
 
     </div> 
 
     <div> 
 
      <input type="text" id="text2"> 
 
      <label for="text2">More Text</label> 
 
     </div> 
 
    </fieldset> 
 
</form>

Come si può vedere, i div sono ciascuno sulla propria linea (nonostante la roba display: inline e FlexBox). Se aggiungi un bordo agli elementi div, vedrai che al momento sono larghi al 100%; ma anche se definisci manualmente una larghezza (come il 30%), rimangono sulle loro linee.

Come posso utilizzare flex per visualizzare le div side-by-side e consentire loro di ridimensionare per riempire la larghezza del genitore?

Answer 1

Due cose qui:

1) Quando si esegue display: flex su un elemento, ogni singolo bambino diretto è influenzata. Quindi nel tuo esempio (se funzionasse) la legenda verrà visualizzata anche sulla stessa riga.

2) Per qualsiasi motivo, fieldset non piace giocare bene con il flexbox. dato che non vuoi che la legenda sia sulla stessa linea, ti suggerisco di avvolgere gli elementi in modo specifico sulla stessa linea.

<form> 
    <fieldset> 
     <legend>These are Text Fields</legend> 
     <div class="flex-wrapper"> 
      <div> 
       <input type="text" id="text1"> 
       <label for="text1">Text Field</label> 
      </div> 
      <div> 
       <input type="text" id="text2"> 
       <label for="text2">More Text</label> 
      </div> 
     </div> 
    </fieldset> 
</form> 


fieldset { 
    border: none; 
} 

.flex-wrapper { 

    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: stretch; 
} 

.flex-wrapper > div { 
    flex: 1 1 auto; 
} 


label { 
    display: none; 
} 

legend { 
    display: block; 
    width: 100%; 
} 

input { 
    width: 100%; 
}