CSS Flexbox Demystifiziert

1. Einführung: Hallo und willkommen in meinem Kurs. Mein Name ist Dan Burgess und ich bin Unternehmer und Webentwickler aus Spanien, live in New York City. Ich entwickle seit fast zehn Jahren Webanwendungen. Flexbox ist ein CSS-Layoutmodell, in dem Elemente innerhalb eines Containers automatisch reaktionsschnell angeordnet werden . In dieser Klasse werden wir die wichtigsten Flexbox-Rollen durchgehen . Und dies gibt Ihnen ein umfassendes Verständnis für Funktionsweise des Tools. Am Ende des Kurses sollten Sie in der Lage sein, Flexbox zu verstehen und einen Flex-Container in Ihre eigene Website aufzunehmen. Die Klasse richtet sich an Leute, die etwas Erfahrung mit HTML und CSS haben , Flex-Container aber nicht vollständig verstehen. Lasst uns anfangen. 2. SET-UP: Okay, also verwende ich Visual Studio Code als meinen Editor. Sie können es auf der Visual Studio Code-Website herunterladen. Es ist kostenlos und plattformübergreifend. Es funktioniert in allen Betriebssystemen. Also habe ich zwei Dateien erstellt. Ich habe einen von ihnen index.html und den anderen, style.css genannt . Und sie befinden sich im selben Ordner. Ich habe beide geöffnet und sie sind gerade leer. Also werde ich hier mein HTML-Boilerplate erstellen , das mit Visual Studio Code, dem Typ Ausrufezeichen, ziemlich einfach ist. Und es gibt uns hier auf der oberen BAC darauf, dass, wenn wir darauf klicken, die Boilerplate erstellen wird. Ich hebe es auf. Ich lasse meine Datei style.css vorerst leer. Und ich schreibe hier etwas , nur um es zu testen. Und ich öffne das. In meinem Fall mit Live Server, Live-Server, ist es eine Erweiterung für Visual Studio Code. Ich habe es hier und schon installiert. Und wir müssen nur mit der rechten Maustaste auf die Datei klicken und auf Mit Live-Server öffnen klicken. Es ist also ein Stern dann k. Jetzt öffnet er sich manchmal automatisch. Ich öffne das in Chrome. Im Grunde ist es also Teil 5500, da man hier eintippen muss. Lokaler Host-Doppelpunkt 5500, das ist der Port- und Resolvernamen. Also sind wir bereit zu gehen. Also werde ich das los und ich werde hier einige Elemente erstellen. Ich erstelle ein div-Element mit unserer Containerklasse. Das ist sehr einfach mit Visual Studio Code zu tun . Ich muss in diesem Fall nur dot und dann den Namen des Klassenbehälters eingeben . Klicken Sie dann auf Enter. Und es hat ein div-Element mit einem Klassencontainer erstellt. Und in dieser Entwicklung werde ich ein paar andere Divs erstellen. Ich gebe dem ersten eine Klasse von Dave, einen, eine, eine andere mit einer Klasse von Div zwei. Lasst uns 34 machen. Okay? Ich werde speichern, und ich füge hier etwas Text hinzu, wie wir diesen einen Punkt nennen, einen Punkt 234. Okay, ich werde die Seite hier aktualisieren. Eigentlich Live-Server wird er automatisch aktualisiert. Also hier sind unsere vier Gegenstände. Eine weitere Sache ist, dass ich all diesen Elementen etwas Polsterung und Rahmen geben diesen Elementen etwas Polsterung werde, damit wir sie leicht sehen können. Dafür werde ich Punkt Container Space div sagen. Und das bedeutet alle div-Elemente, die sich innerhalb eines Elements mit einer Containerklasse befinden. Und ich sage „Polsterung“. Geben wir ihnen 15 Pixel und grenzen dann einen Pixel ein, fest. Okay? Und das funktioniert nicht. Hi, ich habe die Style-Punkt-CSS-Datei nicht verknüpft, also muss ich hier am Tag des Typs Link hinzufügen rel gleich Stylesheet, href gleich style dot css. Und jetzt funktioniert das. Damit sind wir bereit , das Haupt-Div in einen Flex-Container umzuwandeln das Haupt-Div in und zu sehen, was wir damit machen können. 3. Erstellen eines a: Okay, also hier drin, füge ich eine Regel für das div mit einem Klassencontainer hinzu. Dafür sage ich den Container. Und all diese Regeln werden für dieses div gelten. Alles, was wir tun müssen, um es zu einem Flex-Container zu machen , ist Display Flex zu sagen. Nun, das ist ein Flex-Container, dieses Div hier. Das sieht jetzt also anders aus. Es gibt einige Eigenschaften, die automatisch angewendet wurden. Wir werden in einer Sekunde darüber sprechen. Aber im Grunde ist es nur eine Notiz zum Benennen. Das nennt man also Flex-Container. Und das sind die Flex-Items. Wir können den Flex-Container auch als übergeordnete Elemente und die div-Elemente als untergeordnete Elemente bezeichnen . Wenn wir also mit Flexbox arbeiten, haben wir einige Eigenschaften, die für das übergeordnete Element für ihren Flex-Container gelten. Wir werden einige Eigenschaften haben, die für die Kinder gelten. Beginnen wir also mit den Eigenschaften, die für das übergeordnete Element gelten, den Flex-Container selbst. 4. Flex Container Eigenschaften: Die erste Eigenschaft wird also Flex-Richtung sein und der Standardwert ist rho. Wenn ich das mache, ist das überflüssig. Es wird nichts bewirken. Es ist das, was wir bereits haben. Wenn die Flex-Richtung Zeilenelemente ist, werden die Elemente grundsätzlich von links nach rechts angezeigt. In Ländern, in denen wir von links nach rechts schreiben, wird es das Gegenteil an Stellen sein, an denen Menschen von rechts nach links, wie zum Beispiel auf Arabisch, Menschen von rechts nach links. Es wäre also das Gegenteil. Aber auf Englisch schreiben wir von links nach rechts. Die Flex-Elemente werden also von links nach rechts angezeigt. Wir können statt Zeile umkehren. Und das wird es natürlich rückgängig machen. Und jetzt fangen sie von rechts an und dann gehst du nach links. Wir können auch Kolumne machen. Jetzt wird die Richtung nicht mehr horizontal sein, sie wird vertikal sein. Und wir fangen mit dem ersten Punkt an. Und schließlich können wir natürlich die Spaltenumkehrung machen , in der jetzt Punkt eins unten sein wird und dann zu 34 gehen. Dies sind also die vier Flex-Richtungen, die wir haben. Wir haben also wirklich eine Horizontale, entweder im normalen Textfluss wie von links nach rechts in westlichen Ländern. Zeile umgekehrt, die in westlichen Ländern von rechts nach links ist, Spalte, die wie von oben nach unten ist, und die Spalte umgekehrt von unten nach oben. Ich werde das los. Die nächste Eigenschaft wird Flex, Wrap sein. Der Standardwert. Er wird nein sein, wickle das ein. Wenn ich das mache und spare, wird nichts passieren und wir können es tatsächlich nicht sehen. Ich muss die Entwicklertools öffnen, damit Sie es sehen können. Okay? Wenn ich also das Fenster verkleinere nicht genug Platz für sie gibt, werden sie schrumpfen. Wenn wir also den Wahrscheinlichkeitsfluss ändern, wird passieren, dass die Elemente anfangen zu , wenn wir das Fenster verkleinern brechen, wenn wir das Fenster verkleinern. Ihr vierter Gegenstand geht zur nächsten Zeile und dann zur dritten und dann zum zweiten, aber sie werden ihre Größe beibehalten. Also schauen wir uns das an. Also lasst uns hier rap machen. Und jetzt sehen wir wie der vierte Punkt zur nächsten Zeile und so weiter geht. Und schließlich wickeln Sie den Rückwärtsgang ein. Sie können sich also schon vorstellen, was passieren wird. Grundsätzlich wickeln sie sich von unten nach oben und nicht von oben nach unten. Also werde ich das los und die nächste Wahrscheinlichkeit wird den Inhalt rechtfertigen. Start ist also der Standardwert. Wenn ich das mache, passiert nichts. Aber wir können es auch hier machen, und natürlich wird es am Ende gerechtfertigt sein. Und wir können auch in der Mitte arbeiten. Und jetzt sind sie im Zentrum. Und es gibt drei weitere, die interessant und sehr nützlich sind. Einer von ihnen ist ein Zwischenraum zwischen diesem. Artikel eins und Punkt vier befinden sich am Anfang und am Ende des Flex-Containers. Und dann sind alle anderen Gegenstände in diesem Fall, die Nummer 23, gleichmäßig in ihnen angeordnet. Wir haben auch Platz ist rund. Und in diesem Fall haben alle Gegenstände den gleichen Platz um sie herum. Dieser hat also diesen Raum hier und diesen Raum hier, und dieser hat diesen Raum hier und diesen Raum hier. Was mit diesem passiert, ist natürlich, dass wir zwischen Punkt 12 die doppelten Leerzeichen zwischen Punkt eins und dem Anfang des Flex-Containers haben eins und dem Anfang des Flex-Containers , denn hier haben wir den Platz, gehört zu Element eins und dem Leerzeichen, der zu Punkt zwei gehört. Wenn wir einen gleichen Abstand zwischen allen Gegenständen und auch zwischen dem ersten und dem letzten Gegenstand im Flex-Container wünschen, können wir einen Raum gleichmäßig verwenden. Jetzt sind alle Leerzeichen gleich und schließen den Abstand zwischen dem ersten Gegenstand und dem Anfang des Flussbehälters und dem vierten Gegenstand und dem Ende des Flex-Containers. Ich werde das los. Und diese nächste Eigenschaft ist Align Items. Dafür füge ich hier noch ein paar Sachen hinzu. Zum Beispiel füge ich im ersten einen H2-Titel hinzu, einen Absatz. In der dritten. Ich füge dies und auch einen zusätzlichen Absatz hinzu. Okay? Der Standardwert der Eigenschaftenausrichtungselemente wird also eine Streckung sein. Das ist also überflüssig. Dies bedeutet, dass sich alle Gegenstände in ihrer Höhe dehnen , um der Höhe des höchsten Gegenstandes zu entsprechen , der in diesem Fall Artikel Nummer drei ist. Wenn wir statt dessen hier drin Flex sagen, starte. Jetzt sind sie alle vertikal ausgerichtet. Oben im Flex-Container. Wenn wir Mitte sagen, wird es in der Mitte ausgerichtet sein. Und wenn wir unten sagen, nicht unten, wenn wir Flex sagen und es wird am Boden des Flex-Containers ausgerichtet sein . 5. Flex Item Eigenschaften: Großartig. Werfen wir also einen Blick auf die Eigenschaften der Kinder. Also haben wir das hier ins Rollen gebracht, aber dieser Selektor betrifft alle Kinder als Gruppe. Wir werden sie einzeln ins Visier nehmen. Dafür erstelle ich für jedes Kind eine Reihe. Sagen wir also 1234. Okay, perfekt. Der erste ist also die Reihenfolge und der Standardwert ist 0. Wenn ich das mache, passiert nichts. Aber wenn ich anstelle von 0 auch hierher lege, habe ich es noch nicht gespeichert. Aber es wird nicht auf der zweiten Position sein. Wir werden sehen, was passiert. Ich hebe es auf. Jetzt die erste, ich hier drin bin, nenne diesen Punkt eins und Punkt drei, nur damit wir sie leicht sehen können. erste Punkt ist jetzt am Ende. Und der Grund dafür ist , dass alle anderen Artikel automatisch 0 bestellen. Im Grunde ist dieser also 0, dieser ist 0, dieser ist 0 und dieser hat den höchsten Wert. Also geht es am Ende. Wenn wir in diesem einen Bestellwert von drei angegeben haben. Jetzt wird dieses Div drei am Ende gehen. So funktioniert es also im Grunde . Die letzte Eigenschaft , die wir uns ansehen werden , ist Flex, Grow. Und das ist irgendwie knifflig. Also werde ich das zuerst los . Okay? So funktioniert es also. Der Standardwert ist 0. Wenn ich also Flex Grow 0 sage, ist es überflüssig. Nichts ändert sich, okay? Im Grunde genommen nimmt jedes Element den Platz ein, in dem er benötigt, in seinem Flex-Container basierend auf seinem Inhalt. Es ist also eins, es hat genug Platz benötigt, um seinen Inhalt anzuzeigen. Und die Polsterung, die sie haben, beträgt 15 Pixel auf jeder Seite. Wenn statt 0, setzen wir dies auf eins, ob das in allen von ihnen ist. Okay? Jetzt sehen wir, dass jeder ein Viertel des verfügbaren Platzes einnimmt , also die Breite des Fensters. Es könnte also verlockend sein zu glauben , dass wenn wir dieses auf zwei setzen , diese jetzt die Zwischensumme von fünf Einheiten. Diese würden also ein Fünftel dauern, und dieses wird zwei Fünftel dauern. Aber so funktioniert es nicht genau. Lass mich das aufheben. Das ist nicht genau das, was hier drin vor sich geht. Wenn ich dies zum Beispiel auf vier setze, wird es einfacher sein, es zu sehen. Wenn das passiert ist, wären es im Grunde insgesamt sieben Einheiten. Diese würden also jeweils 1 Siebtel dauern , und dieser würde vier Siebtel dauern. Aber das ist wirklich die Mitte. Wenn dieser vier Siebtel des Raums genommen würde, müsste es mehr als die Hälfte dauern , und das ist nicht das, was passiert. So funktioniert es also. Wenn wir alle noch einmal auf 0 sagen, nehmen sie diesen Platz ein und es gibt all diesen freien Speicherplatz. Wenn sie also nicht auf 0 eingestellt sind, wird dieser freie Speicherplatz von hier bis zum Ende entsprechend basierend auf der Zahl geteilt, die sie haben. Also auf proportionale Weise. Also wenn wir dieses auf vier setzen und all diese auf eins wollen. Im Grunde nimmt jede der ersten drei ein Siebtel dieses Platzes ein Siebtel ein. Ich bin nicht vom gesamten Raum, und dieser wird vier Siebtel dieses Raums und nicht den gesamten Raum einnehmen . So funktioniert es. Stellen wir das also auf 1114 ein. Das ist es, was los ist. Grundsätzlich hat der Artikel bereits den Platz garantiert , den er benötigt. Und es ist der verbleibende freie Speicherplatz , der entsprechend geteilt wird. Grundsätzlich wird der gesamte Raum als die Gesamtzahl der Einheiten wert angesehen, wie sieben in diesem Fall. Und dann wird es geteilt und fügt es seinem div entsprechend der Zahl hinzu , die sie hier haben. Wenn wir diesen also auf 0 setzen, hat dieser nur den Platz, den er natürlich hat, der dafür ausreicht. Und jetzt bin ich, der Rest des freien Speicherplatzes wird entsprechend diesen hinzugefügt. Jetzt wird zum Beispiel der freie Speicherplatz durch sechs geteilt. Und diese erhielten wieder etwa 1 Sechstel des freien Speicherplatzes. Und dieser erhält für sechs des freien Speicherplatzes. Es ist ein bisschen knifflig, aber so funktioniert es. 6. Outro / Abmoderation: Danke, dass du an meinem Unterricht teilgenommen hast und ich hoffe, es war hilfreich. Ich ermutige Sie, zu experimentieren und zu versuchen, mit den verschiedenen Eigenschaften in all den verschiedenen Axiomen zu spielen den verschiedenen Eigenschaften in all den , die verfügbar sind. Nochmals vielen Dank, und wir sehen uns in meiner nächsten Klasse.