Come costruire un modulo reattivo con Flexbox

In questo tutorial, impareremo come trarre vantaggio da Flexbox per creare una forma reattiva. Ciò che è interessante (ed eccitante allo stesso tempo) è che Flexbox ci consente di costruire il nostro modulo senza utilizzare alcuna query multimediale.

Prima di iniziare, vediamo a cosa lavoreremo (controlla la versione più grande per vedere come cambia il layout del modulo):

Struttura della forma

Allora, per prima cosa, scaviamo nella struttura della forma. Lo contrassegneremo come segue:

• Useremo il .flex-esterno elenco non ordinato per raggruppare i vari elementi del modulo
• e il .flex-interno elenco non ordinato per raggruppare le caselle di controllo. 
• Quasi tutti i controlli dei moduli vengono forniti con l'etichetta associata.

Questo è tutto! Definendo solo due liste non ordinate (avremmo potuto usare anche liste ordinate), abbiamo creato una forma molto pulita. Ecco come appare:

 
 
 Nome di battesimo  
 
 Cognome  
 
 E-mail  
 
 Telefono  
 
 Messaggio  
 
 
Età
 
  
 
 
 Sottoscrivi 
 
 

Nota: noi usiamo il p elemento invece del etichetta elemento prima del .flex-interno elenco. Questo perché, in questo caso particolare, non ha senso usare il etichetta etichetta. Questo tag deve essere utilizzato solo per associare un'etichetta di testo a un controllo di modulo.

Ecco il markup per le caselle di controllo:

 
  20-29 
 
  30-39 
  

Con la marcatura pronta, la forma non disegnata sembra così:

Questa non sarà la forma più fantasiosa che tu abbia mai visto, ma funziona! È semantico, accessibile e fluido; aspetti che sono probabilmente più importanti di qualsiasi altra cosa.

A questo punto, siamo pronti per iniziare ad applicare alcuni stili ad esso.

Stili di forma

Iniziamo aggiungendo normalizzare e autoprefixer alle nostre impostazioni della penna:

Successivamente identificheremo i contenitori flex. Nel nostro caso, i seguenti elementi:

• Ciascuno degli elementi della lista di .flex-esterno elenco. 
• Il .flex-interno lista che contiene tutte le caselle di controllo.

Inoltre, vogliamo centrare verticalmente gli elementi flessibili sull'asse trasversale.

Per ottenere questo comportamento, impostiamo alcune regole CSS iniziali:

.flex-outer li, .flex-inner display: flex; flex-wrap: wrap; align-items: center; 

Il prossimo passo è specificare le larghezze per gli elementi flessibili. Iniziamo con gli elementi flessibili del .flex-esterno elenco.

I requisiti principali:

• La larghezza delle etichette deve essere di almeno 120 px e al massimo 220 px. 
• La larghezza degli elementi del modulo che seguono le etichette deve essere almeno di 220 px.

Cosa ci dà questo? Ogni etichetta insieme al suo elemento modulo associato verrà visualizzata su una singola riga orizzontale quando la larghezza del modulo è pari ad almeno 340 pixel. In tutti gli altri casi, tutti gli elementi del modulo (ad eccezione delle caselle di controllo che vedremo tra un momento) si impilano verticalmente.

Nota: i valori sopra indicati sono arbitrari: puoi modificarli in base alle tue esigenze.

.flex-outer> li> label, .flex-outer li p flex: 1 0 120px; larghezza massima: 220 px;  .flex-outer> li> label + *, .flex-inner flex: 1 0 220px; 

Invia pulsante

Infine, per il pulsante di invio, che è anche un elemento flessibile, definiamo alcuni stili di base:

.flex-external pulsante li margin-left: auto; imbottitura: 8px 16px; confine: nessuno; sfondo: # 333; colore: # f2f2f2; text-transform: maiuscolo; letter-spacing: .09em; border-radius: 2px;  

caselle di controllo

Ora modifichiamo le caselle di controllo. Ricorda che il loro involucro flessibile ha una larghezza minima di 220 px.

Innanzitutto, impostiamo la larghezza degli elementi flessibili che sono i genitori immediati delle caselle di controllo a 100 px:

.flex-inner li width: 100px; 

Quindi, sfruttiamo il justify-contenuti proprietà per allinearli sull'asse principale. Nota che questa proprietà ha valori diversi, ma per questo esempio, ci interessa solo il spazio tra valore:

.flex-inner justify-content: space-between; 

Questo valore funziona bene e ci consente di ottenere un allineamento coerente per le caselle di controllo e le rispettive etichette. Una cosa che dovremmo menzionare è che questo valore di proprietà può distribuire gli elementi della riga finale in modo imbarazzante. A certe larghezze di visualizzazione vedrai qualcosa di simile a questo:

Notare l'allineamento degli ultimi due elementi flessibili. Se, per qualche motivo, non ti piace quel layout e preferisci che vengano visualizzati uno accanto all'altro, puoi provare qualcosa del genere: 

• Rimuovi il justify-contenuti proprietà dall'involucro flessibile.
• Usa le percentuali per aggiungere una larghezza fissa agli elementi flessibili (ad es. larghezza: 50%).
• Utilizzare le query multimediali per sovrascrivere questa larghezza. Ad esempio, quando la larghezza della vista è superiore a 992 px, fornire elementi flessibili larghezza: 25% invece di larghezza: 50%.

Soprattutto, è importante capire due cose:

• Flexbox ci offre una grande flessibilità per la costruzione rapida di bellissime forme
• e tutti i valori sopra menzionati funzionano bene per questo esempio specifico. Per i tuoi progetti, probabilmente avrai bisogno di valori diversi. Ad esempio, qui le etichette delle caselle di controllo sono piuttosto piccole e per questa ragione diamo al genitore una larghezza fissa (cioè 100px). Tuttavia, se hanno larghezze diverse, potrebbe essere più intelligente da dare loro flex: 1 100 px. 

Stili finali

Prima di andare, aggiungiamo un po 'di estetica per rendere le cose più presentabili. Seleziona la scheda CSS nella demo qui sotto per vedere dove sono stati aggiunti i colori e la spaziatura:

Conclusione

Come puoi vedere, con il margine minimo e la potenza di Flexbox, siamo riusciti a creare un modulo reattivo. Speriamo ora di aver acquisito alcune utili conoscenze che ti aiuteranno a costruire i tuoi moduli flessibili. 

Prossimi passi

Se vuoi fare un passo avanti in questa forma, ho due sfide per te:

• Migliora il suo aspetto sovrascrivendo gli stili predefiniti (ad esempio aggiungi caselle di controllo personalizzate)
• e renderlo dinamico. Ad esempio, se hai familiarità con WordPress, vedi se è possibile creare un Contact Form 7 o un Ninja Form che preservi la struttura e gli stili di questo modulo.