Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Hvordan man laver en Responsive Form med Flexbox

by
Difficulty:BeginnerLength:ShortLanguages:

Danish (Dansk) translation by Benjamin Høegh (you can also view the original English article)

I denne tutorial vil vi lære at drage fordel af flexbox for at skabe en responsive form. Hvad er interessant (og spændende på samme tid) er, at flexbox gør det muligt for os at opbygge vores form uden at bruge nogen media forespørgsler.

Før vi begynder, lad os se på hvad vi skal arbejde mod (se den større version for at se hvordan vores form layout ændres):

Formular struktur

Godt så, først og fremmest, lad os grave i formularens struktur. Lad os dele det op som følgende:

  • Vi vil bruge .flex-outer uordnet liste til at gruppere de forskellige formular elementer
  • og .flex-inner uordnet liste til at gruppere afkrydsningsfelterne.
  • Næsten alle inputs kommer med en tilhørende label.

Det er det! Ved at definere bare to uordnet lister (vi kunne have brugt ordnet lister), har vi bygget en meget ren form. Her er hvordan det ser ud:

Bemærk: vi bruger elementet p i stedet for elementet label før .flex-inner liste. Dette skyldes, i dette tilfælde, at det ikke giver nogen mening at bruge koden label. Dette tag må helst kun anvendes til at knytte en artikelt med et formularkontrolelement.

Her er markup for afkrydsningsfelterne:

Vores nuværende kode, vil se således ud:

Dette vil ikke være den mest fantasifulde form du nogensinde har set, men det virker! Den er systematisk, overskuelige og uafhængig; som er det mest vigtige.

Den er ikke lige frem køn, så lad os schine den lidt op

Formularens Udseende

Lad os begynde ved at tilføje normalize og autoprefixer til vores indstillinger:

Som det næste vil vi identificere flex containere. I vores tilfælde, følgende elementer:

  • Hver af elementerne på listen med .flex-outer l
  • .flex-inner listen, som indeholder alle afkrydsningsfelter.

Derudover vil vi lodret centrere flex elementer på tværs af cross-akse.

For at opnå denne funktionsmåde har oprettet vi nogle indledende CSS regler:

Det næste skridt er at angive bredder til flex elementer. Vi begynder med flex elementer med .flex-outer liste.

De vigtigste krav:

  • Bredden på artiklerne skal være på mindst 120px og de fleste 220px.
  • Bredden på vores form, der kommer efter artiklerne skal være mindst 220px.

Hvad giver det os? Hver artikel, sammen med dens tilknyttede form tag, vil vises på en enkelt vandret række, når forms total bredde er mindst 340px. I alle andre tilfælde, vil alle form elementer (bortset fra afkrydsningsfelter, som vi kan se øjeblikket) stable lodret.

Bemærk: de ovennævnte værdier er vilkårlige – du kan ændre dem efter behov.

Submit knappen

Endelig, for submit knappen, der er også et flex element, vi definerer et par grundlæggende style regler:

Afkrydsningsfelter

Lad os nu style afkrydsningsfelterne. Husk, at deres flex wrapper har en minimum bredde af 220px.

Først, vi indstille bredden af flex komponenter, som er øjeblikkelig forældre af afkrydsningsfelterne til 100px:

Derefter, vi drage fordel af egenskaben justify-content til at justere dem på tværs af main-akse. Bemærk, at denne egenskab kan have forskellige værdier, men i dette eksempel er vi kun interesseret i space-between værdien:

Denne værdi fungerer godt og gør det muligt for os at opnå en konsekvent tilpasning til afkrydsningsfelterne og deres respective labels. En ting vi bør nævne er, at denne egenskab kan få den sidste række til at se akavet ud. På visse skærm størelser kan du se noget som dette:

Bemærk justeringen af de sidste to flex elementer. Hvis, af en eller anden grund, du ikke kan lide det her layout og du foretrækker at de skal vises ved siden af hinanden, kan du prøve noget som dette:

  • Fjern egenskaben justify-content fra flex wrapper.
  • Bruge procenter til at tilføje en fast bredde til flex elementer (f.eks. width: 50%).
  • Brug media forespørgsler til at tilsidesætte denne bredde. For eksempel, når viewport bredden er større end 992px, giv flex elementer width: 25% i stedet for width: 50%.

Mest af alt, er det vigtigt at forstå to ting:

  • Flexbox giver os stor fleksibilitet for hurtigt opbygge stilfulde formular
  • og alle de ovennævnte værdier fungerer godt for dette specifikke eksempel. For dit eget design skal du sandsynligvis bruge forskellige værdier. For eksempel, artikler i afkrydsningsfelterne er her temmelig lille og derfor giver vi deres forældre en fast bredde (dvs. 100px). Dog, hvis de har forskellige bredder, kan det være smartere at give dem flex: 1 100px.

Endelige udseende

Før vi siger farvel, så lad os tilføje lidt mere så det bliver mere præsentabelt. Se dig omkring i CSS fanen, i demo nedenfor for at se, hvor farver og afstanden er blevet tilføjet:

Konklusion

Som du kan se, med minimal markup og kraften i flexbox, lykkedes det at bygge en responsive form. Forhåbentlig har du nu lært nogle nyttig ting, som vil hjælpe dig med at opbygge din egen flexbox formular.

Næste trin

Hvis du ønsker at tage denne form et skridt videre, har jeg to udfordringer for dig:

  • Forbedre sit udseende ved at tilsidesætte standard udseendet (f.eks. tilføje brugerdefinerede afkrydsningsfelter)
  • og gøre det dynamisk. For eksempel, hvis du er fortrolig med WordPress, se hvis det er muligt at oprette en kontakt formular 7 eller en Ninja Form, som bevarer strukturen og stilarter i denne form.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.