CSS Flexbox verstehen: Ein Leitfaden für Anfänger!!!

?INHALTSVERZEICHNIS

1. Einführung in CSS Flexbox
2. Wesentliche Eigenschaften
3. Erweiterte Eigenschaften
4. Abschluss

---

?️ Einführung in CSS Flexbox

CSS Flexbox ist die ultimative Lösung für alle Ihre Layoutprobleme. In diesem Artikel konzentrieren wir uns ausschließlich auf die Beherrschung von Flexbox, die Erkundung seiner Eigenschaften und wie Sie damit mühelos beeindruckende, ansprechende Designs erstellen können. Lassen Sie uns eintauchen und diese Layouts nahtlos gestalten.

Das flexible Box-Layout oder Flexbox ist eine eindimensionale Layoutmethode, die Elemente entlang einer einzelnen Achse, entweder einer Zeile oder einer Spalte, anordnet. Wenn Sie wie ich visuell lernen, hat das wahrscheinlich nicht viel Sinn gemacht, also lassen Sie mich Ihnen ein Bild malen -

Stellen Sie sich vor, Sie haben eine Kiste voller Lieblingssachen, es könnten Bücher oder Ihre Lieblingssnacks sein, was auch immer Ihnen in den Sinn kommt, aber da herrscht völliges Chaos. Flexbox ist wie ein magischer Organizer mit einer Prise Zwangsstörung, die hereinbricht, um den Tag zu retten. Es ordnet alles übersichtlich in Zeilen und Spalten an, die genau Ihren Anforderungen entsprechen.

Egal, ob Sie Ihre Artikel gleichmäßig verteilt, auf einer Seite gruppiert oder perfekt zentriert haben möchten, Flexbox ist die Lösung Ihrer Wahl. Nachdem wir nun wissen, dass Flexbox der Organisator von OCD ist, werfen wir einen Blick auf die Tools, die es verwendet, um die Magie wahr werden zu lassen! Hier sind die wesentlichen Eigenschaften:

** Wesentliche Eigenschaften **

1. display: flex: Hier beginnt alles! Wenn Sie diese Eigenschaft zu einem Behälter (einer mit Ihren Lieblingssnacks gefüllten Schachtel) hinzufügen, werden alle Ihre Snacks (untergeordnete Elemente) standardmäßig ordentlich entlang einer einzigen Achse, einer Reihe, ausgerichtet. Aber keine Sorge, Sie können zu einer Spalte wechseln, wenn Sie möchten!“

Hinweis: Um mit den CodePen-Beispielen zu interagieren, klicken Sie auf den Text „Auf CodePen bearbeiten“ in der oberen rechten Ecke der Abbildung. Dadurch können Sie live mit dem Code herumspielen!

Experimentieren Sie mit Werten auf CodePen:

2. Flex-Richtung: Dies legt fest, in welche Richtung Ihre Snacks ausgerichtet werden. Denken Sie daran, dass die Snacks standardmäßig in einer Reihe angeordnet sind, aber die Flex-Richtung gibt Ihnen die Macht, dies zu ändern. Hier sind die Werte:

a. row(default):Deine Snacks werden in einer ordentlichen Reihe von links nach rechts aufgereiht.

b. Reihenumkehr: Die Gegenstände spiegeln ihre Richtung und richten sich von rechts nach links, perfekt, wenn Sie sich ein wenig rebellisch fühlen!

c. Spalte: Ihre Artikel können vertikal gestapelt werden, genau wie in einem Snack-Turm! Stellen Sie sich vor, dass jeder Snack (oder flexible Artikel) übereinander gelegt wird und so einen köstlichen Snackturm bildet.

d. Column-Reverse: Der Stapel beginnt von unten und baut sich auf.

Hier ist eine Illustration. Sie können die Werte für die Biegerichtung gerne ändern, damit Sie sehen können, wie sie funktionieren.

3. Justify-content: Dies ist der Zauberstab des Flex-Behälters, mit dem er den Platz zwischen den Snacks verteilt. Es entscheidet gewissermaßen darüber, wie die Snacks in der Snackbox angeordnet werden. Hier sind die wichtigsten Optionen:

a. Flex-Start (Standard): Alle Snacks werden am Anfang der Zeile oder Spalte gesammelt.

b. Flex-End:Alle Snacks werden am Ende der Zeile oder Spalte gesammelt.

c. Mitte:Snacks sammeln sich in der Mitte der Zeile oder Spalte.

d. space-between: Der erste Snack wird an den Anfang geschoben, der letzte Snack wird ans Ende geschoben und der Rest wird gleichmäßig dazwischen verteilt.

e. space-around:Die Snacks bekommen um sich herum den gleichen Platz.

f. Platzgleichmäßig:Snacks genießen rundherum den vollkommen gleichen Platz.

Hier ist eine Illustration. Sie können die Werte für „justify-content“ gerne ändern, damit Sie sehen können, wie sie funktionieren.

4. Align-items: Wir haben unsere Snacks bereits mithilfe der Flex-Richtung in einer Reihe oder Spalte angeordnet. Jetzt ist es an der Zeit zu entscheiden, wie hoch oder wie niedrig sie im Snackbehälter platziert werden sollen. Hier sind die allgemeinen Werte:

a. Flex-Start: Richtet Elemente am Anfang der Querachse aus.

b. Flex-End: Richtet Elemente am Ende der Querachse aus.

c. zentrieren: Zentriert Elemente entlang der Querachse.

d. stretch: Dehnt Elemente, um den Container zu füllen (Standard für Elemente auf Blockebene).

e. Grundlinie: Richtet Elemente entlang ihrer Textgrundlinie aus.

Sehen wir uns Align-Items in Aktion an.

Erkunden Sie den Codestift unten, um die Magie in Aktion zu erleben! Fühlen Sie sich frei, das CSS zu optimieren, um zu sehen, wie es die Ausrichtung ändert.

** Erweiterte Eigenschaften **

1. Align-content: Die Eigenschaft align-content gibt an, wie mehrere Reihen von Flex-Artikeln (oder Snacks in unserer Analogie) entlang der Querachse innerhalb des Flex-Containers (Snack-Containers) beabstandet sind. Es kommt nur ins Spiel, wenn mehrere Zeilen oder Spalten mit Flex-Elementen vorhanden sind, was bedeutet, dass Ihr Flex-Container über verpackten Inhalt verfügen muss (Flex-Wrap: Wrap).

Werte des Align-Inhalts

a. Flex-Start: Alle Snackreihen werden oben im Snackbehälter gesammelt, sodass sich der Rest des Behälters eher leer anfühlt.

b. flexibles Ende: Reihen von Snacks werden am Boden des Snackbehälters gesammelt, wodurch oben freier Raum bleibt (einsamer oben).

c. Mitte: Reihen von Snacks werden in der Mitte gesammelt, so dass oben und unten in unserem Snackbehälter freier Raum bleibt.

d. Abstand dazwischen: Die Snackreihen sind gleichmäßig verteilt, wobei die erste Reihe oben und die letzte Reihe unten liegt.

e. space-around: Zeilen sind mit gleichen Abständen zwischen den Zeilen beabstandet.

f. space-evenly: Zeilen haben den gleichen Abstand zwischen ihnen.

g. dehnen (Standard): Unsere Snacks „dehnen“ sich, um die Höhe des Snackbehälters auszufüllen.

Genug der Worte, lasst uns flexibel in die Tat umsetzen (sehen Sie, was ich dort gemacht habe? Niemand? Okay?‍♀️).

Sie können den Wert „align-content“ durch „flex-start“, „flex-end“, „center“, „space-between“, „space-around“, „space-evenly“ oder „stretch“ ersetzen, um die Änderungen zu beobachten.

Schauen Sie sich diesen CodePen für eine interaktive Illustration an!

? Align-items vs. Align-content: Was ist der Unterschied?
Obwohl sie ähnlich klingen, sind align-items und align-content nicht dasselbe. Lassen Sie uns den Unterschied klären:

align-items richtet einzelne Flex-Elemente entlang der Querachse aus. Stellen Sie sich das so vor, als würden Sie die Ausrichtung für die Elemente selbst innerhalb einer einzelnen Zeile/Spalte festlegen.

align-content richtet mehrere Reihen von Elementen (wenn das Umwickeln aktiv ist, d. h. Flex-Wrap: Wrap) entlang der Querachse des Flex-Containers aus.

? Schlüssel zum Mitnehmen:
align-items behandelt alle Elemente innerhalb eines einzelnen Flex-Containers, während align-content mehrere Zeilen von Elementen verarbeitet (nur wenn mehrere umschlossene Zeilen vorhanden sind).

** Denken Sie daran**:

Property	Focus Area	When to use
Align-items	Align individual items	When you are adjusting the vertical alignment of single items
Align-content	Align rows of items	When flex-wrap: wrap is used (and there are multiple rows)

2. Flex-Wrap: Diese Eigenschaft entscheidet, ob Ihre Flex-Artikel (auch bekannt als Ihre Lieblingssnacks) alle in eine Zeile/Spalte gequetscht oder höflich in mehrere Zeilen/Spalten umgebrochen werden sollen, wenn ihnen der Platz ausgeht.

Hier sind die Werte:

a. nowrap(default): Ihre Snacks entscheiden, dass sie keine Atempause wollen und bleiben einfach eng in einer Reihe/Spalte.

b. Wrap: Jetzt wollen sie Luft zum Atmen, also überlaufen sie auf die nächste Zeile oder Spalte, wenn in der ersten Zeile/Spalte kein Platz mehr ist.

c .wrap-reverse: So ziemlich das Gleiche wie „wrap“, aber sie machen es in umgekehrter Reihenfolge. Von unten nach oben oder von rechts nach links, je nach Biegerichtung.

Hier ist ein CodePen, der das Verhalten der Flex-Wrap-Eigenschaft demonstriert. Sie können mit den verschiedenen Werten (nowrap, wrap und wrap-reverse) experimentieren, um zu sehen, wie der flexible Behälter mit dem Überlaufen von Snacks umgeht.

3. Flex: Dies ist eine entscheidende Eigenschaft, die festlegt, wie ein flexibler Artikel (unser Snack) wächst oder schrumpft, um in den verfügbaren Platz in seinem flexiblen Behälter zu passen. Es ist eine Abkürzung für drei Untereigenschaften:

a. Flex-Grow: Bestimmt, um wie viel ein Flex-Item wächst.

b. Flex-Shrink: Bestimmt, um wie viel ein Flex-Item schrumpft, wenn der Platz knapp ist.

c. Flex-Basis: Bestimmt die Anfangsgröße, bevor Elemente zu wachsen oder zu schrumpfen beginnen.

Hier ist ein CodePen, der die Flex-Eigenschaft und ihre Komponenten demonstriert

Fühlen Sie sich frei, es zu öffnen und damit zu interagieren, um zu sehen, wie sich durch die Anpassung der Flex-Werte das Layout der Elemente ändert.

4. Align-self: Diese Eigenschaft überschreibt den Align-Items-Wert des Flex-Containers. Es richtet das Objekt grundsätzlich auf der Querachse aus. Hier sind die Werte:

a. auto (Standard): Erbt die Ausrichtung von der align-items-Eigenschaft des Containers.

b. Flex-Start: Richtet das Element am Anfang der Querachse aus.

c. Flex-End: Richtet das Element am Ende der Querachse aus.

d. zentrieren: Zentriert das Element entlang der Querachse.

e. stretch: Dehnt das Element, um die Querachse auszufüllen (sofern es keine feste Größe hat).

f. Grundlinie: Richtet das Element entlang seiner Textgrundlinie aus.

Schauen Sie sich diesen CodePen für eine interaktive Illustration an!

? Fazit
CSS Flexbox vereinfacht die Art und Weise, wie wir Layouts angehen. Mit ein paar Schlüsseleigenschaften wie display: flex, flex-direction, justify-content und align-items können Sie ganz einfach responsive und schön ausgerichtete Designs erstellen.

? Möchten Sie tiefer eintauchen? Hier sind einige fantastische Ressourcen:

1. CSS-Tricks: Eine vollständige Anleitung zu Flexbox

Eine detaillierte Anleitung, die alle Flexbox-Eigenschaften und Anwendungsfälle abdeckt.

1. MDN Web Docs – CSS Flexbox

Offizielle Dokumentation mit Erklärungen, Beispielen und Browserkompatibilität.

Der Schlüssel zum Beherrschen einer Sache ist konsequentes Üben. Üben Sie also so viel wie möglich, um Ihr Verständnis zu festigen. Je mehr Sie mit diesen Tools spielen, desto sicherer werden Sie, dass Sie schöne Layouts erstellen können.

Bis zum nächsten Mal, Ihr freundlicher Nachbarschaftsautor (ja, in meinem Kopf ergibt das Sinn). ? Tschüss!!!

Das obige ist der detaillierte Inhalt vonCSS Flexbox verstehen: Ein Leitfaden für Anfänger!!!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!