Hvordan bygge en responsiv form med Flexbox

I denne opplæringen lærer vi hvordan du kan dra nytte av flexbox for å lage et responsivt skjema. Det som er interessant (og spennende samtidig) er at flexbox lar oss bygge vårt skjema uten å bruke noen medieforespørsler.

Før vi begynner, la oss se på hva vi skal jobbe for (se ut den større versjonen for å se hvordan skjemaoppsettet endres):

Form Struktur

Akkurat da, første ting først, la oss grave inn i formens struktur. Vi merker det opp som følger:

• Vi bruker .flex-ytre uordnet liste for å gruppere de ulike formelementene
• og .flex-indre uordnet liste for å gruppere avmerkingsboksene. 
• Nesten alle formkontroller kommer med tilhørende etikett.

Det er det! Ved å definere bare to uordnede lister (vi kunne også ha brukt bestilte lister), har vi bygget en veldig ren form. Slik ser det ut:

 
 
 Fornavn  
 
 Etternavn  
 
 e-post  
 
 telefon  
 
 Budskap  
 
 
Alder
 
  
 
 
 Sende inn 
 
 

Merk: Vi bruker p element i stedet for merkelapp element før .flex-indre liste. Dette skyldes at det i dette spesielle tilfellet ikke gir mening å bruke merkelapp stikkord. Denne taggen bør bare brukes til å knytte en tekstetikett med skjemakontroll.

Her er merket for avmerkingsboksene:

 
  20-29 
 
  30-39 
  

Med markeringen klar, ser den uformede formen ut slik:

Dette vil ikke være den fanciest form du noensinne har sett, men det fungerer! Det er semantisk, tilgjengelig og flytende; aspekter som er uten tvil viktigere enn noe annet.

På dette tidspunktet er vi klare til å begynne å bruke noen stilarter til den.

Form Stiler

La oss begynne med å legge til normal og autoprefixer til våre penninnstillinger:

Neste vil vi identifisere flexbeholdere. I vårt tilfelle, følgende elementer:

• Hver av listens gjenstander av .flex-ytre liste. 
• De .flex-indre liste som inneholder alle avmerkingsboksene.

I tillegg ønsker vi å sentrere fleksibeltene på tverrgående akse vertikalt.

For å oppnå denne oppførselen, oppretter vi noen innledende CSS-regler:

.flex-ytre li, .flex-indre display: flex; flex-wrap: wrap; justeringselementer: center; 

Det neste trinnet er å spesifisere breddene for flex-elementene. Vi begynner med flex elementer av .flex-ytre liste.

De viktigste kravene:

• Bredden på etikettene skal være minst 120px og maksimalt 220px. 
• Bredden på formelementene som kommer etter etikettene, skal være minst 220px.

Hva gir dette oss? Hver etikett sammen med det tilhørende formelementet vil bli vist på en enkelt horisontal rad når bredden på skjemaet utgjør minst 340px. I alle andre tilfeller vil alle formelementer (bortsett fra boksene som vi ser på et øyeblikk) stables vertikalt.

Merk: De nevnte verdiene er vilkårlig - du kan endre dem etter dine behov.

.flex-ytre> li> etikett, .flex-ytre li p flex: 1 0 120px; maksimal bredde: 220px;  .flex-ytre> li> label + *, .flex-inner flex: 1 0 220px; 

Send inn knapp

Til slutt, for submit-knappen, som også er et fleksibelt element, definerer vi noen grunnleggende stiler:

.flex-ytre li-knapp margin-left: auto; polstring: 8px 16px; grense: ingen; bakgrunn: # 333; farge: # f2f2f2; tekst-transformer: store bokstaver; brevavstand: .09em; border-radius: 2px;  

boksene

La oss nå utforme avmerkingsboksene. Husk at deres flex wrapper har en minimumsbredde på 220px.

Først setter vi bredden på flex-elementene som er umiddelbare foreldre i avmerkingsboksene til 100px:

.flex-inner li bredde: 100px; 

Da tar vi fordel av rettferdig-innhold egenskap for å justere dem over hovedaksen. Vær oppmerksom på at denne egenskapen har forskjellige verdier, men for dette eksempelet er vi bare interessert i plass mellom- verdi:

.flex-inner justify-content: mellomrom mellom; 

Denne verdien fungerer bra og lar oss oppnå en konsistent justering for avmerkingsboksene og deres respektive etiketter. En ting vi bør nevne er at denne eiendomsverdien kan distribuere elementene i den endelige raden uklart. På visse visningsbredder ser du noe slikt:

Legg merke til justeringen av de to siste flex-elementene. Hvis du av en eller annen grunn ikke liker det, og du foretrekker at de vises ved siden av hverandre, kan du prøve noe slikt: 

• Fjern rettferdig-innhold eiendom fra flex wrapper.
• Bruk prosentandeler for å legge til en fast bredde til flex-elementene (f.eks. bredde: 50%).
• Bruk medieforespørsler for å overstyre denne bredden. For eksempel, når visningsbredden er større enn 992px, gi flekseposter bredde: 25% i stedet for bredde: 50%.

Mest av alt er det viktig å forstå to ting:

• Flexbox gir oss stor fleksibilitet for å raskt bygge vakre former
• og alle de nevnte verdiene fungerer godt for dette spesifikke eksemplet. For dine egne design trenger du sannsynligvis forskjellige verdier. For eksempel er merkene i avmerkingsboksene ganske små, og derfor gir vi foreldrene en fast bredde (dvs. 100px). Men hvis de har forskjellige bredder, kan det være smartere å gi dem flex: 1 100px. 

Endelige stiler

Før vi går, la oss legge til litt mer estetikk for å gjøre ting mer presentable. Velg mellomrom CSS-fanen i demonstrasjonen nedenfor for å se hvor farger og mellomrom har blitt lagt til:

Konklusjon

Som du kan se, med minimal oppmåling og kraften til flexbox, klarte vi å bygge en responsiv form. Forhåpentligvis nå har du fått litt nyttig kunnskap som vil hjelpe deg med å bygge dine egne flexbox-skjemaer. 

Neste skritt

Hvis du vil ta dette skjemaet et skritt videre, har jeg to utfordringer for deg:

• Forbedre utseendet ved å overstyr standardstilene (for eksempel legge til egendefinerte avmerkingsbokser)
• og gjør det dynamisk. Hvis du for eksempel er kjent med WordPress, kan du se om det er mulig å opprette et kontaktskjema 7 eller en ninjaform som beskytter strukturen og stilene i dette skjemaet.