Was ist Flexbox in CSS??

Wenn Sie eine reaktionsschnelle Website entwerfen, möchten Sie, dass Ihre Elemente ihr Verhalten wie Breite, Höhe, Auflösung, Orientierung usw. gemäß der Art des Geräts über die Website ändern. In diesem Beitrag wird erläutert, wie Sie Ihre Elemente mit dem FlexBox -Layout reagieren können. Die zu diskutierten Themen sind wie folgt.

1. Was ist Flexbox
2. Hintergrund
3. Flexbox -Komponenten
4. Flexbox -Achse
5. Flexbox -Eigenschaften

Was ist Flexbox

CSS Flexbox ist ein Layoutmodell, das eine effiziente und dynamische Anordnung von Elementen ermöglicht. Dieses Layout ist eindimensional und ermöglicht die Platzierung von Elementen in einem Behälter mit gleichem verteilten Raum.

In diesem Layout reagieren Elemente, was bedeutet, dass die Elemente ihr Verhalten entsprechend der Art von Gerät ändern, die sie anzeigen. Es macht Elemente flexibel und bietet ihnen eine angemessene Position und Symmetrie.

Flexbox wurde in CSS Version 3 eingeführt, um Elemente in einem Container effizienter und dynamischer zu ordnen. Vor Flexbox gab es zunächst vier Layout -Methoden, die wir unten aufgeführt haben.

1. Block
   Zum Erstellen von Abschnitten auf einer Webseite wird das Blocklayout verwendet.
2. Im Einklang
   Es ist eine Layoutmethode, die für Text verwendet wird.
3. Tisch
   Dies wird für eine Tabelle mit zweidimensionalen Daten verwendet.
4. Positioniert
   Dies wird für eine bestimmte Position eines Elements verwendet.

Jetzt werden wir verschiedene Komponenten einer Flexbox diskutieren.

Flexbox -Komponenten

Eine Flexbox besteht aus zwei Komponenten, die wir unten erklärt haben.

1. Flex-Container
   Diese Komponente einer Flexbox definiert die Eigenschaften des Vorfahrelements, indem er seine Anzeige auf Flex oder Inline-Flex einstellt.
2. Flex-Items
   Es beschreibt die Eigenschaften der Nachfolgerelemente. Darüber hinaus können in einem Flexcontainer zahlreiche Elemente vorhanden sein.

Hier ist eine visuelle Darstellung einer Flexbox.

Flexbox -Achse

Beim Umgang mit dem Flexbox -Layout gibt es zwei Achsen, die gepflegt werden sollten. Diese Achsen wurden unten aufgeführt.

1. Hauptachse
2. Kreuzachse

Beide Achsen werden nachstehend ausführlich erläutert.

Hauptachse

Die Hauptachse (von links nach rechts) wird von der festgelegt Flex-Richtung Eigentum. Diese Achse kann vier Werte rendern, die sind; Zeilen, Zeilenumnutzung, Säule und Spaltenumwalme.

Im Fall der ersten beiden Werte, die sind Reihe, Und Reihenresver, Die Flexbox zeigt eine Inline -Richtung, was bedeutet, dass der Flex -Behälter und die Elemente horizontal ausgerichtet werden. Wohingegen für die Spalte, Und Säulenrahlung Werte die Richtung der Flexbox blockiert oder in einfacheren Worten werden der Behälter und die Elemente vertikal angeordnet.

Kreuzachse

Die Richtung dieser Achse ist senkrecht zur Hauptachse. Wenn die Richtung der Hauptachse an eingestellt wird Reihe oder Reihenresver Dann bewegt sich die Kreuzachse entlang der Säulen nach unten, während sich im Fall der Säule die Achse entlang der Zeilen bewegt.

Beide Achsen haben einen Start, einen Endpunkt und eine bestimmte Länge zwischen diesen Punkten.

Flexbox -Eigenschaften

Die Eigenschaften einer Flexbox wurden unten bereitgestellt.

1. Anzeige
Es zeigt ein Element als Flexbox an.

2. Flex-Richtung
Diese Eigenschaft definiert die Richtung der Elemente in einem Flex -Behälter.

3. Rechtfertigungsbekämpfung
Wenn die Elemente in einer Flexbox den horizontalen Raum nicht vollständig verbrauchen, richtet diese Eigenschaft sie über die Hauptachse aus.

4. Ausrichtung
Wenn die Elemente in einer Flexbox den vertikalen Raum nicht vollständig verbrauchen.

5. Flex-Wrap
Wenn auf einer einzelnen Flex -Linie nicht viel Platz gibt, entscheidet diese Eigenschaft, ob Elemente einwickelt werden sollen oder nicht.

6. Ausrichtung
Es verändert das Verhalten der Eigenschaft Flex-Wrap.

7. Flex-Fluss
Eine Kurzeigeneignis für Flex-Richtung und Flex-Wrap.

8. Befehl
Es definiert die Reihenfolge eines Flexelements im Vergleich zu anderen in einer Flexbox vorhandenen Elementen.

9. selbst ausrichten
Diese Eigenschaft überschreibt die Eigenschaft aus Align-items und wird für Flexelemente verwendet.

10. biegen
Es gibt die Länge der Flexelemente in Bezug auf andere in einer Flexbox vorhandene Elemente an.

Lassen Sie uns ein Beispiel sehen.

Beispiel
Im Folgenden haben wir Ihnen ein Beispiel dafür gezeigt, wie Sie eine Flexbox erstellen können.

Html

Artikel
Artikel
Artikel<
Artikel

Hier haben wir einen Div -Container mit der Klasse „Flexbox“ erstellt und vier weitere Div -Container darin verschieben.

CSS

.Flexbox
Anzeige: Flex;
Hintergrundfarbe: Aquamarin;

Zuerst verweisen wir dem Haupt -Div -Container ein Flex -Display, um es zu einer Flexbox zu machen, und dann geben wir ihm eine Hintergrundfarbe.

CSS

.flexbox div
Hintergrundfarbe: Lightgrey;
Rand: 15px;
Polsterung: 20px;
Schriftgröße: 35px;

Schließlich stylen wir die in der Flexbox vorhandenen Flex -Elemente mit verschiedenen CSS -Eigenschaften.

Ausgang

Eine Flexbox wurde erfolgreich erzeugt.

Abschluss

Eine Flexbox ist ein Layoutmodell, das Elemente effizient und dynamisch arrangiert und gleichzeitig gleich verteilte Räume in einem Container verleiht. In diesem Layout reagieren Elemente, was bedeutet, dass die Elemente ihr Verhalten entsprechend der Art von Gerät ändern, die sie anzeigen. Es besteht aus einem Flexbehälter und Gegenständen, die als seine Komponenten angesehen werden. Darüber hinaus hat es Achsen, die Haupt- und Kreuzungen sind und mehrere Eigenschaften aufweist. Dieses Schreiben deckt alle erforderlichen Details zu einer Flexbox zusammen mit einem geeigneten Beispiel ab.