Die einfachste Formularimplementierung des Flexbox-Layouts

Flexibles Layout (Flexbox) erfreut sich zunehmender Beliebtheit und wird von immer mehr Menschen verwendet, da das Schreiben von CSS-Layouts damit sehr bequem ist.

Vor drei Jahren habe ich eine Einführung zu Flexbox geschrieben (oben, unten), aber sie war etwas unklar. Heute habe ich mir ein Tutorial angesehen und festgestellt, dass man Flexbox anhand eines einfachen Formulars erklären kann und dass der Inhalt sehr praktisch ist.

Im Folgenden erfahren Sie, wie Sie in nur 10 Minuten ein einfaches Formularlayout erlernen.

1. <form>-Element

Formulare verwenden <form> -Element.

<form></form>

Oben ist ein leeres Formular. Gemäß dem HTML-Standard ist es ein Element auf Blockebene und nimmt standardmäßig die volle Breite ein, hat aber eine Höhe von 0, da es keinen Inhalt hat.

2. Formularsteuerelemente

Fügen Sie nun die beiden am häufigsten verwendeten Formularsteuerelemente hinzu.

<form>
  <input type="E-Mail" name="E-Mail">
  <button type="submit">Senden</button>
</form>

Im obigen Code enthält das Formular ein Eingabefeld ( <input> ) und eine Schaltfläche ( <button> ).

Beide Controls sind laut Standard Inline-Block-Elemente, das heißt, sie werden standardmäßig nebeneinander in einer Zeile platziert.

Das obige Bild zeigt die Standarddarstellung dieses Formulars durch den Browser (mit Ausnahme der Farbe). Sie können sehen, dass zwischen den beiden Steuerelementen ein Abstand von 3-4 Pixeln besteht, der durch den integrierten Stil des Browsers angegeben wird.

3. Flexbox-Layout festlegen

Geben Sie als Nächstes an, dass das Formular das Flexbox-Layout verwenden soll.

bilden {
  Anzeige: Flex;
}

Wie Sie sehen, verschwindet der Abstand zwischen den beiden Steuerelementen, da elastische Layoutelemente standardmäßig keinen Abstand haben.

4. Flex-Grow-Attribut

Zwei Orte verdienen die Beachtung.

(1) Die Breite der beiden Steuerelemente hat sich nicht verändert, da das elastische Layout die Breite der Elemente standardmäßig nicht verändert.

(2) Das elastische Layout ist standardmäßig linksbündig, so dass die beiden Steuerelemente vom Zeilenanfang aus angeordnet werden.

Wenn das Eingabefeld die gesamte verbleibende Breite der aktuellen Zeile einnehmen soll, müssen wir nur flex-grow Eigenschaft des Eingabefelds auf 1 festlegen.

Eingabe {
  Flex-Wachstum: 1;
}

Im obigen Bild hat sich die Schaltflächenbreite nicht geändert, aber das Eingabefeld ist breiter geworden, und zwar um die Breite der aktuellen Zeile abzüglich der Breite der Schaltfläche.

flex-grow ist standardmäßig auf 0 eingestellt, was bedeutet, dass die ursprüngliche Breite ohne Dehnung verwendet wird. Wenn der Wert 1 ist, bedeutet dies, dass die Elementbreite so gestreckt wird, dass sie die gesamte verbleibende Breite der aktuellen Zeile einnimmt.

5. align-items-Eigenschaft

Nehmen wir eine kleine Änderung vor und fügen ein Bild in die Schaltfläche ein.

<Formularaktion="">
  <input type="email" placeholder="Geben Sie Ihre E-Mail-Adresse ein">
  <button type="button"><svg> <!-- ein Smiley-Symbol --> </svg></button>
</form>

Nachdem der Button in das Bild eingefügt wurde, änderte sich seine Höhe und wurde größer. Zu dieser Zeit geschah etwas ganz Wunderbares.

Im Bild oben wird die Schaltfläche höher und das Eingabefeld erhält automatisch die gleiche Höhe!

Wie bereits erwähnt, ändert das elastische Layout standardmäßig nicht die Breite des Elements, aber standardmäßig ändert es die Höhe des Elements. Wenn für ein Element keine explizite Höhe angegeben ist, nimmt es die gesamte Höhe des Containers ein. In diesem Beispiel wird die Schaltfläche höher, wodurch auch das Formularelement höher wird und das Eingabefeld automatisch in der Höhe gestreckt wird.

align-items kann dieses Verhalten ändern.

Eingabe {
  Flex-Wachstum: 1;
  selbst ausrichten: zentrieren;
}

align-items kann vier Werte annehmen.

• Flex-Start: Oberkante ausgerichtet, Höhe nicht gestreckt
• Flex-Ende: Unterkante ausgerichtet, Höhe ungestreckt
• center: zentriert, Höhe nicht gestreckt
• Stretch: Standardwert, Höhe wird automatisch gestreckt

Wenn viele Elemente vorhanden sind, ist es mühsam, align-self einzeln festzulegen. Zu diesem Zeitpunkt können Sie align-items für das Containerelement (in diesem Fall das Formular) festlegen. Ihr Wert wird dann von align-self aller untergeordneten Elemente übernommen.

bilden {
Anzeige: Flex;
Elemente ausrichten: zentrieren;
}

Im obigen Code ist es nach dem Festlegen von align-items für das <form> -Element nicht erforderlich, align-self für das Steuerelement festzulegen, es sei denn, Sie möchten, dass die beiden Werte unterschiedlich sind.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.