CSS-Layouts: Flexbox vs G | R | Ich | D

Was ist der beste Weg, um das Design-Layout im Web an Ihre Bedürfnisse anzupassen? Es gibt viele Möglichkeiten, dieses Problem zu lösen, aber zwei der beliebtesten modernen Methoden sind die Verwendung von Flexbox und Grid. Beide Layout-Systeme, die vor ca. 7 Jahren in CSS vorgeschlagen und implementiert wurden, bieten dem Designer viele leistungsstarke und anpassungsfähige Tools, mit denen er arbeiten kann.

FLEXBOX

Flexbox ist ein großartiges Layout-Tool, wenn Sie einen Container mit einer unbekannten Anzahl von Artikeln oder Artikeln mit unbekannten Abmessungen füllen. Ein flexibler Container kann die Größe seiner Artikelabmessungen ändern, um besser zu passen, und kann bei gegebener Anzahl von Artikeln auch erweitert oder verkleinert werden. Durch das Festlegen von Flex-Wrap können Flexbox-Layouts nach Erreichen des Endes des übergeordneten Containers mehrere Zeilen einnehmen. Es ist jedoch "eindimensional", da Elemente nur horizontal oder vertikal gebogen werden können.

humorvoller flex doge

FLEX-EIGENSCHAFTEN

Anzeige

Anzeige einstellen: Flex auf einem übergeordneten Element wird als Flex-Box eingerichtet.

Flex-Richtung

Gibt an, ob die flexible Anordnung horizontal oder vertikal ist.

Flex-Wrap

Ermöglicht einem flexiblen Container, neue Linien zu erstellen, nachdem Elemente das Ende des Containers erreicht haben.

Inhalt rechtfertigen

Legt die Verteilung der untergeordneten Elemente in der Flexbox entlang der Hauptachse fest.

Elemente ausrichten

Legt fest, wie untergeordnete Elemente senkrecht zur Hauptachse angezeigt werden.

Align-Content

Füllt den leeren Platz des übergeordneten Containers senkrecht zur Hauptachse oder dehnt die zu füllenden untergeordneten Elemente aus.

selbst ausrichten

Ähnlich wie align-items, jedoch zum Stylen eines einzelnen untergeordneten Elements.

Beispiele

verschachtelte Flexboxen

GITTER

Flexbox ist großartig, hilft uns aber nur, wenn wir eine horizontale und vertikale Struktur benötigen. Grid hilft uns, dieses Problem zu lösen. Bei Verwendung von grid kann ein übergeordneter Container mit Zeilen und Spalten eingerichtet werden. Sie können die Anzahl der Zeilen / Spalten sowie deren Abmessungen und optional Namen festlegen.

Wenn Sie Ihr Container-Raster mit untergeordneten Elementen füllen, können Sie die Position des Layouts ganz einfach festlegen, indem Sie die Start- und Endpunkte der Rasterspalten und -reihen festlegen. Die Grenzen können durch die Gitterliniennummer oder den zugewiesenen Namen ausgewählt werden.

über https://www.reddit.com/user/Gordone_Uomolibero

GRID-EIGENSCHAFTEN

Anzeige

Wenn Sie die Anzeige eines übergeordneten Elements auf Raster einstellen, wird das Rasterlayout verwendet. Inline-Grids oder Subgrids können ebenfalls verwendet werden.

Gitter-Vorlage

Das Setzen von Gittervorlagen-Spalten oder Gittervorlagen-Zeilen bestimmt die Anzahl der Spalten / Zeilen und deren Größe. Pixelwerte, Prozentsätze oder Brüche (des Containerraums) oder "auto" können verwendet werden, um die Breite oder Höhe festzulegen.

Mit Auto kann auch eine unbestimmte Anzahl von Spalten / Zeilen festgelegt werden.

grid-auto

Mit diesem Parameter können Sie die Größe der automatisch generierten Spalten oder Zeilen festlegen.

Raster-Auto-Flow

Legt fest, wie untergeordnete Elemente Zeilen oder Spalten automatisch füllen, wenn nichts anderes angegeben ist.

Grid-Area & Grid-Template-Area

Gitterbereich kann zur Benennung von Gitterbereichen und Gittervorlagenbereich zur Festlegung des Layout-Stils unter Bezugnahme auf die Gitterbereiche nach Namen verwendet werden.

rechtfertigen gegen ausrichten: Elemente, Inhalt und Selbst

Eigenschaften zum Ausrichten und Ausrichten können so festgelegt werden, dass Elemente horizontal bzw. vertikal formatiert werden. Wenn Sie diese Eigenschaften für das übergeordnete Element festlegen, füllt "justify / align-content" den nicht verwendeten Containerraum um die Rasterspalten / -reihen herum aus oder streckt sie, um den Container zu füllen. Das Setzen von Ausrichtungs- / Ausrichtungselementen bestimmt, wie jedes untergeordnete Element innerhalb des zugewiesenen Rasterraums positioniert wird.

Das Ausrichten und Ausrichten kann auch für untergeordnete Elemente verwendet werden, ähnlich wie das Festlegen des Stils für die Elemente des übergeordneten Elements. Durch Festlegen von "justify-self" oder "align-self" wird dieses einzelne untergeordnete Element innerhalb des zugewiesenen Rasterraums positioniert.

Beispiele

Beispiel für eine Gittervorlage und ein untergeordnetes Element

ZUSÄTZLICHE LESUNG