So verwenden Sie Flex zum Ausrichten von HTML-Elementen

Mit den Flex-Eigenschaften in CSS können Sie Elemente flexibler und reaktionsschneller ausrichten. Dies macht es nützlich, wenn Sie möchten, dass Ihre HTML-Elemente im Webbrowser besser reagieren.

In diesem Artikel wird erläutert, wie Sie bestimmte Flex-Eigenschaften verwenden können. Dazu gehören die Eigenschaften „flex-direction“, „justify-content“, „align-self“, „align-items“, „align-content“ und „gap“.

So richten Sie CSS Flex Display ein

Eine Beispielstruktur, die Sie zum Erkunden verwenden können die Grundlagen der Flexbox ist eine Reihe von untergeordneten Divs unter einem einzelnen übergeordneten Div. Im folgenden Code gibt es ein Haupt-"Eltern"-Div. Die drei untergeordneten Divs stellen Elemente dar, die Sie mithilfe von Flex-Eigenschaften ausrichten können.

Damit jedes Flex-Styling funktioniert, müssen Sie die hinzufügen Anzeige: flex -Eigenschaft an den übergeordneten Flex-Container.

.parent {
 Anzeige: Flex;
}

Ohne Flex werden die untergeordneten Divs nacheinander in einer Spaltenformation auf der Seite angezeigt.

Um ein Beispiel für dieses Setup anzuzeigen, sehen Sie sich den Code in diesem an und führen Sie ihn aus CodePen-Schnipsel.

So steuern Sie die Layoutrichtung

Das Flex-Richtung -Eigenschaft bestimmt die Zeilen- oder Spaltenrichtung der untergeordneten Elemente.

Zu den Optionen für die Eigenschaft flex-direction gehören:

Biegerichtung: Reihe | Spalte | Zeilenumkehrung | Spaltenrückseite

Sie müssen einen übergeordneten Container hinzufügen, der die Elemente umgibt, die Sie ausrichten möchten.

HTML:

CSS:

.red { Hintergrundfarbe: rot; }
.orange { Hintergrundfarbe: orange; }
.yellow { Hintergrundfarbe: gelb; }
.green { Hintergrundfarbe: grün;}
.blue { Hintergrundfarbe: blau; }
.lila { Hintergrundfarbe: lila; }
.parent div {
 Breite: 40px;
 Höhe: 40px;
}

Wenden Sie die Flex-Direction-Eigenschaft auf den übergeordneten Flex-Container an. Dadurch werden die untergeordneten div-Elemente ausgerichtet.

.parent {
 Breite: 300px;
 Anzeige: Flex; 
 Biegerichtung: Reihe;
}

Viele Biegeeigenschaften beziehen sich auf das Konzept der Hauptachse und der Querachse. Wenn Flex-Richtung ist Reihestellt die Hauptachse die horizontale Richtung und die Querachse die vertikale dar. Ein Spaltenwert schaltet diese Achsen um.

Sehen Sie sich den Code für die Flex-Direction-Eigenschaft in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

So richten Sie Elemente entlang der Querachse aus

Das Ausrichtungselemente -Eigenschaft steuert die Ausrichtung von Elementen entlang der Querachse. Für die standardmäßige Flex-Richtung steuert row, align-items die vertikale Ausrichtung der Elemente.

Zu den Optionen für die Eigenschaft align-items gehören:

Ausrichtungselemente: flex-start | Flex-Ende | Ausrichtungselemente | strecken

Fügen Sie dem übergeordneten Container die Eigenschaft align-items hinzu, um seine untergeordneten Container auszurichten.

.parent {
 Anzeige: Flex; 
 Ausrichtungselemente: Flex-Start;
}

Darüber hinaus können Sie die Elemente anhand einer Grundlinie ausrichten. Standardmäßig richtet die Baseline-Option alle Elemente basierend auf der Basis der Elemente aus.

Sie können auch auswählen, wo die Grundlinie beginnt, z. B. oben (erste Grundlinie) oder unten (letzte Grundlinie).

Ausrichtungselemente: Grundlinie | erste Grundlinie | letzte Grundlinie;

Für Align-Items: Baseline um zu funktionieren, stellen Sie sicher, dass jedes Item eine andere Höhe oder Breite hat (abhängig von der Achse, die Sie verwenden).

​​​

Sehen Sie sich den Code für die Eigenschaft align-items in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

So überschreiben Sie die Ausrichtung einzelner Elemente

Du kannst den... benutzen sich selbst ausrichten -Eigenschaft, um alle Ausrichtungselemente des übergeordneten Containers zu überschreiben. Das bedeutet, dass Sie für ein einzelnes Element eine separate Flex-Ausrichtung festlegen können.

Zu den Optionen für die Eigenschaft align-self gehören:

sich selbst ausrichten: auto | Flexstart | Flex-Ende | Mitte | Grundlinie | strecken

Nehmen wir zum Beispiel an, dass der übergeordnete Container ein Flex-Direction-Styling hat, das auf "row" eingestellt ist.

.parent {
 Anzeige: Flex; 
 Biegerichtung: Reihe;
}

Sie können die Eigenschaft align-self auf das einzelne Element anwenden. Das einzelne Element verwendet den Stil der Eigenschaft align-self und zentriert das Element über dem übergeordneten Container.

Sehen Sie sich den Code für die Eigenschaft align-self in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

So verteilen Sie Linien über die Querachse

Das Inhalt ausrichten -Eigenschaft richtet untergeordnete Elemente entlang der vertikalen Achse aus. Es kann auch den Abstand zwischen Elementen bestimmen, die sich in mehreren Zeilen befinden.

Zu den Optionen für die Eigenschaft align-content gehören:

Inhalt ausrichten: flex-start | Flex-Ende | Mitte | dehnen | Zwischenraum | Raum herum

Fügen Sie dem übergeordneten Flex-Container die Eigenschaft align-content hinzu. Die Eigenschaft align-content funktioniert nur, wenn die Eigenschaft flex-wrap gesetzt ist. Fügen Sie Flex-Wrap hinzu: Umbrechen Sie den übergeordneten Container und reduzieren Sie die Breite des übergeordneten Div, um die Elemente auf mehr als eine Zeile zu zwingen.

.parent {
 Flex-Wrap: Wrap;
 Anzeige: Flex;
 Ausrichtungsinhalt: Flex-Start;
 Breite: 180px;
}

Sehen Sie sich den Code für die Eigenschaft align-content in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

So richten Sie Elemente auf der Hauptachse aus

Das rechtfertigen-Inhalt -Eigenschaft fügt den untergeordneten Elementen eine rechte, linke oder zentrierte Ausrichtung hinzu. Außerdem werden die Elemente verteilt, indem Leerzeichen zwischen ihnen hinzugefügt werden, wenn der Inhalt ausgerichtet wird.

Zu den Optionen für die justify-content-Eigenschaft gehören:

justify-content: flex-start | Flex-Ende | Mitte | Zwischenraum | Raum herum | raumgleich

Wickeln Sie die Elemente, die Sie ausrichten möchten, unter einen übergeordneten Flex-Container.

HTML:

CSS:

.red { Hintergrundfarbe: rot; }
.green { Hintergrundfarbe: hellgrün; }
.blue { Hintergrundfarbe: blau; }

Fügen Sie dem übergeordneten Flex-Container die Eigenschaft justify-content hinzu.

.parent {
 Breite: 300px;
 Anzeige: Flex; 
 justify-content: flex-start;
}

Die justify-content-Eigenschaft unterstützt auch Werte, die in der CSS-Box-Alignment-Spezifikation aufgeführt sind. Dazu gehören Werte wie „Start“, „Ende“, „Links“ und „Rechts“. Einige Browser unterstützen diese nicht.

Die justify-content-Eigenschaft hat auch ein „sicheres“ Schlüsselwort, das Sie verwenden können. Dadurch wird sichergestellt, dass die Elemente versuchen, innerhalb der Reichweite des übergeordneten Containers zu bleiben.

Es wird auch verwendet, um Datenverlust zu verhindern, falls Sie ein langes Wort zentrieren. Die Verwendung des Schlüsselworts safe verhindert, dass ein kürzeres div den ersten und letzten Buchstaben abschneidet.

.parent {
 Anzeige: Flex; 
 justify-content: sicheres Zentrum;
}

Auch das Schlüsselwort safe ist auf bestimmte Browser beschränkt. Sie können die Kompatibilität unter überprüfen Kann ich benutzen.

Sehen Sie sich den Code für die justify-content-Eigenschaft in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

So fügen Sie Abstände zwischen Elementen hinzu

Das Lücke -Eigenschaft können Sie einen Abstand zwischen Elementen hinzufügen. Es ist eines der neuere CSS-Funktionen, mit denen Sie ein ansprechendes Layout erstellen können.

Wenden Sie die Gap-Eigenschaft auf den übergeordneten Flex-Container an.

.parent {
 Anzeige: Flex;
 Abstand: 70px;
}

Wenn Sie eine Lücke hinzufügen, die die Länge der Elemente dazu zwingt, die Breite des übergeordneten Elements zu überschreiten, werden die Elemente verkleinert, um zu versuchen, in die Reihe zu passen.

.parent { 
 Breite: 300px;
 Abstand: 120px;
}

Wenn Sie flex-wrap: wrap verwenden, um die Elemente in eine neue Zeile zu verschieben, gilt der Abstandsbetrag auch für den Abstand zwischen den Zeilen.

.parent { 
 Breite: 300px;
 Flex-Wrap: Wrap;
 Abstand: 120px;
}

Darüber hinaus können Sie auch die festlegen Zeilenabstand und Spaltenlücke Eigenschaften. Auch hier müssen Sie diese auf den übergeordneten Flex-Container anwenden.

Die Row-Gap-Eigenschaft bestimmt den Abstand zwischen den einzelnen Zeilen. Die Eigenschaft column-gap bestimmt den Abstand zwischen den einzelnen Spalten.

.parent { 
 Zeilenabstand: 120px; 
}
.parent { 
 Spaltenabstand: 120px; 
}

Sehen Sie sich den Code für die Gap-Eigenschaft in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

Verwendung weiterer Flex-Eigenschaften auf Ihrer Website

Hoffentlich sind Sie jetzt mit den verschiedenen Flex-Eigenschaften vertraut, die Sie verwenden können, um Elemente auf Ihrer Webseite auszurichten. Dazu gehört, wie Sie die Eigenschaften „flex-direction“, „justify-content“, „align-self“, „align-items“, „align-content“ und „gap“ verwenden können.

Flexbox ist eine leistungsstarke Layouttechnik, aber nur ein kleiner Teil von CSS. Sie können sich auch über neue CSS-Eigenschaften, saubere Codierungstechniken und Tools für die CSS-Optimierung informieren.

11 nützliche Tools zum Überprüfen, Bereinigen und Optimieren von CSS-Dateien

Lesen Sie weiter

Über den Autor