?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**:

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!