Hur man bygger en responsiv form med Flexbox

I den här handledningen lär vi dig hur du utnyttjar flexbox för att skapa en responsiv form. Det som är intressant (och spännande samtidigt) är att flexbox tillåter oss att bygga vår form utan att använda några mediafrågor.

Innan vi börjar, låt oss titta på vad vi ska arbeta för (kolla in den större versionen för att se hur formulärlayouten ändras):

Formstruktur

Just då först sätter vi först in i formens struktur. Vi markerar det enligt följande:

• Vi använder .flex-yttre oorderad lista för att gruppera de olika formelementen
• och den .flex-inre oorderad lista för att gruppera kryssrutorna. 
• Nästan alla formkontroller kommer med deras tillhörande etikett.

Det är allt! Genom att definiera bara två oorderade listor (vi kunde ha använt beställda listor också), har vi byggt en mycket ren form. Så här ser det ut:

 
 
 Förnamn  
 
 Efternamn  
 
 E-post  
 
 Telefon  
 
 Meddelande  
 
 
Ålder
 
  
 
 
 Lämna 
 
 

Notera: vi använder p element i stället för märka element före .flex-inre lista. Detta beror på att det i det här fallet inte gör någon mening att använda märka märka. Den här taggen ska endast användas för att associera en textetikett med en formkontroll.

Här är markeringen för kryssrutorna:

 
  20-29 
 
  30-39 
  

När markeringen är klar ser den ostylade formen ut så här:

Det här är inte den fanciest form du någonsin sett, men det fungerar! Det är semantiskt, tillgängligt och flytande; aspekter som är förmodligen viktigare än någonting.

Vid denna tidpunkt är vi redo att börja använda några stilar till den.

Form Styles

Låt oss börja med att lägga till normalisera och autoprefixer till våra penninställningar:

Nästa kommer vi att identifiera flexbehållarna. I vårt fall följande element:

• Var och en av listobjekten i .flex-yttre lista. 
• De .flex-inre lista som innehåller alla kryssrutor.

Dessutom vill vi vertikalt centrera flexposter över tväraxeln.

För att uppnå detta beteende ställer vi upp några inledande CSS-regler:

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

Nästa steg är att ange bredden för flex-objekten. Vi börjar med flexens föremål .flex-yttre lista.

De viktigaste kraven:

• Bredden på etiketterna ska vara minst 120px och högst 220px. 
• Bredden på formelementen som kommer efter etiketterna ska vara minst 220px.

Vad ger detta oss? Varje etikett tillsammans med dess associerade formelement kommer att visas på en enda horisontell rad när formens bredd uppgår till minst 340px. I alla andra fall kommer alla formelement (bortsett från kryssrutorna som vi ser på ett ögonblick) att staplas vertikalt.

Notera: ovannämnda värden är godtyckliga - du kan ändra dem enligt dina behov.

.flex-yttre> li> etikett, .flex-yttre li p flex: 1 0 120px; max bredd: 220px;  .flex-yttre> li> etikett + *, .flex-inre flex: 1 0 220px; 

Skickaknapp

Slutligen, för inlämningsknappen, som också är ett flex-objekt, definierar vi några grundläggande stilar:

.flex-outer li-knappen margin-left: auto; vaddering: 8px 16px; gränsen: ingen; bakgrund: # 333; färg: # f2f2f2; text-transform: stor bokstav; brevavstånd: .09em; gränslinje: 2px;  

kryss~~POS=TRUNC

Låt oss nu stryka kryssrutorna. Kom ihåg att deras flex wrapper har en minsta bredd på 220px.

Först ställer vi bredden på flex-objekten som är omedelbara föräldrar till kryssrutorna till 100px:

.flex-inner li bredd: 100px; 

Då tar vi nytta av motivera-innehåll egenskap för att anpassa dem över huvudaxeln. Observera att den här egenskapen har olika värden, men för det här exemplet är vi bara intresserade av rymd-mellan värde:

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

Detta värde fungerar bra och gör det möjligt för oss att uppnå en konsekvent anpassning för kryssrutorna och deras respektive etiketter. En sak vi bör nämna är att det här egenskapsvärdet kan distribuera elementet i sista raden oklart. Vid vissa visningsbredder ser du något så här:

Lägg märke till justeringen av de två senaste flex-objekten. Om du av någon anledning inte gillar den här layouten och du föredrar att de ska visas bredvid varandra kan du prova något så här: 

• Ta bort motivera-innehåll egendom från flex wrapper.
• Använd procentandelar för att lägga till en fast bredd till flex-objekten (t.ex.. bredd: 50%).
• Använd mediafrågor för att åsidosätta denna bredd. Till exempel, när visningsbredden är större än 992px, ge flex-objekt bredd: 25% istället för bredd: 50%.

Mest av allt är det viktigt att förstå två saker:

• Flexbox ger oss stor flexibilitet för att snabbt skapa vackra former
• och alla ovannämnda värden fungerar bra för detta specifika exempel. För dina egna mönster behöver du förmodligen olika värden. Till exempel här är etiketterna i kryssrutorna ganska små och av den anledningen ger vi sina föräldrar en fast bredd (dvs 100px). Men om de har olika bredder kan det vara smartare att ge dem flex: 1 100px. 

Slutliga stilar

Innan vi lämnar, låt oss lägga till lite mer estetik för att göra saker mer presenterbara. Plocka in CSS-fliken i demo nedan för att se var färger och mellanslag har lagts till:

Slutsats

Som du kan se, med minimal markup och flexboxens förmåga lyckades vi bygga en responsiv form. Förhoppningsvis nu har du fått lite användbar kunskap som hjälper dig att bygga dina egna flexboxformar. 

Nästa steg

Om du vill ta detta formulär ett steg längre har jag två utmaningar för dig:

• Förbättra sitt utseende genom att överväga standardstilarna (t.ex. lägga till egna kryssrutor)
• och gör det dynamiskt. Om du är bekant med WordPress, kan du till exempel se om det är möjligt att skapa en kontaktformulär 7 eller en Ninja-form som bevarar strukturen och utformningen av detta formulär.