Hoe een responsieve vorm te bouwen met Flexbox

In deze zelfstudie leren we hoe we kunnen profiteren van flexbox om een responsieve vorm te maken. Wat interessant is (en tegelijkertijd opwindend) is dat we dankzij flexbox onze vorm kunnen opbouwen zonder mediaquery's te gebruiken.

Laten we, voordat we beginnen, kijken naar waar we naartoe zullen werken (bekijk de grotere versie om te zien hoe de indeling van het formulier verandert):

Formulierstructuur

Op dat moment, laten we eerst eens kijken naar de structuur van het formulier. We zullen het als volgt markeren:

We zullen de gebruiken .flex-outer ongeordende lijst om de verschillende formulierelementen te groeperen
en de .flex-binnen ongeordende lijst om de selectievakjes te groeperen.
Bijna alle besturingselementen voor formulieren worden geleverd met het bijbehorende label.

Dat is het! Door slechts twee ongeordende lijsten te definiëren (we hadden ook bestelde lijsten kunnen gebruiken), hebben we een zeer schone vorm opgebouwd. Hier is hoe het eruit ziet:

   Voornaam  
  Achternaam  
  E-mail  
  Telefoon  
  Bericht  
  Leeftijd

Notitie: wij gebruiken de p element in plaats van de label element vóór de .flex-binnen lijst. Dit komt omdat het in dit specifieke geval geen zin heeft om de label label. Deze tag moet alleen worden gebruikt om een tekstlabel te koppelen aan een formulierbesturingselement.

Dit is de markering voor de selectievakjes:

   20-29 
   30-39

Met de markup klaar, ziet de onstylige vorm er als volgt uit:

Dit zal niet de meest fantastische vorm zijn die je ooit hebt gezien, maar het werkt! Het is semantisch, toegankelijk en vloeiend; aspecten die aantoonbaar belangrijker zijn dan wat dan ook.

Op dit moment zijn we klaar om enkele stijlen toe te passen.

Formulierstijlen

Laten we beginnen met toevoegen normaliseren en autoprefixer naar onze peninstellingen:

Vervolgens identificeren we de flexcontainers. In ons geval de volgende elementen:

Elk van de lijstitems van de .flex-outer lijst.
De .flex-binnen lijst die alle selectievakjes bevat.

Daarnaast willen we de flexitems verticaal centreren over de dwarsas.

Om dit gedrag te bereiken, hebben we een aantal initiële CSS-regels opgesteld:

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

De volgende stap is het specificeren van de breedtes voor de flexitems. We beginnen met de flexitems van de .flex-outer lijst.

De belangrijkste vereisten:

De breedte van de labels moet ten minste 120 pixels zijn en maximaal 220 pixels.
De breedte van de formulierelementen die achter de labels komen, moet minimaal 220 px zijn.

Wat geeft dit ons? Elk label en het bijbehorende formulierelement worden weergegeven op een enkele horizontale rij als de breedte van het formulier ten minste 340 px is. In alle andere gevallen worden alle formulierelementen (behalve de selectievakjes zoals we zo dadelijk zullen zien) verticaal gestapeld.

Notitie: de bovengenoemde waarden zijn willekeurig - u kunt ze aanpassen aan uw behoeften.

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

Verzendknop

Ten slotte definiëren we voor de submit-knop, die ook een flex-item is, een paar basisstijlen:

.flex-outer li-knop margin-left: auto; opvulling: 8px 16px; rand: geen; achtergrond: # 333; kleur: # f2f2f2; text-transform: hoofdletters; letter-spacing: .09em; grensradius: 2px;

checkboxes

Laten we nu de selectievakjes opmaken. Vergeet niet dat hun flexwikkelaar een minimumbreedte van 220 px heeft.

Eerst stellen we de breedte in van de flexitems die de directe ouders van de selectievakjes zijn tot 100px:

.flex-inner li width: 100px;

Dan profiteren we van de rechtvaardigen-inhoud eigenschap om ze over de hoofdas uit te lijnen. Let op: deze eigenschap heeft verschillende waarden, maar voor dit voorbeeld zijn we alleen geïnteresseerd in de ruimte tussen waarde:

.flex-inner rechtvaardigen-inhoud: ruimte-tussen;

Deze waarde werkt goed en stelt ons in staat om een consistente uitlijning voor de selectievakjes en hun respectieve labels te bereiken. Een ding dat we moeten noemen, is dat deze eigenschapswaarde onhandig de elementen van de laatste rij kan verdelen. Bij bepaalde breedte van de viewport zie je zoiets als dit:

Let op de uitlijning van de laatste twee flexitems. Als je om wat voor reden dan ook niet van die lay-out houdt en je wilt dat ze naast elkaar verschijnen, kun je iets als dit proberen:

Verwijder de rechtvaardigen-inhoud eigendom van de flexwikkelaar.
Gebruik percentages om een vaste breedte toe te voegen aan de flexitems (bijv. breedte: 50%).
Gebruik mediaquery's om deze breedte op te heffen. Als de breedte van de viewport bijvoorbeeld groter is dan 992px, geef dan flexitems breedte: 25% in plaats van breedte: 50%.

Bovenal is het belangrijk om twee dingen te begrijpen:

Flexbox biedt ons een grote flexibiliteit om snel prachtige formulieren te maken
en alle bovengenoemde waarden werken goed voor dit specifieke voorbeeld. Voor uw eigen ontwerpen heeft u waarschijnlijk andere waarden nodig. Hier zijn bijvoorbeeld de labels van de selectievakjes vrij klein en daarom geven we hun ouder een vaste breedte (d.w.z. 100px). Als ze echter verschillende breedten hebben, is het misschien slimmer om ze te geven flex: 1 100px.

Laatste stijlen

Voordat we vertrekken, voegen we wat meer esthetiek toe om de dingen representatiever te maken. Selecteer het tabblad CSS in de onderstaande demo om te zien waar kleuren en spatiëring zijn toegevoegd:

Conclusie

Zoals je ziet, hebben we met een minimale opmaak en de kracht van flexbox een responsieve vorm kunnen opbouwen. Hopelijk heb je nu wat nuttige kennis opgedaan die je kan helpen bij het bouwen van je eigen flexbox-formulieren.

Volgende stappen

Als je dit formulier een stap verder wilt nemen, heb ik twee uitdagingen voor je:

Het uiterlijk verbeteren door de standaardstijlen te overschrijven (bijvoorbeeld aangepaste selectievakjes toevoegen)
en maak het dynamisch. Als u bijvoorbeeld bekend bent met WordPress, kijk dan of het mogelijk is om een Contactformulier 7 of een Ninja-formulier te maken dat de structuur en stijlen van dit formulier behoudt.

Web ontwerp