So erstellen Sie ein Responsive-Formular mit Flexbox

In diesem Lernprogramm erfahren Sie, wie Sie mit flexbox ein responsives Formular erstellen können. Interessant (und aufregend zugleich) ist, dass wir mit flexbox unser Formular ohne Medienanfragen erstellen können.

Bevor wir beginnen, schauen wir uns an, worauf wir hinarbeiten (check die größere Version, um zu sehen, wie sich das Formularlayout ändert):

Formularstruktur

Zuerst wollen wir uns zuerst mit der Struktur des Formulars beschäftigen. Wir werden es wie folgt markieren:

• Wir werden die verwenden .Flex-Außen ungeordnete Liste, um die verschiedenen Formularelemente zu gruppieren
• und das .Flex-Inneres ungeordnete Liste, um die Kontrollkästchen zu gruppieren. 
• Fast alle Formularsteuerelemente werden mit dem zugehörigen Label geliefert.

Das ist es! Durch die Definition von nur zwei ungeordneten Listen (wir hätten auch geordnete Listen verwenden können), haben wir ein sehr sauberes Formular erstellt. So sieht es aus:

 
 
 Vorname  
 
 Nachname  
 
 Email  
 
 Telefon  
 
 Botschaft  
 
 
Alter
 
  
 
 
 einreichen 
 
 

Hinweis: wir nehmen das p anstelle von Etikette Element vor dem .Flex-Inneres Liste. Dies liegt daran, dass es in diesem speziellen Fall keinen Sinn macht, die Etikette Etikett. Dieses Tag sollte nur verwendet werden, um eine Textbeschriftung einem Formularsteuerelement zuzuordnen.

Hier ist das Markup für die Checkboxen:

 
  20-29 
 
  30-39 
  

Wenn das Markup fertig ist, sieht das nicht gestylte Formular folgendermaßen aus:

Dies ist nicht die schickste Form, die Sie je gesehen haben, aber es funktioniert! Es ist semantisch, zugänglich und fließend. Aspekte, die wohl wichtiger sind als alles andere.

An dieser Stelle können wir einige Stile anwenden.

Formularstile

Beginnen wir mit dem Hinzufügen normalisieren und Autoprefixer zu unseren Stifteinstellungen:

Als nächstes identifizieren wir die Flex-Container. In unserem Fall die folgenden Elemente:

• Jedes der Listenelemente der .Flex-Außen Liste. 
• Das .Flex-Inneres Liste, die alle Kontrollkästchen enthält.

Außerdem möchten wir die Flex-Elemente vertikal über die Querachse zentrieren.

Um dieses Verhalten zu erreichen, richten wir einige anfängliche CSS-Regeln ein:

.flex-outer li, .flex-inner display: flex; Flex-Wrap: Wrap; Ausrichten-Elemente: Mitte; 

Im nächsten Schritt legen Sie die Breite für die Flex-Elemente fest. Wir beginnen mit den Flex-Items des .Flex-Außen Liste.

Die Hauptanforderungen:

• Die Breite der Etiketten sollte mindestens 120 Pixel und höchstens 220 Pixel betragen. 
• Die Breite der Formularelemente nach den Beschriftungen sollte mindestens 220 Pixel betragen.

Was gibt uns das? Jedes Etikett wird zusammen mit dem zugehörigen Formularelement in einer einzigen horizontalen Zeile angezeigt, wenn die Breite des Formulars mindestens 340 Pixel beträgt. In allen anderen Fällen werden alle Formularelemente (mit Ausnahme der Kontrollkästchen, wie wir gleich sehen werden) senkrecht gestapelt.

Hinweis: Die oben genannten Werte sind willkürlich - Sie können sie an Ihre Bedürfnisse anpassen.

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

Senden Sie die Schaltfläche

Für den Submit-Button, der ebenfalls ein Flex-Element ist, werden einige grundlegende Stile definiert:

.flex-outer li button margin-left: auto; Polsterung: 8px 16px; Grenze: keine; Hintergrund: # 333; Farbe: # f2f2f2; Text-Transformation: Großbuchstaben; Buchstabenabstand: .09em; Grenzradius: 2px;  

Ankreuzfelder

Lassen Sie uns nun die Kontrollkästchen gestalten. Denken Sie daran, dass der Flex-Wrapper eine Mindestbreite von 220px hat.

Zuerst setzen wir die Breite der Flex-Elemente, die die übergeordneten Elemente der Checkboxen sind, auf 100 Pixel:

.flex-inner li width: 100px; 

Dann nutzen wir die Inhalt rechtfertigen Eigenschaft, um sie über die Hauptachse auszurichten. Beachten Sie, dass diese Eigenschaft andere Werte hat, aber für dieses Beispiel interessieren wir uns nur für das Raum zwischen Wert:

.Flex-Inner Justify-Content: Zwischenraum; 

Dieser Wert funktioniert gut und ermöglicht eine konsistente Ausrichtung der Kontrollkästchen und ihrer jeweiligen Beschriftungen. Wir sollten erwähnen, dass dieser Eigenschaftswert die Elemente der letzten Zeile unbeholfen verteilen kann. Bei bestimmten Ansichtsfensterbreiten sehen Sie Folgendes:

Beachten Sie die Ausrichtung der letzten beiden Flex-Elemente. Wenn Ihnen dieses Layout aus irgendeinem Grund nicht gefällt und Sie es vorziehen, dass diese nebeneinander angezeigt werden, können Sie Folgendes versuchen: 

• Entferne das Inhalt rechtfertigen Eigenschaft aus dem Flex-Wrapper.
• Verwenden Sie Prozentsätze, um den flexiblen Elementen eine feste Breite hinzuzufügen (z. Breite: 50%).
• Verwenden Sie Medienabfragen, um diese Breite zu überschreiben. Wenn beispielsweise die Breite des Ansichtsfensters größer als 992 Pixel ist, geben Sie Flex-Elemente an Breite: 25% anstatt Breite: 50%.

Vor allem ist es wichtig, zwei Dinge zu verstehen:

• Flexbox gibt uns große Flexibilität, um schnell schöne Formen zu erstellen
• Alle oben genannten Werte funktionieren gut für dieses spezielle Beispiel. Für Ihre eigenen Entwürfe benötigen Sie wahrscheinlich andere Werte. Zum Beispiel sind die Beschriftungen der Kontrollkästchen hier ziemlich klein, und aus diesem Grund geben wir dem übergeordneten Element eine feste Breite (d. H. 100px). Wenn sie jedoch unterschiedliche Breiten haben, kann es intelligenter sein, sie zu geben flex: 1 100px. 

Endgültige Stile

Bevor wir gehen, wollen wir noch mehr Ästhetik hinzufügen, um die Dinge besser präsentierbar zu machen. Wählen Sie die CSS-Registerkarte in der Demo unten aus, um zu sehen, wo Farben und Abstände hinzugefügt wurden:

Fazit

Wie Sie sehen, ist es uns mit minimaler Markup und der Leistungsfähigkeit von Flexbox gelungen, ein responsives Formular zu erstellen. Hoffentlich haben Sie jetzt einige nützliche Kenntnisse erworben, mit deren Hilfe Sie Ihre eigenen Flexbox-Formulare erstellen können. 

Nächste Schritte

Wenn Sie dieses Formular noch weiter gehen möchten, habe ich zwei Herausforderungen für Sie:

• Verbessern Sie die Darstellung, indem Sie die Standardstile überschreiben (z. B. benutzerdefinierte Kontrollkästchen hinzufügen).
• und machen es dynamisch. Wenn Sie beispielsweise mit WordPress vertraut sind, prüfen Sie, ob Sie ein Kontaktformular 7 oder ein Ninja-Formular erstellen können, das die Struktur und die Stile dieses Formulars beibehält.