Der komplette CSS Flexbox-Leitfaden mit einem vollständigen Projekt 2024

1. Einführung eines Kurses: Sind Sie es leid, Schwimmer zu verwenden, als die klaren, die gleichen Schwimmer? Sind Sie es leid, die Positionierung zu verwenden, um die gewünschte Ebene zu erreichen? Und dann herauszufinden, dass alles auseinander fällt , wenn Sie es auf verschiedenen Bildschirmgrößen anzeigen. Möchten Sie erweiterte responsive Layouts und CSS mit nur einfachen Codezeilen erstellen? Wenn ja, dann ist dieser Kurs für Sie. Ich bin ADSR-Deck, ein Full-Stack-Webentwickler und Freelancer seit mehr als sieben Jahren. Und ich werde dein Lehrer während des ganzen Kurses sein. In dieser Lektionsreihe erfahren Sie alles, was Sie wissen müssen, um mit Flexbox in Ihren zukünftigen Projekten zu beginnen . Wir beginnen damit, zu lernen und zu verstehen, wie Flexbox funktioniert. Denn ich denke, wenn Sie jemals versucht haben, Flexbox zu verwenden, waren Sie vielleicht von der Anzahl der neuen Eigenschaften überwältigt. Es gibt etwa 11 oder 12 neue Eigenschaften mit einem Durchschnitt von vier Potentialwerten. So kann es ein wenig überwältigend sein, direkt hinein zu springen. Aber durch diesen Kurs erhalten Sie ein klares Verständnis dafür, wie jede Eigenschaft funktioniert und wie jede bestimmte Eigenschaft verwendet werden kann, um das Layout auf unterschiedliche Weise zu steuern. Ich glaube daran zu lernen, indem wir dies tun, nachdem alle Eigenschaften von Flexbox verstanden und gelernt haben, werden wir unsere Hände schmutzig machen und beginnen, zwei Menüs als einfaches, einstufiges Menü und ein fortgeschrittenes zu erstellen . Und in diesem Teil des Kurses sehen Sie alles, was Sie in früheren Lektionen in Aktion gelernt haben, Schritt für Schritt. Eine Sache, die ich im Auge behalten habe, als ich diesen Kurs aufbaute , ist, dass ich wollte, dass er sich von anderen Kursen abhebt. Ich habe bemerkt, dass Sie in anderen Flexbox-Kursen nur einige Boxen auf dem Bildschirm sehen und die Instruktoren sie einfach mit Flexbox bewegen. Und am Ende des Kurses ist plötzlich beendet und du bist links zu denken, okay, das war gut. Ich habe die Grundlagen von Flexbox gelernt. Aber was, wie kann ich dieses Wissen in realen Beispielen verwenden? Denn schließlich sind Webseiten nicht nur einige Boxen, die sich bewegen, oder? Und genau deshalb habe ich den letzten Abschnitt dieses Kurses erstellt. In diesem Abschnitt werden wir ein komplettes Projekt von Grund auf neu erstellen, das ich für Sie konstruiert habe. Mein Hauptaugenmerk, während ich mit diesem Projekt kam, ist, wie man jede Eigenschaft implementiert, die wir über Flexbox im Kurs lernen. Sehen Sie können ein solides Verständnis davon bekommen, was wir mit diesen Eigenschaften tun können. So lernen Sie im Projekt, wie Sie viele verschiedene Ereignis-Layouts erstellen. So erfahren Sie, was das Holy Gral Layout ist und wie Sie es mit nur drei oder vier Zeilen Code erstellen. Vor Flexbox war das mit regulärem CSS nicht zu erreichen. Sobald das erledigt ist, erstellen wir eine Kopfzeile mit dem Menü und wir lernen, wie Sie den Inhalt vertikal mit Flexbox zentral steuern, was früher ein großer Kopfschmerz war. Danach wird Spalten mit gleicher Höhe erstellen, die ein gemeinsames Layout ist, dass Sie eine Menge in Blogs oder Zeitschriften Websites sehen werden. Dann werden zwei weitere Abschnitte erstellen, die erweiterte Kartenlayouts enthalten , die sehr komplex sein werden, wenn Sie versucht haben, sie mit normalem CSS zu erstellen. Wenn Sie das tun, würden Sie am Ende zu viele Codezeilen haben und Sie würden es sehr schwierig finden , mit dieser Art von Layout umzugehen, wenn Sie versuchen, es reaktionsschnell zu machen. Schließlich erstellen wir eine Bildergalerie mit diesem modernen Layout, das als horizontales Mauerwerk bekannt ist, was im Grunde bedeutet, dass alle Elemente unterschiedliche zufällige Breiten, aber die gleiche Höhe haben sollten . Wir werden lernen, wie man diese zufälligen Breiten mit einigen erweiterten CSS-Selektoren einrichtet. Und natürlich wird alles voll reaktionsschnell sein. So wird es auf jeder Bildschirmgröße gut aussehen, von mobilen Geräten bis hin zu Tablets und sogar breiteren Bildschirmen. Jetzt bin ich hier, um dir zu dienen. Also während dieses Kurses, wenn Sie irgendeine Frage haben und ich meine, jede Frage, die Ihnen in den Sinn kommt, setzen Sie sie einfach in das Q und einen Abschnitt und ich werde Sie so schnell wie möglich beantworten. Ich möchte das auch zu einem Fünf-Sterne-Kurs machen. Wenn Sie also Vorschläge haben, hinterlassen Sie einfach eine Rezension mit Ihrer konstruktiven Kritik. Ich erstelle keine Kurse und lasse sie einfach da draußen werden regelmäßig verbessert und aktualisiert diesen Kurs und vielleicht sogar einige weitere Inhalte hinzufügen, wenn ich einige gute Vorschläge sehe. Mit all dem, was gesagt hat, kann ich es kaum erwarten, dich im Kurs zu sehen. Drücken Sie also den Anmelde-Button und lassen Sie uns eintauchen und unsere Flexbox für das Journey Learning starten. 2. 2 Erstellung unseres ersten flexbox: Hallo an alle. In dieser Lektion erstellen wir unseren ersten Flexbox-Container. Also lasst uns anfangen. Alles klar, jedes Mal, wenn Sie Flexbox verwenden möchten, um Ihre Elemente zu steuern, müssen Sie drei Schritte durchlaufen. Zuerst müssen Sie die Elemente angeben, die Sie steuern möchten. Seine Ausrichtung ist die Dimensionierung oder was auch immer mit Flexbox. Mit anderen Worten, die Elemente, auf die Sie Flexbox anwenden möchten. Zweitens möchten Sie alle diese Elemente in einen äußeren Container einwickeln. Und drittens möchten Sie die Anzeigeeigenschaft des Containers auf Flex festlegen , indem Sie diese drei Schritte ausführen. Jetzt haben Sie einen Flex-Container, und innerhalb dieses Flex-Containers haben Sie Flex-Elemente oder Elemente, was bedeutet, dass Sie jetzt Flexbox-Eigenschaften für diesen Container oder für diese Elemente oder für beide verwenden können, um zu steuern, wie diese sollten auf Ihrer Seite entsprechend Ihrem Layout aussehen. Lassen Sie mich Ihnen ein Beispiel dafür zeigen, wovon ich hier in meinem Code-Editor spreche. Ich habe etwas HTML, Es ist nur grundlegende HTML. Sie können sehen, dass ich ein div mit einer Klasse von Flex-Container habe. Und innerhalb dessen habe ich für Kinder divs mit einer Klasse von Flex-Element zu jedem von ihnen. Wenn ich diese in meinem Browser ansehe, können Sie sehen, dass sie natürlich als Blockelemente angezeigt werden , weil sie divs sind, sie sitzen einfach übereinander. Aber jetzt möchte ich Flexbox auf dieser Seite verwenden. Lass uns unsere drei Schritte benutzen. Wählen Sie zunächst die Elemente aus, die Sie mit Flexbox steuern möchten. Und natürlich würden wir diese vier divs wählen. Zweitens, aber alle von ihnen in einem äußeren Behälter. haben wir schon getan. Sie können sehen, dass sie alle mit diesem äußeren div mit einer Klasse von Flex-Containern eingewickelt sind. Und dann drittens, legen Sie die Anzeigeeigenschaft des Containers auf flex. Gehen wir zu unserem CSS und tun das. Scrollen Sie ein wenig nach unten, bis Sie den Flex-Container finden und die Anzeige auf flex einstellen. Sie können jetzt sehen, dass die Flex-Elemente, indem Sie die display-Eigenschaft des Containers auf flex setzen, jetzt irgendwie nach links schweben und nebeneinander angezeigt werden. Und das ist es, was Display Flex allein tut. Außerdem hängt die Breite jedes Flex-Elements von seinem Inhalt ab. Zum Beispiel, wenn ich hier im zweiten div einen zusätzlichen Text schreibe, können Sie sehen, dass seine Breite zunimmt, um den Inhalt zu behandeln. Und jetzt sind der Flex-Container und die Flusselemente bereit, durch Flexbox-Eigenschaften gesteuert zu werden und wir lernen, wie man sie in kommenden Videos steuern kann. Aber vorerst ist es für diesen Vortrag. Ich sehe dich in der nächsten. 3. 3 verständliche Haupt- und Kreuzachsen: Ich denke, diese Lektion ist eine der wichtigsten Lektionen im gesamten Kurs. Und wenn Sie diese Lektion verstehen, dann alle kommenden Lektionen, werden wir nur auf diese aufbauen. Denn in dieser Lektion wird über die Kern-CSS-Flexbox gesprochen, die Maine und Querachse oder Flexbox versteht. Also lasst uns anfangen. In der vorherigen Lektion stellen Sie fest, dass die Flex-Elemente horizontal nebeneinander angezeigt wurden, wenn wir den Flex-Container definieren, indem Sie ihm Anzeigeflex geben die Flex-Elemente horizontal nebeneinander angezeigt wurden, wenn wir den Flex-Container definieren, indem Sie ihm Anzeigeflex geben. Vielleicht fragen Sie sich, warum horizontal und warum nicht, zum Beispiel, vertikal. Nun, es gibt einen guten Grund. Sie sehen jedes Mal, wenn Sie einen Flex-Container definieren, der auch die Fließrichtung der Elemente innerhalb dieses Flex-Containers definiert. ob diese Richtung horizontal oder vertikal ist, Es gibt zwei Fließrichtungen. Eine Zeile, die als Standard angewendet wird wenn Sie den Flex-Container definieren und Elemente im Wesentlichen horizontal ausrichten, wie im letzten Video. Und zu Spalte, die Sie anwenden müssen, wenn Sie den Standard überschreiben möchten. Und Spalten richten Elemente vertikal aus. Aber wie ändere ich die Fließrichtung der Elemente von Zeile zu Spalte? Nun, Sie verwenden eine Eigenschaft namens flex flow und wenden sie auf den Flex-Container selbst an und setzen ihren Wert auf Spalte. Also lassen Sie uns das tatsächlich tun und sehen, wie es hier in meinem Code-Editor in unserer CSS-Datei aussieht , sagen wir Flex-Flow-Spalte. Sie können jetzt sehen, dass sie einfach übereinander sitzen, wie zuvor. Nun, was ist der Sinn von all dem? Und warum habe ich all diese Dinge gesagt? Dies ist die wichtigste Lektion. Nun, der Grund ist, dass, wenn der Flussfluss auf Zeile gesetzt ist, was wiederum der Standard ist, dann werden zwei imaginäre Achsen automatisch generiert. Die Hauptachse und die Querachse. Die Hauptachse ist horizontal und die Querachse ist vertikal. Aber wenn wir den Flexfluss auf Spalte setzen, dann ist die Hauptachse in diesem Fall vertikal und die Querachse wird horizontal sein. Aber trotzdem, was ist die große Sache? Warum ist das so wichtig? Nun, das ist so wichtig, weil später im Kurs, wenn wir Flexbox-Eigenschaften verwenden, einige von ihnen immer Elemente entlang der Hauptachse beeinflussen , abhängig davon, ob es horizontal oder vertikal ist. Denken Sie daran, wir sagten, es wird horizontal sein. Flussfluss ist rho und es wird vertikal sein, wenn Flex Flow Spalte ist. Und einige andere Eigenschaften wirken sich immer auf Elemente entlang der Querachse aus, je nachdem, ob sie horizontal oder vertikal sind. dies verstehen, müssen Sie beim Lernen neuer Eigenschaften nur wissen, welche Achse sich diese Eigenschaft auswirkt. Wenn es sich um die Hauptachse handelt oder wenn es sich um die Querachse handelt. Und du bist gut zu gehen. Lassen Sie mich Ihnen helfen, besser zu verstehen. Lassen Sie uns den Flex Flow zum Abstieg setzen. Stellen Sie sich nun vor, dass zwei Achsen auf der Hauptachse und der Querachse verlaufen. Die Hauptachse ist in diesem Fall horizontal, da der Flussfluss rho ist und die Querachse vertikal ist. Natürlich. Jetzt werde ich rechtfertigen Inhalt auf Abstand zwischen setzen. Mach dir jetzt keine Sorgen um diese Immobilie. Wir werden es später erforschen. Aber was ich möchte, dass Sie über diese Eigenschaft wissen , ist, dass sie als Hauptachseneigenschaft gilt. Mit anderen Worten, es betrifft nur die Hauptachse, die in unserem Fall die Horizontale ist. Wenn ich also zu meinem Browser gehe und aktualisiere, können Sie sehen, dass es sich auf die Elemente horizontal auswirkt da die Hauptachse horizontal ist und eine Hauptachseneigenschaft ist. Aber wenn ich zu meinem CSS gehe und den Flex-Fluss in Spalte und aktualisieren ändere. Oh, sieh mal, wir Elemente ändern sich vertikal. Und ja, das liegt daran, wenn der Flussfluss Spalte ist, ist die Hauptachse vertikal und rechtfertigen Inhalt wirkt sich auf die Hauptachse. Jetzt hoffe ich, dass Sie diesen Vortrag verstanden haben. Ich habe vielleicht viel gesprochen und ein paar Dinge wiederholt, aber das liegt daran, dass dieser Vortrag sehr wichtig ist und Ihnen helfen wird, den gesamten Kurs zu verstehen. Das ist es also für diesen Vortrag, und wir sehen uns im nächsten. 4. 4 weitere über flex: Hallo an alle. In dieser Lektion erfahren Sie mehr über die Flussflusseigenschaft und die anderen Werte, die sie akzeptiert. Also lasst uns anfangen. Wie Preise. So erinnern Sie sich aus dem letzten Video, dass Sie nach dem Erstellen eines Flexbehälters dann die Flussrichtung definieren müssen, damit Sie die Richtung der Hauptachse und der Querachse definieren können. Nun, zusätzlich zu Zeile und Spalte, akzeptiert die flux flow Eigenschaft auch Zeilenumkehrung und Spaltenumkehr. Also, um die Fließrichtung des Containers einzustellen, werde ich nur flex flow rho hinzufügen. Sie können sehen, dass sich nichts ändert, da der Flussfluss, wie gesagt , standardmäßig auf Zeile gesetzt ist, was die Flex-Elemente im Grunde horizontal anzeigt und sie nach links schwebt. Werfen wir nun einen Blick auf die anderen Werte, die die flex flow Eigenschaft akzeptiert. Zusätzlich zu Rho können wir Zeilenumkehrung verwenden, die die Elemente horizontal drehen und sie bis zum Ende des Containers schieben wird. Mit anderen Worten, schweben Sie sie nach rechts und drehen Sie sie um. So können Sie sehen, jetzt haben wir 432, dann können wir auch Spalte verwenden. Also werde ich voran gehen und Spalte hinzufügen. Jetzt können Sie sehen, dass unser Flex-Container die Flex-Elemente als Spalte anzeigt. Sie sitzen untereinander wie normale Blockelemente. Jetzt können wir auch die Spaltenumkehrung verwenden. Sie können sehen, dass die Elemente vertikal umgedreht werden und sie bis zum Ende des Containers gedrückt werden. Sie können sehen, wir haben auch 4321, und das ist es für diese schnelle Lektion. Und jetzt wissen Sie, welche Werte flex flow akzeptiert. 5. 5 Lerne die flex: Hallo an alle. In dieser kurzen Lektion werden wir etwas über die Flusswickeleigenschaft lernen. Also lasst uns anfangen. Standardmäßig sind alle Flexbox-Container einzeilige Container, was bedeutet, dass die Flex-Elemente immer in einer einzigen Zeile angezeigt werden. Und wenn Sie viele Elemente haben, werden sie nicht in die nächste Zeile einwickeln, wenn nicht genug Platz für sie im Container vorhanden ist, sie werden irgendwie überlaufen. Zum Beispiel, wenn ich alle Elemente kopiere und sie wieder einfüge und dann den Container mit kleiner mache. Sie können sehen, dass die Elemente jetzt aus unserem Container gehen. Aber die meiste Zeit wollen wir nicht, dass dies geschieht, vor allem, wenn es um Responsive Design geht. Will, dass die Elemente in die nächste Zeile umgebrochen werden. Wenn es nicht genug Platz für sie gibt, müssen wir nur die Flex-Wrap-Eigenschaft verwenden. Also werde ich Flex Ratte, Ratte auf den Behälter auftragen . Und jetzt können Sie sehen, dass die Elemente einfach in die nächste Zeile umgebrochen werden, wenn sie nicht genug Platz haben. Wir können auch einen Rap-Rückwärtsgang verwenden. Also lassen Sie uns das versuchen und sehen, was bekommen wird. Sie können sehen, dass Wrap Reverse nur die Linien selbst und die Elemente nicht beeinflusst oder sie oder ähnliches umkehrt. Und das ist es für die Flex-Wrap-Eigenschaft. Es ist sehr einfach, aber sehr wichtig, und Sie werden es viel verwenden. 6. 6 Ausrichtungselemente mit rechtfertiger Inhaltseigenschaften: Nun, nach dem Verständnis des Konzepts der Haupt- und Querachsen, in diesem Kapitel, werden wir einen Blick auf Flexbox-Eigenschaften, die die Ausrichtung der Hauptachse und der Querachse beeinflussen . Ordnung, in dieser Lektion werden wir mit den Eigenschaften beginnen, die die Hauptachse beeinflussen. Beginnen wir mit der Eigenschaft „Begründung Inhalt“. Was den Inhalt rechtfertigt, ist, dass er steuert, wie die Flusselemente mit dem verbleibenden freien Speicherplatz im Container umgehen. Und wie diese Flusselemente relativ zu diesem verbleibenden Raum angezeigt werden. Oder mit anderen Worten, wie der verbleibende Raum um die Elemente verteilt wird. Rechtfertigen Sie also, dass der Inhalt nichts tut, wenn Ihr Container keinen freien Speicherplatz hat oder wenn die Elemente den Container vollständig füllen und keinen freien Speicherplatz hinterlassen. Denken Sie also daran, wenn Sie rechtfertigen Inhalt verwenden möchten, muss Ihr Container freien Speicherplatz haben. In Ordnung, jetzt, rechtfertigen Inhalt akzeptiert fünf Werte. Zuerst flex, start, was die Standardeinstellung ist. Es richtet Elemente an den Anfang des Flex-Containers aus. Zweitens, Flex-Ende, das Elemente am Ende des Flex-Containers ausrichtet. Drittens, Center, die den Inhalt innerhalb des Flex-Containers zentriert. Viertens, Raum zwischen dem die Elemente trennt und den verbleibenden Raum zwischen ihnen verteilt, aber nicht um sie herum. Und schließlich, Raum, um den die Elemente trennt und verteilt den verbleibenden Raum zwischen ihnen und um sie herum. Und der Raum um die Elemente wird auf die Hälfte des Raumes zwischen ihnen belaufen. Werfen wir einen Blick und sehen diese Werte in Aktion. Wenn ich zu unserem CSS zurückgehe, kann ich den Inhalt zunächst auf flexstart setzen. Und Sie können sehen, dass dies nicht viel tut, weil es der Standardwert ist. Und es richtet die Elemente am Anfang des Containers ohne Abstand zwischen ihnen aus. Und der freie Speicherplatz wird genau hier sein. Jetzt versuchen wir Flex End. Sie können sehen, es schiebt alle Elemente bis zum Ende und den verbleibenden Platz werden wir am Anfang des Containers sein. In Ordnung, lassen Sie uns das Center versuchen. Sie können sehen, dass es nur die Elemente zentriert und der verbleibende Raum gleichmäßig zwischen dem Anfang und dem Ende, dem Flex-Container, verteilt wird . Als nächstes versuchen wir Leerzeichen zwischen. Sie können sehen, es trennt die Elemente und legt gleichen Raum zwischen jedem. Aber das erste Element wird an den Anfang des Containers geschoben, und das letzte Element wird an das Ende geschoben, was bedeutet, dass es keinen Raum zwischen ihnen und ihrer Seite des Containers gibt. Und das ist der Unterschied zwischen dem Raum zwischen n Raum um. Wenn ich also voran gehe und Raum hinzufüge, kannst du sehen, dass es die Elemente mit gleichen Leerzeichen trennt, genau wie der Raum dazwischen. Der Hauptunterschied besteht darin, dass der Platz am Anfang und Platz am Ende des Containers platziert wird . Und diese Räume sind gleich der Hälfte des Raums zwischen den Elementen selbst. Zum Beispiel, wenn der Abstand zwischen den Elementen 50 Pixel beträgt, innerhalb des Raumes rechts hier 25 Pixel. Und denken Sie daran, dass dies eine Hauptachseneigenschaft ist, was bedeutet, wie wir sie verwendet haben, um die Elemente horizontal zu ändern, können wir sie auch verwenden, um sie vertikal zu ändern. Sie bemerken also, dass die Containerhöhe 300 Pixel beträgt. So können wir freien Speicherplatz haben und wir können Inhalte vertikal rechtfertigen. Wenn ich also voran gehe und den Flexfluss auf Spalte setze, und bevor ich meinen Browser neu lade, wissen Sie, dass dies die Hauptachse hier vertikal macht. Also rechtfertigen Inhalt wird vertikal funktionieren. In diesem Fall. Sie können jetzt sehen, dass der Raum um herum vertikal und nicht horizontal funktioniert. Und jetzt können natürlich alle vorherigen Werte angewendet werden und es wirkt sich vertikal auf die Elemente aus. Verwenden wir zum Beispiel Flex start. Sie sehen jetzt, dass es die Elemente am Anfang des Containers vertikal ausrichtet. Und Flex-Ende wird sie am Ende des Behälters vertikal ausrichten und Mitte sinter sie vertikal, Natürlich. Nun ist eine Sache zu bemerken, dass Inhaltseigenschaften auf den Flex-Container selbst angewendet werden, nicht auf die darin enthaltenen Elemente. Und das ist es für diesen Vortrag. Ich hoffe, Sie verstehen jetzt, warum die Hauptachse und Querachse wichtig sind wenn wir Eigenschaften verwenden, die auf den Flex-Container angewendet werden, wie Rechtfertigungsinhalt. Und wir werden mit ihnen im nächsten Video weiter arbeiten. 7. 7 weitere Informationen zu Rechtfertigung: Hallo an alle. In dieser kurzen Lektion werden wir sehen, wie Inhalte ausrichten funktioniert, wenn der Flexfluss auf Zeilenumkehrung oder Spaltenumkehrung eingestellt ist. Also lasst uns anfangen. Alles klar, jetzt haben wir unsere vier Divs und ich setze die Anzeigeeigenschaft des Containers auf Flex. Standardmäßig ist der Flexfluss rho, sodass Elemente wie folgt horizontal nach links ausgerichtet werden. Nun, gehen wir zu unserem Container und fügen Flex Flow Zeile umgekehrt. Damit ist der Container Start nun auf der rechten Seite. Das bedeutet, dass, wenn ich voran gehe und rechtfertigen Inhalt hinzufüge, flex start. Sie können sehen, dass Flex Start Elemente jetzt nach rechts ausrichtet, nicht nach links, weil wir unseren Flex-Fluss auf Zeilenumkehrung gesetzt haben. Und das bedeutet auch, dass, wenn ich voran gehe und stattdessen Flex-Ende hinzufüge , die Elemente in diesem Fall nach links ausgerichtet werden. Nun, das funktioniert auf die gleiche Weise mit der Spaltenumkehrung. Wenn ich also die Zeile rückwärts in die Spalte rückwärts ändere, denken Sie daran, dass der Inhalt vertikal und nicht horizontal funktioniert. Wenn ich also neu lade, können Sie sehen, dass die Elemente an der Spitze des Containers ausgerichtet sind , da jetzt die Spalte invertiert ist. Der Anfang ist also das Ende und umgekehrt. Daher richtet Flex Ende Inseln in diesem Fall an den Anfang des Containers aus. Und natürlich, wenn ich dieses Flex-Ende zu flex start ändere, können Sie sehen, dass die Elemente jetzt am Ende des Containers ausgerichtet sind. Und das ist es für diese schnelle Lektion. Und ich werde dich im nächsten sehen. 8. 8 Elemente mit der Eigenschaft Ausrichtung der Ausrichtung der Elemente: Hallo an alle. In dieser Lektion werden wir über eine Zeile Elemente sprechen, die die Eigenschaft, die die Elemente entlang der Querachse steuert. Also lasst uns anfangen. Also, bevor wir beginnen, muss ich sagen, dass eine Zeile Posten und rechtfertigen Inhalt sind wirklich ähnlich zueinander. bedeutet, dass beide auf den Flex-Container angewendet werden und beide benötigen freien Speicherplatz im Container, um zu arbeiten. Der Hauptunterschied besteht darin, dass Inhaltssteuerelemente entlang der Hauptachse rechtfertigen, wie wir in der vorherigen Lektion gesehen haben. Aber Ausrichten von Elementen steuert sie entlang der Querachse. Der andere Unterschied besteht darin, dass die Werte, die Elemente ausrichten, sich ein wenig von den Werten unterscheiden, die den Inhalt akzeptieren. Nun, align Items akzeptiert vier Werte. Zuerst flex, start, wodurch Elemente entlang der Querachse am Anfang des Containers ausgerichtet werden. Zweitens, Flex-Ende, das sie entlang der Querachse am Ende des Behälters ausrichtet. Drittens, Mitte, die die Elemente entlang der Querachse und her zentriert. Stretch Dies ist ein Standardwert. Und es dehnt die Elemente nur so aus, dass sie die gleiche Höhe oder die gleiche Breite wie der Container haben. Nun, lassen Sie uns diese Werte in Aktion sehen. Hier. In unserem CSS. Der Flexfluss ist auf Zeile gesetzt, was bedeutet, dass die Querachse jetzt die vertikale ist. Und Sie können unsere divs sehen oder vertikal strecken standardmäßig. So können wir dies mit der Eigenschaft align items ändern. Also, wenn ich zu meinem Flex-Container gehe und eine Zeile Elemente hinzufüge, flex start. Sie können sehen, dass der Flex-Start die Elemente bis an die Spitze des Containers schiebt , wobei leerer Platz darunter bleibt. Gehen wir zurück zu unserem CSS und versuchen Flex-Ende. Und Sie können sehen, dass es die Elemente vertikal entlang der Querachse an das Ende des Containers schiebt . Und lassen Sie uns das Center versuchen. Und natürlich zentriert es die Elemente vertikal entlang der Querachse hinterlässt gleiche Räume über und unter ihnen. Lassen Sie uns nun versuchen, stretch, was der Standardwert ist. Es wird nur alle Elemente dehnen und ihnen die Höhe des Behälters geben. Und es wird den Inhalt nicht berücksichtigen, was bedeutet, dass alle Elemente mit der gleichen Höhe enden , auch wenn der Inhalt anders ist. Und das ist sehr sauber und sauber, wenn Sie Spalten mit der gleichen Höhe erstellen möchten, auch wenn der Inhalt in der Größe unterschiedlich ist. Nun, lassen Sie uns diese Werte verwenden, wenn der Flexfluss die Spalte gesetzt wird. Mit anderen Worten, wenn die Querachse horizontal ist, wenn ich den Flexfluss auf Spalte rechts hier setze. Jetzt werden die Elemente als Spalte angezeigt und unsere Dehnung horizontal entlang der Querachse, wobei die gesamte Breite des Behälters genommen wird. Jetzt lasst uns Flex Start verwenden. Sie sehen, dass die Elemente nun an den Anfang des Containers entlang der Querachse hier links geschoben werden. Und in der Mitte. Natürlich zentrieren wir sie horizontal und biegen Ende. Wir schieben sie bis zum Ende des Behälters horizontal entlang der Querachse nach rechts hier. Nun gehen wir weiter und fügen begründen Inhalt Raum. Zum Beispiel. Hey, lasst uns was versuchen. Ich möchte, dass Sie das Video pausieren und raten, was das mit unseren Elementen tun wird. Also gehen Sie weiter und pausieren Sie es jetzt und raten Sie es. Okay, wir sind wieder da. Lassen Sie uns unsere Seite neu laden und sehen, ich hoffe, Sie haben es richtig erraten. Was dies tat, ist es beeinflusst die Elemente entlang der Hauptachse, die in diesem Fall vertikal ist, weil denken Sie daran, wir haben Flex-Flusssäule jetzt. So trennt es die Elemente vertikal entlang der Hauptachse. So können Sie jetzt sowohl Inhalte ausrichten als auch Elemente zusammen ausrichten, um das gewünschte Layout zu erhalten. 9. 9 Ausrichtung eines einzigen Elements mit der self: Hallo an alle. In der vorherigen Lektion haben wir gelernt, wie Sie die Ausrichtung von Elementen entlang der Querachse mithilfe der Eigenschaft „Elemente ausrichten“ steuern . Aber in diesem werden wir lernen, wie man das einem einzelnen Element mit der align self-Eigenschaft macht. Also lasst uns anfangen. Alles klar, Also richten Sie sich selbst aus und richten Sie Elemente sind wirklich ähnlich zueinander. Das bedeutet, dass beide Elemente entlang der Querachse beeinflussen. Sie beide außer den gleichen Werten, die flex, start, flex, end, center und stretch sind. Der Hauptunterschied besteht jedoch darin, dass sich ausrichten selbst auf ein einzelnes Flex-Element nur innerhalb des Containers auswirkt . Während Ausrichten von Elementen wirkt sich auf alle untergeordneten Elemente des Flex-Containers aus. Und deshalb, wenn wir align self in unserem CSS verwenden, verwenden wir es auf einem bestimmten Flex-Element, nicht auf dem Flex-Container. Alles klar, wenn ich hier zu unserem Flex-Container-Selektor gehe und einen Zeilenpunkt hinzufüge, flex start. Sie können sehen, dass alle Elemente an den oberen Rand des Containers geschoben werden. Jetzt ist das gut und es ist praktisch. Aber was ist, wenn ich zum Beispiel nur das erste Element dehnen möchte, ohne die anderen Elemente zu beeinflussen. Oder was, wenn ich die zweite zentrieren möchte und so weiter. Dies ist, wo sich ausrichten selbst ins Spiel kommt. Wenn ich hier zu meinem Flex-Element gehe und ausrichten selbstdehnung hinzufüge. Sie können sehen, dass das erste Element den Container vertikal dehnt und füllt. Während die anderen Elemente dort, die Oberseite des Behälters. Gehen wir zu unserem zweiten Element und fügen Sie ausrichten Selbstmitte. Sie können sehen, ist jetzt zentriert. Lassen Sie uns Flex-Ende auf dem dritten Element verwenden. Und natürlich wird dies es an das Ende des Containers schieben. Nun ist der letzte Wert flex start. Und Sie können sehen, dass es nichts tut, weil die Ausrichtungselemente so eingestellt sind, dass sie dort gestartet werden. Also das ist es für diese Lektion, alle, und ich sehe dich in der nächsten. 10. 10 Ausrichtung mehrerer Linien mit der Eigenschaft des Inhalts: In dieser Lektion werden wir über eine andere Eigenschaft sprechen, die auf dem Flex-Container verwendet wird , richten Sie den Inhalt aus. Also lasst uns anfangen. Alles klar, was können wir die Content-Eigenschaft für unsere Elemente ausrichten? Grundsätzlich wird ausrichten Inhalt verwendet, wenn wir mehrere Zeilen von Elementen haben. Es steuert, wie diese mehrere Zeilen in unserem Container angezeigt werden. Zum Beispiel, wenn wir unsere vier divs kopieren, fügen Sie sie ein paar Mal ein. Speichern und neu laden. Gehen wir zu unserem CSS und setzen Flex Wrap zu wickeln. Und jetzt können Sie sehen, dass wir mehrere Zeilen von Elementen in unserem Container haben. Wir können auch steuern, wie diese Zeilen angezeigt werden, indem Sie die Eigenschaft align content verwenden. Wenn ich beispielsweise einen Zeileninhalt auf Mitte setze, können Sie sehen, dass die Linien jetzt im Container zentriert sind. Wir können auch Flex Start verwenden. Und Sie können sehen, dass es die Linien an die Spitze des Containers schiebt. Außerdem können wir Flex N verwenden, was natürlich alle Linien bis zum Ende des Containers schiebt. Wir können auch Raum zwischen und Raum um. Probieren wir das aus. Sagen wir, Raum dazwischen. Und wie Sie es erwarten würden, trennt es die Linien und legt gleiche Leerzeichen zwischen ihnen. Und schließlich trennt der Raum, um den man sehen kann , die Linien und legt gleiche Leerzeichen zwischen ihnen mit der Hälfte dieses Leerzeichens vor der ersten Zeile und nach der letzten Zeile. Dies ist es also für die align content-Eigenschaft. Sie können es nur verwenden, wenn Sie mehrere Zeilen in Ihrem Inhalt innerhalb des Containers haben. Es wird Ihnen helfen, den verbleibenden Raum zwischen diesen Zeilen zu verteilen. 11. 11 lernen der order: Flexbox gibt uns die Möglichkeit, Flex-Elemente beliebig neu anzuordnen , ohne den Quellcode zu ändern. Und das werden wir in dieser Lektion tun. Also lasst uns anfangen. Ordnung, also hier in unserem HTML haben wir unseren Flex-Container mit unseren Flex-Elementen darin. Und weil man in der Quellreihenfolge zuerst auftaucht, dann bis danach. Dann 34. Wenn wir sie im Browser betrachten, werden wir sehen, dass man zuerst kommt, dann auch, dann 34. Jetzt können wir die Reihenfolge dieser Elemente mit der Order-Eigenschaft steuern. Und der Standardwert für die Ordereigenschaft ist 0. Wenn ich zum Beispiel zu meinem CSS gehe und meinem zweiten Element Ordnung 0 hinzufüge, werden Sie sehen, dass sich nichts ändert, da sie alle standardmäßig eine Reihenfolge von 0 haben. Die Reihenfolge wird also von der Quelle festgelegt. Nun, wenn ich hierher gehe und diese 0 in eins ändere, wirst du jetzt sehen, dass das zweite Element hier das letzte sein wird. Wir können auch negative Werte verwenden, um sicherzustellen, dass unser Element immer als erstes angezeigt wird. Wenn ich zum Beispiel minus eins anstelle dieses hinzufüge, können Sie sehen, dass das zweite Element hier angezeigt wird. An der ersten Stelle. Wir können darüber hinausgehen und alle unsere Elemente neu ordnen. Zum Beispiel, wenn ich zu meinem ersten Element gehe und Reihenfolge füge für hinzu, dann gehe zu meinem zweiten und füge Ordnung drei hinzu, dann füge ich zu meinem dritten hinzu. Und danach, ein Auftrag eins für unser letztes Element. Jetzt können Sie sehen, dass sie alle neu geordnet sind. Jetzt haben wir 4321, und das war's für diese Eigenschaft. Es ist ein einfacher und wird Ihre Arbeit flexibler machen. Wir werden sehen, wie wir es in Aktion verwenden, während wir unser Projekt bauen. 12. 12 Flex wachsen: Hallo an alle. Herzlich willkommen zu diesem neuen Kapitel. In diesem Kapitel werden wir lernen, wie die Dimensionierung unserer Flusselemente zu steuern. Sie sehen, wenn wir die Anzeigeeigenschaft des Containers auf Flex setzen, stellen wir fest, dass jedes Flex-Element mit von seinem Inhalt abhängt. heißt, wenn eines der Elemente mehr Inhalt hat als die anderen, dann ist die Breite dieses Elements größer als die anderen Elemente mit, da sie weniger Inhalt haben. Und der verbleibende Platz des Containers wird leer sein. Im letzten Kapitel haben wir gelernt, wie man diesen verbleibenden Raum um Elemente verteilt. Mit anderen Worten, wie man die Elemente mit dem Raum trennt. Aber in diesem werden wir lernen, wie man den Raum zur Breite des Elements hinzufügt und die Elemente vergrößert und erweitert, um diesen Raum einzunehmen. Also lasst uns anfangen. Also in dieser Lektion werden wir einen Blick auf die Flex Grow Eigenschaft werfen. Flex Grow wird mit einer Zahl wie eins oder zwei usw. ausgedrückt. Und es wird verwendet, um zu bestimmen, wie stark das Flex-Element Verhältnis zum Rest der Flex-Elemente innerhalb des Containers wächst. Mit anderen Worten, wie viel Platz die Elemente aus dem verbleibenden Raum relativ zu den anderen Elementen nehmen . Werden alle Elemente gleich Platz einnehmen, oder wird einer von ihnen mehr als die anderen nehmen? Jetzt genug Reden. Lassen Sie uns das in Aktion sehen. Hier. In unserem Code-Editor. Die vier divs sitzen nebeneinander, und die Breite jedes einzelnen von ihnen hängt vom Inhalt ab. Sie können sehen, dass das zweite div größer ist als die anderen. Jetzt habe ich noch Platz hier, und ich möchte, dass meine Elemente den Container füllen und diesen verbleibenden Platz einnehmen. Jetzt. Okay, also lasst uns Flex wachsen dieser Flex-Elemente auf eins setzen. Also, bevor ich meinen Browser neu lade, was hier passieren wird, ist, dass dieser freie Speicherplatz gleichmäßig auf die vier divs verteilt wird. Wenn der verbleibende Platz hier beispielsweise 100 Pixel beträgt, nimmt jedes Element 25 Pixel an und fügt sie zu seiner Breite hinzu. Was wirklich genial ist, um mit nur einer Codezeile zu tun. Lassen Sie uns also neu laden und Sie können sehen, dass die Breite jedes Elements um den gleichen Wert erhöht. Wenn beispielsweise die Breite des ersten Elements je nach Inhalt 50 Pixel beträgt, beträgt seine Breite jetzt 75 Pixel. Und die Breite des zweiten Elements betrug 100 Pixel, dann beträgt seine Breite jetzt 125 Pixel. Aber das ist noch nicht alles. Was ist, wenn ich möchte, dass das dritte Element doppelt so viel des übrig gebliebenen Platzes einnimmt. Wie die anderen Elemente sagen würden, lassen Sie uns flex wachsen für das dritte Element auf zwei setzen. Sie können sehen, dass seine Breite jetzt zunimmt und der verbleibende Raum jetzt so verteilt ist , dass dieses dritte Element doppelt so viel benötigt wie die anderen drei Dibs. Jetzt ist der Standardwert für Flex Grow 0. Und das bedeutet nur, dass die Breite der Elemente vom Inhalt abhängt. Also, wenn ich voran gehe und diese Zeile hier entferne, gehe zu meinem Flex-Element-Selektor und flex grow 0. Sie können sehen, dass die Elemente mit vom Inhalt abhängig sind, was die Standardeinstellung ist. Eine weitere interessante Sache, die wir mit der Flex-Grow-Eigenschaft tun können, ist, dass Sie nur ein Element erweitern und den freien Raum in Anspruch nehmen können, während die anderen Elemente sich nicht ändern. Wir können dies leicht tun, indem wir das Flex-Wachstum unseres Elements auf einen beliebigen Wert setzen und es nicht für die anderen Elemente einstellen oder es einfach auf 0 setzen, wie wir es hier tun. Also zum Beispiel, wenn ich nur das dritte Element erweitern und diesen freien Raum in Anspruch nehmen möchte , kann ich hier gehen und sagte, es ist Flex wachsen zu einem zum Beispiel, oder 2 oder einem anderen Wert. Ich setze es auf eins. Und jetzt können Sie sehen, dass es sich ausdehnt und den ganzen Raum einnimmt. Jetzt können wir Flex Grow auch verwenden, um die Dimensionierung der Elemente vertikal zu steuern. Ich glaube, du weißt schon, wie wir das machen können. Dh, wir müssen nur den Flex-Fluss von Zeile zu Spalte ändern. Also, wenn ich hier in den Selektor unseres Containers gehe und Flex Flow auf Spalte setze. Sie können sehen, dass es jetzt vertikal funktioniert und sich auf die Höhe auswirkt. Um Dinge zusammenzufassen, wird die Flex-Grow-Eigenschaft verwendet, um die Dimensionierung der Flex-Elemente relativ zueinander zu steuern . Flex Flow ist Zeile. Es steuert die Breite und wenn es Spalte ist, dann wird es die Höhe steuern. Der Standardwert dafür ist 0, was im Grunde bedeutet, dass die Größe jedes Elements von seinem Inhalt abhängt. Aber wenn wir es in eins für alle Flusselemente ändern, wenn der freie Raum gleichmäßig zu jeder Elementgröße hinzugefügt wird. Auf der anderen Seite, wenn wir das Flex-Wachstum von nur einem unserer Elemente auf einen beliebigen Wert setzen, aber alle anderen Elemente bei einem Wert von 0 belassen, dann wird dieses ein Element den gesamten freien Speicherplatz für sich nehmen. Und wenn wir wollen, dass die Elemente ändern und relativ zueinander wachsen, können wir das Flex wachsen für alle von ihnen auf jeden Wert setzen, den wir wollen. Zum Beispiel, wenn ich möchte, dass ein Element doppelt so viel Platz einnimmt wie alle anderen Elemente. Die 1970er Jahre flex wachsen Eigenschaft zu zwei und sagte, es ist eine für alle anderen Elemente. Und wenn ich will, dass es viermal so viel wie die anderen dauert, kann ich seine Flex wachsen auf vier und die anderen zu einem und so weiter verkaufen. Also fordere ich Sie heraus, mit den Flex-Wachstumswerten herumzuspielen und zu sehen, was Sie bekommen. Und wenn Sie irgendwelche Fragen haben, lassen Sie es einfach im Q und einem Abschnitt, und ich helfe Ihnen gerne weiter. Also, das ist es für diesen Abschnitt, alle. Und wir sehen uns in der nächsten. 13. 13 flex: Hallo an alle. In dieser Lektion werden wir etwas über die Flex-Schrumpfeigenschaft lernen. Keine Sorge, es ist ziemlich einfach. Also lasst uns anfangen. In Ordnung. Im letzten Video haben wir also über die Flex Grow Eigenschaft gesprochen und gesagt, dass es uns hilft, zu kontrollieren, wie der freie Raum des Containers die Breite unserer Elemente verteilt wird. In diesem werden wir einen Blick auf die Flex-Schrumpfeigenschaft werfen, die im Grunde bestimmt, wie stark die Elemente relativ zueinander innerhalb des Containers schrumpfen. Wenn nicht genügend Platz vorhanden ist, schrumpfen wir alle um die gleiche Rate. Oder wird einer von ihnen mehr schrumpfen als die anderen und mehr Platz verlieren? Hier in meinem Code-Editor muss ich jetzt Elemente flexen. Sie können sehen, die Breite von jedem ist 300 Pixel. Und ich habe die Anzeigeeigenschaft des Containers auf Flex festgelegt. Sie können auch sehen, dass wir freien Platz hier haben. Im letzten Video haben wir diesen freien Raum unter den Elementen verteilt, die die Flex Grow Eigenschaft verwenden. Aber jetzt, wenn ich voran gehe und meinen Browser verkleinere bis es keinen freien Speicherplatz mehr gibt und eines der beiden Elemente inspiziere. Also lass uns mal sehen. Es ist seltsam. Sie können sehen, die ersten Elemente mit etwa 300 Pixel und das zweite Element mit ist auch etwa 300 Pixel. Wenn ich nun meinen Browser weiter verkleinere, können Sie sehen, dass die Elemente jetzt auch schrumpfen. Ihre Breite beträgt jetzt weniger als 300 Pixel, da die Breite des Browsers selbst weniger als 600 Pixel beträgt und die Elemente nicht verarbeiten können, sodass sie schrumpfen. Aber das Interessante ist, dass beide Elemente um den gleichen Wert schrumpfen. heißt, wenn ich jetzt die Breite überprüfe, haben sie die gleiche Breite. Und das passiert standardmäßig. Aber was, wenn wir das ändern wollen? Was ist, wenn wir die zweiten Elemente schrumpfen lassen wollen? Sagen wir mal zehnmal mehr als das erste. Nun, wir können dies mit der Flex-Schrumpfeigenschaft tun. Wenn ich hier zum zweiten Element gehe und Flex Shrink 10 hinzufüge, sehen Sie bereits, dass das zweite Element viel mehr schrumpft als das erste. Das bedeutet, dass viel mehr Platz im Vergleich zum ersten verloren geht. Lassen Sie uns das löschen und gehen Sie zum allgemeinen Flex-Element-Selektor und sagte Flex zu einem schrumpfen. Sie können sehen, dass sie sich jetzt wie zuvor verhalten und um den gleichen Betrag schrumpfen, was uns sagt, dass einer der Standardwert für Flex-Schrumpfung ist. Lassen Sie uns versuchen, 0 und sehen, was wir bekommen. Sie können sehen, dass die Elemente in unserem Überlauf aus dem Behälter, der uns verkauft, dass 0 die Elemente zwingt, nicht unter seine Breite zu schrumpfen. Aber lassen Sie uns etwas anderes versuchen. Gehen wir zu unserem Behälter und setzen Flex Wrap zu wickeln. Aber hier passiert etwas Interessantes. Die Elemente werden nun in die nächste Zeile eingewickelt und ragen nicht mehr aus dem Container heraus. Und ehrlich gesagt verwende ich diese Methode immer in meiner Arbeit, weil ich die meiste Zeit nicht möchte, dass meine Elemente unter eine bestimmte Breite schrumpfen, aber ich möchte, dass sie in die nächste Zeile fallen, wenn sie nicht genug Platz haben. Dies ist sehr praktisch, vor allem, wenn es um Responsive Design geht. Um Dinge zusammenzufassen, wird die flex shrink Eigenschaft verwendet, um zu steuern, wie die Flusselemente relativ zueinander innerhalb des Containers verkleinern, wenn sie nicht genügend Platz haben. Es wird auf das Flex-Element selbst angewendet, genau wie die flex grow -Eigenschaft und sein Standardwert eins ist, was bedeutet, dass alle Elemente um den gleichen Wert verkleinern. Aber wir können dieses Standardverhalten ändern. Wir können zum Beispiel ein bestimmtes Element zweimal mehr verkleinern als die anderen, indem Sie einfach die Eigenschaft It's shrink auf zwei setzen. Wir können auch zwingen, dass die Elemente nicht unter eine bestimmte Breite schrumpfen , indem Sie einfach ihre Flex-Schrumpfung auf 0 setzen. Alles klar, alle, das ist es für diese Lektion. Ich hoffe, Sie verstehen jetzt, was Flex Shrink tut, und ich werde Sie in der nächsten sehen. 14. 14 Flexbasis: Hallo an alle. In dieser Lektion werden wir über die Flex-Basis-Eigenschaft sprechen. Also lasst uns anfangen. Okay, also ist die Flex-Basis der Width-Eigenschaft sehr ähnlich. Es definiert im Grunde die anfängliche Hauptgröße des Elements, bevor ein verbleibender Raum verteilt wird. Wenn Sie zum Beispiel die Flex-Basis eines Flex-Elements auf setzen, sagen wir 100 Pixel. Du sagst nur zum Browser, hey, solange noch genügend Platz im Flex-Container übrig ist, möchte ich, dass diese Flex-Elemente mit bei 100 Pixeln beginnen und trotzdem als das sein. Und es wird in Pixelprozentsätzen in allen Werten ausgedrückt , die Sie für die reguläre Width-Eigenschaft verwenden würden. Also zurück zu unserem Code-Editor. Wenn ich die Flex-Basis für dieses zweite Element auf 300 Pixel setze, sehen Sie, dass die Breite erhöht wird. Und wenn ich es inspiziere, werden Sie sehen, dass seine Breite jetzt 300 Pixel beträgt. Aber wenn ich mein Fenster verkleinere, können Sie sehen, solange genug Platz ist, die Breite wird gleich sein. Aber wenn ich diesen Punkt erreiche, an dem nicht genug Platz ist und dann weiter schrumpfen, werden Sie sehen, dass das div zu schrumpfen beginnt. Flex Basis teilt dem Browser mit, die Breite dieses Elements bei einer bestimmten Breite zu starten , wenn es einen verfügbaren Platz gibt. Aber wenn es nicht gibt, schrumpfen Sie es einfach, es sei denn, Sie sagten, dass Flex auf 0 schrumpfen. Okay, lassen Sie uns diese beiden Codezeilen entfernen. Wir. 15. 15-Schnittansicht und Startdateien: Hallo an alle, willkommen in diesem neuen Abschnitt des Kurses. In diesem Abschnitt werden wir anfangen, Flexbox zu realen Beispielen zu verwenden. Wir werden diese beiden ansprechenden Menüs mit einigen der Flexbox-Eigenschaften erstellen , die wir in den vorherigen Videos gelernt haben. Schauen wir uns die Startdateien für diesen Abschnitt an. Sie können hier sehen, wir haben die nackten Knochen für jedes HTML-Dokument. Wir haben hier einen Titel. Dann habe ich hier unsere Stylesheet-Datei eingebaut. Also werden wir unsere Stile in dieser Datei hinzufügen. Ich habe auch einen CDN-Link für die Font Awesome Bibliothek hier, da wir einige Symbole in unserem zweiten Menü verwenden werden. Ich habe auch die Google-Schriftarten direkt hier aufgenommen. Ich habe das alles getan, weil ich davon ausgehe, dass Sie mit all dem vertraut sind und ich Ihre Zeit nicht verschwenden wollte, damit Sie all diesen Code schreiben. Dann habe ich direkt hier innerhalb des body-Tags einen Header hinzugefügt und darin ein div mit der Klasse zentriert. Diese Klasse zentriert nur alle Elemente darin. Dann habe ich diese Überschrift direkt hier hinzugefügt. Und dann unten haben wir dieses Haupt-Tag, das die Menüs enthalten wird. Und wenn ich zu meinem CSS gehe, können Sie einige CSS-Dateien enthalten sehen. Diese Dateien sind nur verantwortlich für allgemeine Stile, um alles besser aussehen zu lassen. Wenn ich mir diese HTML-Datei in meinem Browser anschaue, können Sie sehen, dass wir nur die H1-Überschrift hier haben. In Ordnung, damit Sie die Start-up-Dateien herunterladen können, nachdem Sie diese Vorlesung gesehen haben, und wir können beginnen, unser erstes Menü gemeinsam in der nächsten Lektion zu erstellen. 16. 16 erstelle ein einfaches Menü mit Flexbox: Hallo an alle. In dieser Lektion werden wir unser erstes Menü mit Flexbox erstellen. Also lasst uns anfangen. In Ordnung, zuerst werden wir das HTML-Markup des Menüs erstellen. Also werde ich hier gehen und einen Abschnitt mit einer Klasse von Menüabschnitt hinzufügen. Und darin werde ich ein H2 mit einer Klasse von Menüüberschrift hinzufügen. Und wir sagen einfach einfaches Menü. Hallo, Diese H2, wir werden ein nav Tag hinzufügen, um eine Klasse von einzelnen nav hinzuzufügen, so dass wir flexbox in diesem Menü verwenden können, indem wir diese Klasse ausgerichtet und geben ihm eine Klasse von Menü. Damit wir unsere allgemeinen Stile für alle Menüs hinzufügen können, indem wir diese Klasse anvisieren. Alles klar, in diesem Navi werden wir U, L, dann LI darin und einen Anker-Tag hinzufügen dann LI darin . Und wir werden das kopieren und siebenmal einfügen. Und sagen zu Hause Dienstleistungen, Zeugnisse, Portfolio, Blog über und Kontakt. Sie können hier sehen, wir haben unsere Speisekarte. Gehen wir zurück zu unserem CSS und beginnen, es zu stylen. Ich werde die Menüabschnittsklasse anvisieren. Dann werde ich Padding unten zu EM hinzufügen, dann Rand unten zu EM auch. Und darunter werden wir die UL anvisieren. Also sagen wir Menü UL und fügen List-Style-Typ keine hinzu, so dass wir die Kugeln loswerden können und dann 0 auffüllen und dann Marge 0. Und dann werden wir die Hintergrundfarbe dieser URL auf diese schöne graue Farbe setzen. In Ordnung, jetzt wollen wir die Anker-Tags unseres Menüs anvisieren. Ich werde Textdekoration auf keine setzen. Und dann werde ich seine Farbe auf diese schöne dunkelgraue Farbe setzen. Und darunter werde ich eine Polsterung von 0,6 m oben und unten hinzufügen, One E M auf der linken und rechten Seite. Und dann werde ich seine Anzeigeeigenschaft auf Blockierung setzen und den Übergang auf alle 0,5 Sekunden und Leichtigkeit einstellen. Und jetzt können Sie sehen, ein Menü sieht viel besser aus. Aber lassen Sie uns einige schöne weiße Hintergrundfarbe hinzufügen. Wenn wir den Mauszeiger über die Links zurück zu unserem CSS bewegen, werde ich die Anker-Tags erneut anvisieren. Und wenn wir mit der Maus darüber fahren, wollen wir die Hintergrundfarbe auf diese schöne weiße Farbe setzen. Lassen Sie uns auch einige Stile zum H2 hinzufügen. Also werde ich das Menü Überschriftenklasse ausrichten und Schriftgröße zu E, m und Schriftgewicht normal hinzufügen . Jetzt sieht unsere Speisekarte auf mobilen Geräten gut aus. Die Links sitzen schön untereinander. Also werden wir es so auf kleineren Bildschirmen lassen. Aber auf breiteren Bildschirmen möchten wir flexbox verwenden, um unser Menü wie unsere Demo aussehen zu lassen. Daher werden wir Medienabfragen verwenden, um breitere Bildschirme zu zielen. Und dann werden wir Flexbox verwenden, um unser Menü zu ändern. Also lasst uns das wirklich machen. Lassen Sie uns zu unserem CSS gehen und wir werden beginnen, indem wir eine Medienabfrage definieren , wenn der Bildschirm breiter als 600 Pixel ist. Und innerhalb dieser Medienabfrage werden wir ein einzelnes nav UL Ziel und ändern die Anzeigeeigenschaft zu flex. Und genau so haben wir unsere Listenelemente horizontal angezeigt und wir haben ein Menü, das richtig angelegt ist. Jetzt, da wir dieses Layout haben, können wir es auch mit Flexbox ändern. Beispielsweise sind alle Listenelemente jetzt nach links ausgerichtet. Was ist, wenn wir sie stattdessen nach rechts ausrichten wollen? Sie erinnern sich, dass der Standardwert für den Flexfluss Zeile ist, was bedeutet, dass die Hauptachse standardmäßig horizontal ist. Und Sie erinnern sich auch, dass, wenn wir die Ausrichtung von Elementen entlang der Hauptachse steuern möchten , wir die Eigenschaft „Begründung Inhalt“ verwenden würden. Also, um unsere Listenelemente horizontal zu steuern und sie am Ende des Containers auszurichten. Zum Beispiel verwenden wir die Eigenschaft „Begründung Inhalt“. Also gehen wir zurück zu unserem CSS. Und unter diesem Display flex, werden wir justify Inhalt auf flex end setzen. Und jetzt haben wir alle unsere Menüpunkte nach rechts ausgerichtet. Lassen Sie uns nun mit den Werten des Begründungsinhalts spielen. Gehen wir zu unserem CSS und versuchen Zentrum. Stattdessen. Sie können sehen, dass es jetzt die Listenelemente zentriert. Aber jetzt gibt es eine wichtige Sache. Wir müssen sicherstellen, dass unsere Speisekarte voll ansprechbar ist. Und das bedeutet, wenn der Bildschirm klein genug wird, müssen wir sicherstellen, dass unsere Menüpunkte richtig herunterfallen. Zum Beispiel, wenn ich mit der rechten Maustaste auf ein Element klicke und gehe zu inspizieren Element und ändere die Bildschirmbreite. Sie können sehen, dass unsere Artikel zerquetscht werden weil ihr Behälter nicht genug Platz für sie hat. Ich denke, du erinnerst dich daran, was wir in diesem Fall tun sollten? Ja. Wir sollten die Flex Wrap unseres Behälters einwickeln. Also gehen wir zu unserem CSS und ich werde flex wrap hinzufügen, wrap. Und jetzt können Sie sehen, dass unsere Menüpunkte in die nächste Zeile umgebrochen werden , wenn der Container nicht genug Platz für sie hat. Lassen Sie uns nun weiter mit der Eigenschaft „Begründung Inhalt“ spielen. Lassen Sie uns zurück zu unserem CSS und ich werde den rechtfertigen Inhalt in Raum ändern. Und jetzt können Sie sehen, dass wir gleiche Leerzeichen zwischen unseren Menüpunkten haben. Lassen Sie uns auch Raum zwischen. Und es ist auch trennt die Elemente mit gleichen Leerzeichen zwischen ihnen. Sie können sehen, dass hier ein leerer Raum zwischen den Elementen ist , auf die ich nicht klicken kann. Aber was, wenn ich das nicht will? Was haben Sie? Ich möchte keine Leerzeichen zwischen den Elementen. Das heißt, ich möchte, dass sich die Elemente erweitern und diesen freien Raum aufnehmen. Nun, wir können dies tun, indem wir die Flex-Grow-Eigenschaft verwenden. Also gehen wir zurück zu unserem CSS. Wir werden unsere Listenelemente anvisieren und Flex wachsen auf eins setzen, was bedeutet, dass alle Elemente den gleichen Platz vom verbleibenden Platz einnehmen. Dann flex basis auto, was bedeutet, dass die Breite des Elements hängt von ihrem Inhalt ab. Und Flex schrumpfen auf 0. Das bedeutet, dass die Elemente nicht schrumpfen, wenn sie keinen verfügbaren Platz haben, sondern stattdessen auf die nächste Zeile verraten. Und jetzt, wenn ich irgendwo zwischen den Elementen schwebe, können Sie sehen, dass es jetzt keinen freien Speicherplatz gibt, weil die Flex-Grow-Eigenschaft alle Menüelemente zwingt, diesen freien Speicherplatz gleichmäßig zu nehmen , weil wir ihn auf eins setzen. Aber jetzt gibt es hier ein kleines Problem. Sie können sehen, dass der Text selbst innerhalb der Elemente nach links ausgerichtet ist. Das kann leicht behoben werden, indem Sie einfach zu unserem CSS zurückkehren und Text ausrichten auf die Mitte setzen. Also jetzt haben wir ein schön aussehendes, einfaches Menü, das gut aussieht mit Gegenständen gleich verteilt und es gibt keine Lücken zwischen ihnen. Also das ist es für diese Lektion, alle, und ich sehe dich in der nächsten. 17. 17 Erstellung eines erweiterten Menüs mit Flexbox: Hallo an alle. In dieser Lektion werden wir unser erweitertes Menü mit Flexbox erstellen. Also lasst uns anfangen. In Ordnung, also beginnen wir mit dem Erstellen des HTML-Markups. Also algo direkt hier unterhalb des einfachen Menüabschnitts und fügen Sie einen neuen Abschnitt mit einer Klasse von Menüabschnitt hinzu. Und dann unten, dass wir ein H2 mit einer Klasse von Menü Überschrift hinzufügen, und wir werden sagen, Erweiterte Menü. Und dann unten, dass wir ein nav Tag mit einer Klasse von Vance nav und auch eine Klasse von Menü hinzufügen . Und dann fügen wir UL, LI, dann Anker-Tag hinzu. Und dann in diesem Anker-Tag, werden wir ein div mit einer Klasse von Symbol hinzufügen. Und darin werden wir ein I-Tag hinzufügen und ihm eine Klasse von FAS und auch eine Klasse von FIFA Fußball geben. Dies wird also das div sein, das unser Font Awesome Symbol enthält. Und unter diesem div werden wir ein weiteres div hinzufügen und ihm eine Klasse von Text geben. Und drinnen werde ich Football schreiben. Und dann werde ich eine Spannweite hinzufügen und einfach sagen, ist ein großer Sport. Dann kopiere ich das und füge es zweimal ein. Wir werden die Icon-Klasse in F ändern, ein Film. Und wir werden sagen, Filme machen dein Leben besser. Und hier werde ich sagen, Kamera fängt große Momente ein. Also, jetzt gehen wir zu unserem Browser. Sie können sehen, dass wir unsere Speisekarte haben und es sieht schon gut aus, weil die Klassen, die wir auf sie angewendet haben. Sie können hier diesen Menübereich und die Menüklassen sehen , die wir in unserem früheren Video gestylt haben. Werfen wir nun einen Blick auf unser HTML-Markup. Sie können sehen, wir haben ein nav, UL, LI und dann ein Anker-Tag, genau wie unser einfaches Menü. So werden wir die Listenelemente selbst steuern, wie wir es im einfachen Menü getan haben. Das bedeutet, dass wir unsere UL zu einem Flex-Container machen, was bedeutet, dass die Listenelemente es Flex-Elemente sein werden. Dann können wir sie mit Flexbox-Eigenschaften ändern. Nun, wenn Sie in das Anker-Tag schauen, können Sie sehen, dass wir zwei divs haben. Die erste enthält das Symbol und die zweite enthält den Text. Nun fragen Sie sich vielleicht, warum ich sie in zwei separate Divs lege. Warum habe ich sie nicht einfach in ein div gesteckt? Nun, ich habe das getan, weil ich diesen Anker zu einem Flex-Container machen werde. Und dadurch diese beiden Divs Flex-Elemente sein und ich kann sie so steuern, wie ich es will. Wird das in einer Sekunde sehen. Aber jetzt gehen wir zu unserem CSS und machen eine weitere Medienabfrage, wenn die Breite größer als 600 Pixel ist. Und in diesem, werden wir das fortgeschrittene nav UL anvisieren. Stellen Sie die Anzeige auf Flex ein, und stellen Sie dann Flex Wrap auf Daher werden die Listenelemente in die nächste Zeile umgebrochen, wenn sie keinen verfügbaren Speicherplatz haben. Mal sehen, wie es aussieht. Sie können sehen, dass die Listenelemente nun nebeneinander sitzen und nach links schweben. Aber Sie können auch sehen, dass wir auf der rechten Seite einen freien Platz haben, auf den wir nicht klicken können. Und ich denke, Sie wissen, wie wir das in Ordnung bringen können. Das ist richtig. Wir sollten die Flex-Erweiterung der Listenelemente auf eins setzen , damit sie sich erweitern und den verbleibenden Platz gleichmäßig einnehmen. Gehen wir also zu unserem CSS und zielen Sie auf unsere Listenelemente. Dann setzen Flex wachsen auf eins. Lassen Sie uns auch die Flex-Basis auf 220 Pixel setzen. Nun, das ist ein Wert, den ich für unsere Inhalte geeignet gefunden habe. Also möchte ich, dass die Menüpunkte bei dieser Breite beginnen. Lassen Sie uns auch Flex Shrink auf 0 setzen, damit unsere Artikel nicht unter 220 Pixel verkleinern. Und jetzt können Sie sehen, dass die Artikel gut aussehen und sie reagieren. Wenn ich also ein Element inspiziere und wenn ich meinen Browser mehr verkleinere, können Sie sehen, dass er gut zur nächsten Zeile rastet und nicht unter 220 Pixel schrumpft , weil wir Flex Shrink auf 0 setzen. Und wenn ich den Browser mehr unter 600 Pixel verkleinere, werden die Elemente auf eine schöne Weise untereinander gestapelt. Und das wird auf mobilen Geräten gut aussehen. Aber jetzt lasst uns weiter arbeiten. Wenn wir einen Blick auf unsere Demo werfen, können Sie sehen, dass wir unser Icon nach links und den Text auf der rechten Seite schweben, wie folgt. So können wir dies einfach mit Flexbox tun. Du erinnerst dich daran, dass wir zwei divs innerhalb des Anker-Tags haben. eine enthält das Symbol und das andere enthält den Text. Um sie zu steuern, sollten wir die Anzeigeeigenschaft des Ankers auf Flex setzen. Gehen wir zu unserem CSS und lassen Sie uns das Anker-Tag anvisieren und sagen Display flex. Sie können das Symbol sehen, und der Text wird horizontal ausgerichtet. Aber wir wollen ein wenig Abstand zwischen ihnen. Wir können dies mit regulären Rändern oder Padding tun, aber wir tun es mit Flexbox. Also gehen wir zu unserem CSS und zielen auf das div, das das Symbol enthält. Und dann fügen Sie Flex Basis 60 Pixel, zum Beispiel. Und lassen Sie uns auch eine Schriftgröße von 35 Pixeln hinzufügen. Und Sie können sehen, dass das schon gut aussieht. Wenn wir einen Blick auf unsere Demo werfen, können Sie sehen, dass dieses Wort größer ist und dieser Text darunter gesetzt ist. Also lasst uns das machen. Gehen wir zu unserem HTML. Sie können sehen, wir haben diesen Text div, und innerhalb davon eine Spanne, die diesen Text enthält. Gehen wir also wieder zu unserem CSS und zielen Sie auf das Text-div. Legen Sie dann die Schriftgröße auf 25 Pixel fest. Und es ist Schriftgewicht fett. Lasst uns nun die Spanne in ihr anvisieren. Setzen Sie seine Anzeigeeigenschaft zu blockieren, so dass es unten fällt, sind große Worte. Legen Sie dann die Schriftgröße auf 15 Pixel fest. Dann fügen Sie Schriftgewicht leichter hinzu. Wenn Schriftart kursiv. Und da hast du es. Und erweitertes Menü, das auf Breitbildschirmen gut aussieht. Und wenn Sie zu schmaleren Bildschirmen gehen, wickelt es schön. Und wenn Sie auf mobile Geräte gehen, sieht es schön und eng aus. 18. 18 Übersicht über unser endgültiges Projekt: Hallo an alle. Willkommen in diesem neuen Abschnitt des Kurses, in dem wir unser Projekt erstellen und versuchen, alle Flexbox-Eigenschaften zu verwenden, die wir in den vorherigen Abschnitten gelernt haben. Also hier haben wir unser endgültiges Projekt, und hier ist der Header. Wir lernen, wie Sie diesen Inhalt einfach vertikal zentrieren können. Und auch, wie man das Menü vertikal an das Ende der Kopfzeile schiebt , wird all das mit Flexbox erledigen. Als nächstes haben wir unseren Abschnitt Beiträge. Sie können sehen, wir haben zwei Beiträge, dann drei Beiträge. Und dann der letzte Beitrag, der die volle Breite des Inhaltsbereichs einnimmt. Und Sie können sehen, dass die Spalten in jeder Zeile gleich hoch sind , auch wenn der Inhalt anders ist. Mit Flexbox werden wir dieses Layout erreichen. Darunter haben wir die Uhr heute Abschnitt mit dem Bild auf der einen Seite und dem Inhalt auf der anderen Seite. Wir werden lernen, wie Sie die Reihenfolge der Elemente auf unserer Seite ändern, ohne den Quellcode zu ändern. Und das machen wir hier in dieser zweiten Karte. Wenn Sie einen Blick darauf werfen, können Sie sehen, dass sich der Inhalt auf der linken Seite und das Bild auf der rechten Seite befindet. Aber im Quellcode oder in der HTML-Seite kommt das Bild zuerst und dann der Inhalt. So werden wir lernen, wie sie ihre Reihenfolge mit Flexbox ändern ist Bestelleigenschaft. Dann haben wir den Download-Bereich. Sie können sehen, dass es dieses wirklich komplexe Layout hat, wobei das Bild die ganze Breite einnimmt. Dann der Inhaltsabschnitt darunter, mit diesen drei divs nebeneinander. Sie können auch sehen, dass das zweite div hier mehr Breite hat als die anderen. Aber mit Flexbox wird dieses Layout leicht zu bauen. Danach haben wir unsere Bildergalerie mit diesem kreativen Layout, das horizontale Mauerwerk Layout genannt wird. Sie können sehen, dass die Bilder Zufallswerte für die Breite haben, aber sie haben die gleiche Höhe. Und wenn wir auf ein Bild klicken, erscheint es schön in einem Box-Modell. Und wir können durch die Bilder navigieren, indem wir einfach die Tastaturpfeile drücken. Und dann haben wir unsere einfache Fußzeile hier. Hier drüben auf der rechten Seite. Wir haben unsere Sidebar mit einigen netten Widgets. Es hat die gleiche Höhe wie der Inhaltsbereich. Zum Beispiel, wenn ich ein wenig nach unten scrolle, können Sie sehen, dass, obwohl es keinen Inhalt mehr in der Seitenleiste gibt, es immer noch seine Höhe behält und der andere Inhalt immer noch nach links verschoben wird. Das nennen wir das Layout des Heiligen Grals. So lernen wir, wie man das mit Flexbox mit nur etwa drei oder vier Zeilen CSS-Code macht. Lassen Sie uns nun einen Blick auf die Startdateien für unser Projekt werfen. Ich habe den Projektordner hier auf meinem Desktop. Also, wenn ich es öffne, können Sie sehen, wir haben unsere HTML-Datei namens index, und wir haben unsere style.css Datei hier in diesem Ordner. Und auch wir haben alle unsere Bilder hier in diesem Bilderordner. Und wir haben einen JS-Ordner. Und darin haben wir die jQuery-Bibliothek und eine Datei namens main.js. Also, wenn wir diese Dateien in unserem Code-Editor öffnen, hier ist unsere index.html Datei. Sie können genau wie der Menüabschnitt sehen, es hat einige grundlegende HTML. Es hat den Titel hier, dann die Google Fonts und dann die Font Awesome Bibliothek. Und dann endlich unser Stylesheet. Darunter haben wir die jQuery-Bibliothek und die Datei main.js vor dem Schließen des body-Tags enthalten . Und natürlich ist unser Stylesheet hier leer. Also fangen wir alles von Grund auf an. Stellen Sie also sicher, dass Sie die Startdateien herunterladen, starten Sie Ihren Code-Editor. Und wir sehen uns in der nächsten Vorlesung, wo wir dasLayout des Heiligen Grals unseres Projekts mit, Sie haben es erraten, Flexbox erstellen Layout des Heiligen Grals unseres Projekts mit, werden. 19. 19 Aufbau des holygrail: Hallo an alle. In dieser Lektion werden wir das Layout des Heiligen Grals unseres Projekts erstellen. Also lasst uns anfangen. Also zuerst werden wir genau hier nach dem body-Tag gehen und ein div hinzufügen und ihm eine Klasse von äußerem Wrapper geben. Jetzt wird dies der äußere Container sein, der alle Abschnitte innerhalb unserer Seite enthält. Und darin werden wir einen Header hinzufügen und ihm eine Klasse von Site-Header geben. Und darin werden wir ein H1-Tag hinzufügen und ihm eine Klasse von Website-Titel geben. Und wir sagen einfach Kopfzeile. Und unter diesem Header werden wir ein div mit einer Klasse von Inhaltsbereich hinzufügen. Dies wird also der Container sein, der unseren Hauptinhaltsbereich enthält, sowie unsere Sidebar. Und darin werden wir ein Haupt-Tag hinzufügen und ihm eine Klasse von Hauptinhaltsbereich geben. Dieses Haupt-Tag enthält unsere Artikel und so weiter. Und dann ein H1-Tag und sagen Sie zum Beispiel, der Hauptinhalt geht hier. Und danach werden wir einige temporäre Inhalte direkt hier innerhalb einiger p-Tags hinzufügen . Und dann unter diesem Haupt-Tag werden wir ein div hinzufügen und ihm eine Klasse von Sidebar geben, richtig? Und innerhalb davon werden wir H1 hinzufügen und sagen, Sidebar geht hier. Und darunter werden wir einige Dummy-Inhalte für die Anzeige innerhalb eines p-Tags hinzufügen. In Ordnung, lassen Sie uns unsere Fußzeile hinzufügen. Also werde ich voran gehen und ein Fußzeilen-Tag hinzufügen und ihm eine Klasse von Site-Fußzeile geben. Und darin werden wir H1 hinzufügen und einfach Fußzeile sagen. In Ordnung, lassen Sie uns das in unserem Browser sehen. Hier ist also die Kopfzeile oben und dann der Hauptinhalt hier, die Seitenleiste darunter und die Fußzeile unten. Aber jetzt lassen Sie uns etwas Stil hinzufügen, damit wir sie besser sehen können. Zurück zu unserem CSS. Ich werde einige Stile bezahlen und sie Ihnen erklären. Es gibt also einige Basisstile. Ich habe den Körper, die Schaltflächen, die Eingaben und die Textbereicheverschachtelt die Eingaben und die Textbereiche und dann nur einige grundlegende Stile hinzugefügt. Sie können sehen, die Farbe ist schwarz. Die Schriftfamilie ist unsere Schrift. Die Schriftgröße beträgt 16 Pixel und die Zeilenhöhe wird auf 1,8 festgelegt. Und darunter habe ich dem Körper einige Stile hinzugefügt. Sie können sehen, ich habe diese schöne graue Farbe hinzugefügt, hat eine Hintergrundfarbe. Legen Sie den Rand auf 0 fest, und legen Sie dann die Schriftfamilie auf unsere Schriftart fest. Nun tun Sie das, wir werden die Kopf- und Fußzeile Ziel. Fügen Sie Hintergrundfarbe grün und Höhe 100 Pixel für jetzt. Dann werden wir die Seitenleiste Ziel und fügen Hintergrundfarbe blau und Farbe weiß. Und dann unten werden wir das H1-Tag anvisieren und die Farbe auf Rot setzen. Und wir werden die Marge auf 0 setzen. Dann werde ich auch das p-Tag anvisieren und ihm eine Marge von 0 geben. Werfen wir einen Blick. Sie können sehen, dass es jetzt schöner aussieht. In Ordnung, also auf Breitbildschirmen wollen wir, dass eine Seitenleiste eine Spalte auf der rechten Seite ist, genau hier. Was wir also tun können, ist, dass wir den Container, der sowohl den Hauptinhaltsbereich als auch die Seitenleiste enthält, zu einem Flex-Container machen können . Zurück zu unserem HTML können Sie sehen, dass das div mit der Klasse des Inhaltsbereichs das ist, das wir wollen. Gehen wir also zu unserem CSS, erstellen Sie eine neue Rolle, wenn die Bildschirmbreite größer als 1, 0, 0, 0, 0, 120 Pixel ist . Und ich werde den Inhaltsbereich ausrichten und seine Anzeigeeigenschaft auf flex festlegen. Und genau so haben wir den Hauptinhaltsbereich auf der linken Seite und unsere Seitenleiste auf der rechten Seite. Und wenn wir unseren Browser verkleinern, sehen Sie, wenn ich unter hundert, einhundertzwanzig Pixel gehe , fällt die Seitenleiste unter den Hauptinhaltsbereich. Und wenn Sie hier schauen, können Sie sehen, dass die Seitenleiste und der Hauptinhaltsbereich die gleiche Höhe haben, auch wenn der Inhalt anders ist. Und genau darum geht es im Heiligen Gral. Alles klar, jetzt, lasst uns weiter arbeiten. Sie können sehen, dass die Seitenleiste hier zu viel Platz einnimmt, also möchte ich ihre Breite ein wenig verringern. Er erinnert sich, dass durch die Definition des Flex-Containers jetzt die Sidebar ein Flex-Element ist und wir Flexbox-Eigenschaften darauf verwenden können. Gehen wir also zu unserem CSS und zielen Sie auf unsere Sidebar. Und sagte, es ist Flex-Eigenschaft auf 0, was bedeutet, dass es nicht wachsen wird. Dann 0 bedeutet, dass es nicht unter eine bestimmte Breite schrumpft, die 320 Pixel beträgt. Und jetzt siehst du, dass es besser aussieht. Und das ist es für diese Lektion, wir haben unser Holy Gral Layout erstellt, und jetzt sind wir bereit, jeden Abschnitt unserer Seite einzeln zu erstellen, aber wir werden das als nächstes tun. 20. 20 Aufbau unseres Header: Hallo an alle. In dieser Lektion werden wir unseren Header erstellen und stylen. Also, wie immer, lasst uns anfangen. In Ordnung, also zurück zu unserem HTML. Hier innerhalb des Header-Tags werde ich ein div hinzufügen und ihm eine Klasse von Site-Info geben. Dann werde ich das H1-Tag hineinschieben. Und darunter werden wir ein Absatz-Tag mit einer Klasse von Website-Beschreibung hinzufügen. Und wir werden unsere Website-Beschreibung hier hinzufügen. Und unter dem Website-Info div, werden wir unser Menü hinzufügen. So werden wir ein nav Tag mit einer Klasse von Hauptmenü hinzufügen. Und wir werden einfach sagen, die Speisekarte würde hier vorerst gehen. Okay, schauen wir uns das im Browser an. Alles klar, Lassen Sie uns weiter zu unserem CSS arbeiten. Also hier zwischen unseren Kommentaren werden wir anfangen, den Header zu stylen. Also werde ich den Site-Header anvisieren und seine Höhe auf 400 Pixel setzen. Sehen wir uns das an. Jetzt können Sie sehen, wir haben das div mit der Klasse der Website-Info, die den Site-Header und die Website-Beschreibung enthält. Und darunter haben wir das div mit der Klasse des Hauptmenüs, das unser Menü hält. In Ordnung, jetzt wollen wir, dass unsere Speisekarte bis zum Ende des Containers hier geschoben wird. Wir können dies ganz einfach mit Flexbox tun. Wir können den Container zu einem Flex-Container machen und dann den Flexfluss auf Spalte setzen , so dass die Elemente untereinander bleiben und ihre Höhe vom Inhalt abhängt. Und dann setzen Sie das Flex-Wachstum der Website-Info auf nur eine. Dass es sich vertikal ausdehnt und den ganzen Raum einnimmt und sie bis zum Ende des Behälters hinunter schiebt. Also gehen wir zu unserem CSS und tun das. Ich werde hierher kommen und Display Flex hinzufügen, dann Flex Flow Spalte. Dann werde ich das Site-Info div anvisieren und flex wachsen auf eins setzen. Sie erinnern sich, dass, wenn ich flex hinzufüge, nur eins zu einem einzelnen Flex-Element wachsen und nicht zu den anderen. Dadurch wird der gesamte verbleibende Platz des Containers in Anspruch genommen. Das Site-Info-div wird also vertikal wachsen das Menü an das Ende des Containers schieben. Und genau so können Sie sehen, dass das Menü den ganzen Weg bis zum Ende des Containers geht. Lasst uns weiter arbeiten. Wir werden unser Projekt in einem mobilen ersten Ansatz entwerfen, was bedeutet, dass wir es so gestalten, als ob wir es auf einem mobilen Gerät betrachten. Und dann werden wir Medienabfragen erstellen und die Änderungen, die wir wollen, auf breiteren Bildschirmen hinzufügen. Also werde ich den Website-Titel hier anvisieren und einige Stile hinzufügen. Ich werde Marge 0, Schriftgröße zu em hinzufügen . Schriftstärke 300, Text zentriert ausgerichtet. Farbe, weiß. Und Text transformieren Großbuchstaben. Sie können sehen, dass es schöner aussieht. Jetzt zurück zu unserem CSS. Wir werden die Website-Beschreibung zielen und Text ausrichten Mitte hinzufügen, dann seine Farbe auf diese schöne gelbe Farbe ändern. Und Schriftgröße 1,2 M. Dann Rand oben minus 0,8, so dass es enger wird. Dann die Schriftart kursiv. Und Sie können sehen, dass es besser aussieht. Lasst uns weitermachen. Ich werde unsere Speisekarte anvisieren. Dann fügen Sie etwas Polsterung hinzu. Ein EM von oben und unten und ein E M von links und rechts auch. Dann werde ich Farbe schwarz hinzufügen, dann haben die Hintergrundfarbe unser Gelb richtig. Jetzt möchten wir, dass der Site-Titel auf breiteren Bildschirmen größer wird. Also zurück zu unserem CSS. Ich werde eine neue Rolle für Breitbildschirme erstellen. Dann werde ich den Website-Titel ausrichten und die Schriftgröße auf vier setzen. Sie können sehen, dass es jetzt größer ist. Und wenn ich zu kleineren Bildschirmen gehe, wird es kleiner sein. Nun möchten wir unseren Website-Titel und eine Website-Beschreibung vertikal zentrieren. Wir können dies mit vielen verschiedenen Dingen tun, aber wir werden Flexbox verwenden. Sie können sehen, sowohl der Titel als auch die Beschreibung sind mit der Website info div enthalten. So können wir die Website-Informationen als Flex-Container anzeigen und die Flex-Flow-Spalte machen und dann den Inhalt mit der Eigenschaft „Justify Content“ zentrieren. Wenn ich also zu meinem CSS gehe und das Site-Info-Div anvisiere, setze seine Anzeigeeigenschaft, die Flags, dann die Flex-Flussspalte und richte dann das Inhaltscenter aus. Und jetzt können Sie sehen, dass es perfekt zentriert ist. Und denken Sie daran, rechtfertigen Inhalt ist eine Hauptachseneigenschaft. Und die Hauptachse hier ist vertikal, weil der Flexfluss Säule ist. Gehen wir nun zu unserem CSS und ändern Sie den grünen Hintergrund in schwarz, so dass es unserem Design entspricht. Sehen wir uns jetzt an, was wir mit Flexbox gemacht haben. Zuallererst sind das Menü und die Site-Info divs in einem äußeren div mit einer Klasse von Site-Header enthalten. Wir haben diesen Site-Header als Flex angezeigt und es zu einer Spalte gemacht. So stapeln sich die Elemente untereinander. Dann setzen wir das Flex-Wachstum der Website-Info auf eins , so dass es erweitert und den verbleibenden Platz des Containers einnimmt. Dann mussten wir den Inhalt vertikal zentrieren. Also machten wir es zu einem Flex-Container und sagten, es ist Flex-Fluss zur Spalte und zentrierten dann seinen Inhalt mit Begründung Content-Center. Und das war's. Wir haben unseren Header mit Ausnahme unseres Menüs beendet. Das werden wir später beenden. Aber vorerst ist dies für diese Lektion und wir werden weiter untersuchen, was Flexbox in den nächsten Videos für uns tun kann. 21. 21 Aufbau und Styling unseres Posts: Hallo an alle. In dieser Lektion werden wir mit der Arbeit an der Post Abschnitt beginnen. Also lasst uns anfangen. In Ordnung, also werden wir damit beginnen, diesen Dummy-Inhalt zu entfernen. Wir brauchten es nur, um die Dinge zu testen. Und dann werde ich beginnen, indem ich einen Abschnitt hinzufüge und ihm eine Klasse von Beiträgen gebe. Und darin werde ich einen Artikel hinzufügen und ihm zwei Klassen geben, posten und posten die Hälfte. Also die Klasse Post Hälfte bedeutet, dass dieser Artikel wird die Hälfte des Raumes unseres Hauptbereichs nehmen. Alles klar, jetzt fügen wir ein Anker-Tag hinzu. Und darin werden wir ein div hinzufügen. Und wir werden unser Bild in dieses div setzen. Also werde ich unser erstes Bild hier hinzufügen. Und unter dem Image div werden wir ein weiteres div mit einer Klasse von Post-Inhalten hinzufügen. Und innerhalb davon werden wir ein H2-Tag hinzufügen. Das wird also der Titel des Beitrags sein. Dann unten werden wir ein p-Tag hinzufügen und einige Lorem-Text darin hinzufügen. Sehen wir uns das an. Sie können sehen, wir haben unser Bild, dann unseren Titel, und dann den Inhalt. Okay, lassen Sie uns weiterhin unsere Beiträge zurück zu unserem HTML hinzufügen. Ich werde diesen Artikel kopieren, ihn erneut einfügen, und wir werden einfach das Bild und den Alt-Text hier ändern und dann auch den Titel ändern. Nun nehmen diese beiden Beiträge die Hälfte des Platzes des Hauptinhaltsbereichs ein. Wir werden tun, dass mit Beiträgen haben Klasse genau hier. Und diese Postklasse wird für die allgemeinen Stile aller Beiträge verantwortlich sein. In Ordnung, darunter werden wir unseren Artikel dreimal nochmals einfügen. Und wir werden die Klasse der Beiträge ändern, müssen 1 Drittel für diese drei Artikel zu posten. Und wir werden auch die Bilder und die Titel ändern. So, jetzt können Sie sehen, wir haben unsere drei Artikel mit einer Klasse von Post 1 Drittel zu jedem. Und diese Klasse wird dafür verantwortlich sein, dass jeder dieser Artikel eine Breite von etwa 30 Prozent des Hauptinhaltsbereichs hat. So sitzen die drei Artikel nebeneinander und richten sich aus. Jetzt fügen wir unseren letzten Artikel hinzu. Ich werde den Artikel ein letztes Mal einfügen und Post geändert, um voll zu posten. Ich werde auch das Bild, den Alt-Text und den Titel ändern . Ordnung, also wird dieser Artikel in voller Breite sein. Es wird die gesamte Breite des Hauptinhaltsbereichs einnehmen. Gehen wir zu unserem Browser und sehen Sie sich diese Artikel an. Sie können sehen, dass wir jetzt alle unsere Artikel haben. Also lasst uns anfangen zu stylen. Wir sind zurück zu unserem CSS. Und genau hier zwischen unseren Kommentaren werden wir unseren Hauptinhaltsbereich anvisieren und EM auffüllen. Und jetzt können Sie sehen, dass wir ein wenig Platz haben. Lassen Sie uns die allgemeinen Stile für unsere Beiträge hinzufügen. Ich werde Post-Klasse anvisieren und die Hintergrundfarbe auf Weiß setzen und Rand unten ein, m hinzufügen , damit wir einige Leerzeichen zwischen den Artikeln haben können. Dann werden wir das Anker-Tag in unseren Beiträgen zielen und Farbe schwarz hinzufügen, um diese blaue Farbe zu entfernen. Und Textdekoration, keine, um die Zeile unter dem Text zu entfernen. Text sieht jetzt viel besser aus, aber wir wollen hier einige Leerzeichen. Um dies zu tun, werde ich die Post-Content-Klasse anvisieren und Padding 0 nach oben, 40 Pixel rechts und links und 20 Pixel unten hinzufügen 40 Pixel rechts und links . Sie können sehen, dass es jetzt besser aussieht. In Ordnung, also lasst uns den Post-Header stylen. Ich werde die Kopfzeile unseres Beitrags anvisieren und Hintergrundfarbe hinzufügen, unsere gelbe. Ändern Sie dann die Farbe in Schwarz. Dann Padding 20 Pixel, so dass wir einige Abstände und Text in der Mitte ausrichten. Sie können sehen, dass es gut aussieht. Aber wir möchten, dass dieser gelbe Hintergrund die gesamte Breite des Beitragsinhalts einnimmt, das div aufgrund der 40 Pixelauffüllung rechts und links vom Post-Content-div so aussieht . Damit der gelbe Hintergrund die gesamte Breite einnimmt, können wir dem H2 einen Rand von minus 40 Pixeln hinzufügen. Also zurück zu unserem CSS. Ich werde Rand 0 am oberen minus 40 Pixel rechts und links und 30 Pixel am unteren Rand hinzufügen, um ein wenig Abstand dazwischen zu haben, das p-Tag. Und jetzt können Sie sehen, dass es die ganze Breite einnimmt. Jetzt sind wir fast fertig. Das einzige, was übrig bleibt, ist, dass das Bild des Artikels diese volle Breite in Anspruch nimmt. Also zurück zu unserem CSS. Ich gehe hier unter unsere Basisstile, und ich werde alle Bilder ausrichten und sie als Blockelemente anzeigen. Legen Sie die Breite auf 100% fest. Es nimmt also die volle Breite ein und setzt seine Höhe auf auto. Und jetzt nehmen unsere Bilder die gesamte Breite des Containers ein. Wir haben unsere Beiträge genau so aussehen, wie wir wollen. Das einzige, was noch übrig ist, sie mit Flexbox zu steuern. Und das machen wir in der nächsten Lektion. 22. 22 Füge die Flexbox zu unseren Posts hinzu: Hallo an alle. In dieser Lektion werden wir weiter an unserem Abschnitt Beiträge arbeiten und das Layout mit Flexbox steuern. Also lasst uns anfangen. Alles klar, so haben wir unseren Abschnitt „Beiträge“ verlassen. Sie können sehen, dass jeder Beitrag 100% der Breite einnimmt. Und das ist es, was wir auf mobilen Geräten wollen. Wenn ich zum Beispiel meinen Browser verkleinere, können Sie sehen, dass dies auf mobilen Geräten gut aussieht. Wir sind jetzt, was wir auf mittelgroßen Bildschirmen tun wollen und vergrößern Zeichenbildschirme ist auf mittleren Bildschirmen oder Tablets. Wir möchten, dass jeder einzelne Beitrag die Hälfte des Speicherbereichs des Hauptinhaltsbereichs verwendet , so dass wir zwei Beiträge nebeneinander haben können. Und auf großen Bildschirmen wollen wir, dass die ersten beiden Beiträge in der ersten Reihe sind, dann die folgenden drei Beiträge in der zweiten Reihe sein. Und dann der letzte Beitrag, der die ganze Breite der dritten Reihe aufnimmt. Toll, also gehen wir zurück zu unserem CSS und tun das. Zuerst werde ich eine neue Rolle für mittelgroße Bildschirmgeräte erstellen. Und im Inneren werde ich den Postbereich anvisieren , der alle unsere Beiträge enthält. Und ich werde seine Anzeigeeigenschaft auf flex setzen. So werden alle Beiträge nebeneinander angezeigt. Und dann fügen Sie Flex Wrap Ratte hinzu, so dass die Pfosten in die nächste Zeile umwickeln. Wenn sie keinen freien Speicherplatz haben. Dann werde ich alle Beiträge anvisieren und dann Flex-Basis 49% hinzufügen. Sie können sehen, dass wir jetzt zwei Beiträge auf jeder Zeile haben. Und weil ich die Flex-Basis auf 49 Prozent gesetzt habe, können Sie sehen, dass wir hier leeren Raum haben, was 2% der Hauptinhaltsbereiche mit sind. Nun wollen wir diesen verbleibenden Raum verschieben und ihn zwischen die Pfosten setzen. Also gehen wir zurück zu unserem CSS und gehen Sie zu Beiträgen und fügen Rechtfertigung Inhalt Raum zwischen. Und Sie können jetzt sehen, dass der verbleibende Raum ist genau hier zwischen den Pfosten, die am Ende des Containers mehr. Und das ist das Layout, das wir auf mittleren Bildschirmen wollen. Nun, lassen Sie uns weiter arbeiten, um das Layout zu erreichen, das wir auf breiteren Bildschirmen wollen. Zurück zu unserem CSS. Wir werden eine neue Rolle für breitere Bildschirme hinzufügen. Und wir werden die Posten mit der Klasse der Nachkriegs 1 Drittel anvisieren, und fügen Flex-Basis 32 Prozent hinzu. Dann werden wir die Beiträge mit einer Klasse von Post Hälfte Ziel und fügen Flex-Basis 49%. Und schließlich werden wir die Beiträge mit der Klasse der prahlvollen Flex-Basis auf 100% anvisieren. Und genau so haben wir unsere Beiträge auf größeren Bildschirmen so angelegt, wie wir es wollen. Und wenn wir unseren Browser verkleinern, ändert sich das Layout auf mittleren Bildschirmen und dann auf mobilen Geräten. Und jetzt haben wir unseren Beitrag Abschnitt beendet und wir werden in der nächsten Lektion weiter arbeiten. 23. 23 Aufbau und Styling des watch: Hallo an alle. In dieser Lektion beginnen wir mit dem Bau unserer Uhr heute Abschnitt. Also lasst uns anfangen. In Ordnung, also werden wir gleich hier nach dem Post-Abschnitt anfangen. Wir werden einen neuen Abschnitt mit einer Klasse von Uhr hinzufügen. Und innerhalb dieses Abschnitts werden wir H2 mit einer Klasse von Abschnittsheader hinzufügen. Und wir sagen, heute zu sehen. Und darunter werden wir ein div mit einer Klasse von Watch card hinzufügen. Und darin werden wir ein weiteres div hinzufügen, das das Kartenbild enthält und ihm eine Klasse von Uhrenbild gibt. Und wir werden unser Bild in dieses div setzen. Und darunter werden wir ein weiteres div mit einer Klasse von Watch-Inhalten hinzufügen. Und dieses div wird alle Texte enthalten, die hinzugefügt werden. Also innerhalb dieses div, werden wir ein H2-Tag hinzufügen. Und dann darunter werden wir ein weiteres div mit einer Klasse von Filminformationen hinzufügen. Dieses div wird also alle Informationen über unseren Film enthalten, wie die Filmlaufzeit, das Jahr, in dem es veröffentlicht wurde, seine Kategorie oder ein Genre, und so weiter. Jetzt werden wir fünf Spannweiten innerhalb dieses div hinzufügen. Und nach unserem Watch-Content-Div werden wir ein p-Tag hinzufügen und ihm eine Klasse von Filmgeschichte geben. Und dann werden wir etwas Dummy-Text hinzufügen. Und dann unter diesem p-Tag, werden wir einen Anker-Tag hinzufügen und sagen, lesen Sie mehr. Und dann werden wir dieses Uhrenkartendiv kopieren, es erneut einfügen und dann das Bild ändern. Und wenn wir zu unserem Browser gehen, hier haben wir unsere zwei Karten. Als nächstes wählen wir sie in unserem CSS. Ich gehe hier zwischen den Kommentaren hin. Und ich werde zuerst die Abschnittskopfzeile anvisieren. Fügen Sie dann Farbe Schwarz, Schriftgröße drei, VM hinzu, damit es größer und schöner ist. Und dann Text zentriert ausrichten. Und Sie können sehen, es ist viel besser jetzt, Lasst uns weiter arbeiten. Ich werde das Uhrenkartendiv anvisieren und ihm einen Spielraum von 1 e m geben , so dass wir ein wenig Abstand unter unseren Karten haben können. Dann werden wir unser Watch-Content-Div anvisieren und die Hintergrundfarbe schwarz hinzufügen. Dann Farbe weiß. Und Padding drei VM. Sie können sehen, dass wir uns hier näher kommen. Also lassen Sie uns das Alter anvisieren, um seine Schriftgröße zu setzen, um em zu essen. Und es ist Schriftgewicht auf 300. Und wir werden Marge 0 und Text Transformation hinzufügen, um Großschreibung. Lasst uns weitermachen. Ich werde die Filminfo-Klasse ausrichten und ihre Schriftstärke auf fett festlegen. Dann werden wir die Spannweiten darin anvisieren und Polsterung hinzufügen, richtig? 1.5. Wir werden auch die p-Tags mit der Filmstory-Klasse ausrichten. Und wir werden Rand ein EM am oberen und unteren Rand hinzufügen. Fügen wir nun das Anker-Tag hinzu und ändern Sie seine Farbe in Weiß. Und dann sagte, es ist Schriftgewicht zu fett. Und jetzt haben wir unsere Uhrenkarte, die gut für mobile Geräte aussieht. In der nächsten Lektion lernen wir, wie Sie es auf breiteren Bildschirmen mit Flexbox ändern. So sehen wir uns dann. 24. 24 Füge dem Uhrenbereich hinzu: Hallo an alle. Nach dem Erstellen und Styling unserer Uhr heute Abschnitt für mobile Geräte in der letzten Lektion. In diesem werden wir es für breitere Bildschirme gut aussehen lassen. Und das machen wir mit Flexbox. Also lasst uns anfangen. Also, was wir hier tun wollen, ist, dass das Bild links sitzt und der Inhalt auf der rechten Seite ist. Leicht genug. Und wir haben etwas sehr Ähnliches getan, bevor wir das Layout des Heiligen Grals errichteten. Sie werden sich daran erinnern, dass wir den Hauptinhaltsbereich nach links und eine Seitenleiste auf der rechten Seite schwebten . Also lasst uns das machen. Wir werden neue Regeln für mittlere und große Bildschirme erstellen. Das Layout funktioniert sowohl für die mittleren als auch für die großen Bildschirmgrößen einwandfrei. Und innerhalb dieser Medienabfrage werden wir das Watch Card div anvisieren, seine display-Eigenschaft auf flex setzen. Und genau so können Sie sehen, dass das Bild jetzt auf der linken Seite ist und der Inhalt auf der rechten Seite ist. Aber jetzt wollen wir diesen Inhalt vertikal zentrieren. Gehen wir also zu unserem CSS und zielen Sie auf das Watch-Content-Div ab, das den gesamten Inhalt enthält. Und dann werden wir Display, Flex und Flex Flow Spalte hinzufügen . Und dann natürlich, rechtfertigen Inhalt Center. Sie können sehen, dass der Inhalt jetzt perfekt zentriert ist. Jetzt sieht alles toll aus. Aber wir wollen die Reihenfolge dieses Bildes ändern und es auf die rechte Seite des Containers legen. Wir können dies mit der Bestelleigenschaft tun. Also, wenn ich zu meinem HTML gehe und dem Bild eine Klasse der Bildrate hinzufüge , möchte ich auf der rechten Seite setzen. Und dann gehen Sie zu meinem CSS und zielen Sie dieses Bild, Bild richtige Klasse und setzen Sie seine Order-Eigenschaft auf zwei, so dass es nach dem Inhalt kommen wird. Denken Sie daran, dass alle Flex-Elemente standardmäßig die Reihenfolge 0 haben. Daher wird jeder Artikel, der größer als 0 ist, am Ende der Zeile angezeigt. Und Sie können sehen, dass das Bild jetzt auf der rechten Seite angezeigt wird. Und jetzt haben wir die Uhrenabteilung beendet. Wir werden in den nächsten Videos weiter arbeiten. 25. 25 Bauen und Stylen des the: Hallo an alle. In dieser Lektion beginnen wir mit dem Aufbau des Download-Now-Bereichs. Es wird Spaß machen. Also lasst uns anfangen. Wir werden direkt hier unter dem Uhren-Abschnitt beginnen und einen neuen Abschnitt mit einer Klasse von Download hinzufügen. Und innerhalb dieses Abschnitts werden wir ein H2-Tag mit einer Klasse von Abschnittsheader hinzufügen. Und wir sagen jetzt herunterladen. Und dann unten werden wir ein div mit einer Klasse von Download-Karte hinzufügen. Und innerhalb dieses div werden wir ein weiteres div mit einer Klasse von Download-Bild hinzufügen. Dieses div wird das Bild Container und innerhalb davon wird dieses Bild hinzufügen. Und unter diesem Download-Image div werden wir ein weiteres div mit einer Klasse von Download-Inhalten hinzufügen. Natürlich wird dies den gesamten Inhalt dieses Abschnitts enthalten. Und im Inneren werden wir ein Anker-Tag hinzufügen. Und innerhalb dieses Anker-Tags werden wir eine Spanne hinzufügen und einfach herunterladen sagen. Und dann werden wir Font Awesome Symbol darunter hinzufügen. Und unter diesem Anker-Tag werden wir ein div mit einer Klasse von Download-Informationen hinzufügen. Und im Inneren, ein anderes div mit einer Klasse von Downloads Genre. Und innerhalb dieses Download-Genre-div, werden wir h4-Tags hinzufügen und einfach Genre sagen. Und darunter fügen wir ein p-Tag hinzu und fügen die Kategorien für unsere Serie hinzu. Und unter der Download-Genre-Klasse, werden wir ein weiteres div mit einer Klasse von Download-Cast hinzufügen. Dieses div enthält also Bilder der Besetzung, die in der Serie war. Und im Inneren werden wir ein H4 hinzufügen und sagen nur Besetzung. Dann werden wir einige Bilder für die Besetzung der Serie hinzufügen. Und dann schließlich, unter dem div mit einer Klasse von Download-Informationen, werden wir ein weiteres div mit der Klasse der Download-Bewertung hinzufügen. Und darin werden wir vier Spannweiten hinzufügen. Die erste haben wir eine Klasse von Rate und wir werden sagen 8.7. Dann werden wir eine zweite hinzufügen und einhundert, zweihundert Bewertungen sagen. Und schließlich die letzte. Und wir sagen sechs Jahreszeiten. Mal sehen, wie das in unserem Browser aussehen wird. Sie können sehen, dass das nicht gut aussieht. Also gehen wir zurück zu unserem CSS und beginnen, dies zu stylen. Ich gehe direkt hier zwischen den Kommentaren und ich beginne mit dem Targeting der Download-Karte div und füge Rand unten ein EM hinzu, um ein wenig Abstand zu erhalten. Und danach werden wir das Download-Content-Div anvisieren und seine Hintergrundfarbe auf Weiß setzen. Und dann werden wir den Anker in ihm zielen und seine Hintergrundfarbe auf Schwarz setzen. Dann mach seine Farbe weiß. Und fügen Sie eine Polsterung von einem EM von oben und unten und zwei VM von links und rechts hinzu. Dann werden wir sagen, Textdekoration keine und Text transformieren Großbuchstaben. Sie können sehen, jetzt haben wir unseren Download Inhalt div mit Hintergrundfarbe weiß. Und dieser Anker hier hat einen schwarzen Hintergrund. Aber lassen Sie uns dieses Symbol größer machen. Zurück zu meinem CSS. Ich werde das Symbol innerhalb des Anker-Tags ausrichten und seine Schriftgröße auf 2,5 EM einstellen. Sie können sehen, dass es größer ist. Nun, lasst uns weitermachen. Lassen Sie uns etwas Padding hier zur Download-Info-Klasse hinzufügen. Also zurück zu unserem CSS. Ich werde die Download-Info-Klasse anvisieren und 1 e m von oben und unten und dann von links und rechts nach EM hinzufügen . Als nächstes machen wir diese Bilder kleiner, weil sie gerade seltsam aussehen. Also werde ich die Bilder innerhalb des Download-Cast-Div ausrichten und die Höhe auf 60 Pixel einstellen. Dann seine Breite auch bis zu 60 Pixel. Und dann fügen Sie einen Randradius von 50 Prozent hinzu, so dass es zu einem kreisförmigen Bild wird. Sie können jetzt sehen, dass die Abschnitte insgesamt sauberer aussehen. Ordnung, lassen Sie uns einige Stile zu diesem Download lesen div, swale, gehen Sie zurück zu meinem CSS und Ziel dieses div und Hintergrundfarbe, unsere gelbe Farbe. Fügen Sie dann Padding hinzu, ein EM von oben und unten und zwei EM von links und rechts. Dann fügen Sie Farbe schwarz und Schriftgröße 00.9 AM hinzu. Nun, lasst uns diese Spannweite anvisieren. Sie erinnern sich daran, dass es eine Klasse von Rate hat. Also gehe ich zurück zu meinem CSS und wähle diese Spanne und füge Schriftgröße 2,5 mm hinzu. Schriftstärke, Fettdruck und Rand, unten minus 0,25 EM. Zurück zu unserem CSS. Ich gehe direkt hier unter dem Download-Info-Klassen-Selektor. Und ich werde die H4 auswählen und Marge 0 hinzufügen. Dann füge ich das p-Tag hinzu und füge auch den Rand 0 hinzu. Und Schriftgröße 0.9 EBM. Und wir haben das Styling dieses Abschnitts beendet. Und in der nächsten Lektion werden wir anfangen, unsere Flexbox hinzuzufügen, damit sie so aussieht, wie wir es wollen. So sehen wir uns dann. 26. 26 Füge der Download-Seite hinzu: Hallo an alle. In dieser Lektion werden wir das Layout des Download-Abschnitts mit Flexbox ändern. Also lasst uns anfangen. Alles klar, Sie können hier sehen, wir haben unseren Abschnitt, und er enthält zwei große Dibs. Das erste div, das das Bild enthält und eine Klasse von Download-Image hat. Und die zweite, die all diesen Inhalt enthält und eine Klasse von Download-Inhalten hat. Wenn ich meinen Browser verkleinere, bis ich die mobile Bildschirmgröße erreicht habe, und gehe zu meiner Demo direkt hier. Sie können sehen, wir haben unser Bild nimmt die volle Breite. Und darunter haben wir den Download-Inhalt div. Und Sie können sehen, dass der Anker-Tag hier die volle Breite einnimmt. Und darunter nimmt dieses Download-Info-Div auch die ganze Breite ein und die Bilder werden horizontal angezeigt. Außerdem sieht der Lesebereich gut aus. Gehen wir also zu unserem CSS und ändern unser Layout ein wenig. Ich werde das Download-Content-div auswählen, das das Anker-Tag, das Info div und das Rating div enthält . Und ich werde sagen, Display Flex. Denken Sie daran, dass sie untereinander und mobile Geräte stapeln. Also werde ich Flex Flow auf Spalte setzen. Und jetzt können Sie sehen, dass das Anker-Tag hier die volle Breite einnimmt. Dies liegt daran, dass stretch der Standardwert für die Eigenschaft align items ist. Und Sie werden sich daran erinnern, dass Ausrichtungselemente entlang der Querachse arbeiten, die in diesem Fall horizontal ist, da der Flussfluss die Spalte festgelegt ist. Also, wenn ich zum Beispiel zu meinem CSS zurückgehe und Align-Elemente hinzufüge, flex start. Sie können sehen, dass die Elemente innerhalb des Download-Content-Div am Anfang des Containers ausgerichtet sind. Alles klar, lasst uns diese Zeile entfernen. Und lasst uns weitermachen. Wir möchten, dass der Inhalt in diesem Anker-Tag untereinander sitzt. Denken Sie daran, in diesem Anker-Tag haben wir eine Spanne, die dieses Downloadwort enthält. Und dann haben wir ein Symbol darunter. So können wir zurück zu unserem CSS gehen, dann das Anker-Tag anvisieren und die Anzeige auf flex setzen. Dann flex Flow Spalte, so dass die Elemente untereinander sitzen. Und dann den Inhalt zentrieren, um sicherzustellen, dass die Elemente immer vertikal zentriert werden, auch wenn sich die Höhe ändert. Und dann werden wir einfach Text hinzufügen, Mitte ausrichten. Und jetzt sieht der Anker-Tag so aus, wie wir wollen. Als nächstes möchten wir, dass dieses div mit der Klasse des Downloads Genre und dieses div mit einer Klasse von Download-Cast als Flex-Container angezeigt wird , so dass der Inhalt horizontal und nicht vertikal angezeigt wird. Also zurück zu unserem CSS. Wir werden das Download-Genre anvisieren und Cast Divs herunterladen. Und wir werden die Anzeigeeigenschaft auf flex setzen und die Flex-Wrap zu wickeln , um sicherzustellen, dass die Elemente in die nächste Zeile umbrechen, wenn sie keinen Platz haben. Und Sie können jetzt sehen, dass der Inhalt in jedem von ihnen horizontal angezeigt wird , mit diesem Wort genau hier ist nicht vertikal zentriert. Also zurück zu unserem CSS. Ich werde ein Zeilenpunktcenter hinzufügen. Und Sie können jetzt sehen, dass sie perfekt entlang der Querachse zentriert sind, die hier vertikal ist, weil der Flexfluss standardmäßig Rho ist. Als nächstes gehen wir zur Download-Bewertung. Wir wollen es nur wie das Anker-Tag da oben aussehen lassen, was bedeutet, dass alle Spannweiten darin untereinander angezeigt und zentriert werden sollen. So können wir zu unserem CSS zurückkehren. Und dann fügen wir direkt hier neben dem Anker-Tag die selektive für den Download-Rating hinzu. Und genau so haben wir es so, wie wir es wollen. Als Nächstes. Wir möchten hier auch ein wenig Abstand hinzufügen. Also zurück zu unserem CSS. Ich werde das H.264 im Download-Info-Bereich ansprechen. Und ich werde Flex-Basis 20 Prozent hinzufügen. Und jetzt können Sie sehen, dass hier Platz ist, der auf mobilen Geräten gut aussehen wird. Als nächstes möchte ich hier ein wenig Marge hinzufügen. Also zurück zu unserem CSS. Wir werden die Downloads Genre div Ziel, und fügen Rand unten, da zehn Pixel. Und jetzt sieht es besser aus. Also, jetzt ist dies gut für mobile Geräte suchen. Aber auf Tablets in Breitbildschirmen möchten wir, dass das Anker-Tag, der Download-Info-Bereich und der Download-Lesebereich nebeneinander angezeigt werden. Dies kann super einfach mit Flexbox gemacht werden. Wir müssen nur ihren Container ausrichten, der das Download-Content-Div ist, und seine Anzeigeeigenschaft auf flex setzen. Also lasst uns das machen. Zurück zu unserem CSS. Ich werde eine neue Regel für mittlere und große Bildschirme machen. Wählen Sie dann den Download-Content-Container aus und sagen Sie „Display flex“. Jetzt werden sie horizontal nebeneinander angezeigt. Aber es gibt ein Problem. Wir haben hier einen leeren Platz. Also müssen wir diesen leeren Raum zwischen den drei Elementen verteilen. Sie erinnern sich, dass wir das mit der Flex Grow Eigenschaft tun können. Wenn ich zum Beispiel die Flex-Grow-Eigenschaft für jeden von ihnen auf eins setze, wird dieser freie Speicherplatz gleichmäßig zwischen ihnen verteilt. Aber was ich hier tun werde, ist, dass ich die Flex-Wachstumseigenschaft für den Anker und den Download-Rating Abschnitt 2, 1 feststelle und sie auf zwei für den Download-Info-Bereich setzen werde Flex-Wachstumseigenschaft für den Anker und den Download-Rating Abschnitt 2, . Auf diese Weise wird es den doppelten Platz bei den anderen beiden Willen beanspruchen, weil es mehr Inhalt hat. Also zurück zu unserem CSS. Ich werde das Anker-Tag und die Download-Bewertung anvisieren und Flex wachsen zu eins setzen. Dann werde ich das Download-Info div anvisieren und sagte flex wachsen zu zwei. Und jetzt können Sie sehen, dass dieser Abschnitt gut aussieht. Und wenn ich meinen Browser verkleinere, können Sie sehen, dass er auf allen Geräten voll reaktionsschnell ist. Wenn Sie jemals versuchen, diese Art von Layout ohne Flexbox zu erreichen, werden Sie es sehr schwierig finden. Aber mit Flexbox ist alles viel einfacher. Also das ist es für diese Lektion, alle, und wir sehen uns in der nächsten. 27. 27 Aufbau unserer Galerie mit dem horizontalen masonry mit Flexbox: Hallo an alle. In dieser Lektion bauen wir unsere Galerie. Also lasst uns anfangen. Alles klar, alle, ich beginne hier nach dem Download-Bereich und füge einen neuen Abschnitt mit einer Klasse Galerie hinzu. Und darin werde ich ein H2 hinzufügen und ihm eine Klasse von Abschnittsheader geben. Und wir sagen Filmgalerie. Und darunter werde ich ein div mit der Klasse der Galeriebilder hinzufügen. Und innerhalb dieses div werden wir die divs hinzufügen, die unsere Bilder enthalten. Also zuerst werde ich ein neues div mit einer Klasse von Galeriebild hinzufügen. Und im Inneren werde ich ein Anker-Tag hinzufügen. Dann werden wir unser Bild innerhalb des Anker-Tags hinzufügen. Wenn ich zu meinem Browser gehe und dies ansehen, können Sie sehen, dass wir unser Bild hier haben. Jetzt zurück zu unserem HTML. Ich werde die Aufnahme pausieren und dieses div mit der Klasse des Galeriebildes zehnmal kopieren und die Bilder ändern. In Ordnung, also sind wir wieder da. Ich habe 10 divs mit neuen Bildern hinzugefügt. Wenn ich also zu meinem Browser gehe, kannst du sehen, dass sie hier untereinander sitzen. Jetzt gehen wir zu unserem CSS. Ich werde das Galeriebilder-div ansprechen, das alle inneren divs enthält. Und ich werde seine Anzeigeeigenschaft auf flex setzen. Sie können jetzt alle Galerie-Bild-Divs sehen, die die Bilder enthalten, die horizontal in einer Zeile angezeigt werden. Gehen wir zurück zu unserem CSS unter diesem Display flex und sagte flex, wickeln Sie zu wickeln. Und lassen Sie uns auch die divs mit der Klasse des Galeriebildes anvisieren und Höhe 250 Pixel hinzufügen, so dass alle divs die gleiche Höhe haben. Sie können jetzt sehen, dass die Bilder wieder untereinander angezeigt werden, und wir alle haben die gleiche Höhe von 250 Pixel. Gehen wir zurück zu unserem CSS. Als nächstes möchten wir einige zufällige Flex-Basis-Eigenschaften hinzufügen, divs, die unsere Bilder enthalten. Auf diese Weise wird jedes div eine andere Breite haben als die anderen, wie das Layout, das wir wollen. Jetzt können wir das auf zwei Arten tun. Zuerst können wir einfach eine eindeutige Klasse für jedes Div hinzufügen und dann diese Klassen einzeln in unserem CSS ausrichten und jedem einzelnen von ihnen unterschiedliche Flex-Basis-Eigenschaften hinzufügen. Aber in unserem Fall haben wir 10 divs. Es wäre also sehr schwierig, dies mit jedem von ihnen zu tun und es ist keine dynamische Lösung. Die andere Möglichkeit besteht darin, einige erweiterte CSS-Selektoren zu verwenden. Also füge ich hier etwas Code ein. Und jetzt können Sie sehen, dass die Bilder Zufallswerte für ihre Flex-Basis-Eigenschaft haben. Gehen wir zu unserem CSS und ich werde erklären, was ich gerade getan habe. Also hier habe ich gerade das Galeriebild div ausgewählt. Und falls Sie nicht wissen, was das n-te Kind tut, akzeptiert es nur Zahlen, um das spezifische Element zu bestimmen, das Sie wollen. Wenn ich zum Beispiel einen hier hinzufüge, dann wird dies das erste div anvisieren , das die Klasse des Galeriebildes hat. Und wenn ich fünf hinzufüge, dann zielt es auf das fünfte div mit der Klasse des Galeriebildes und so weiter. Aber was ist das, das für n plus eins? Nun, vor allem bedeutet das in Brief hier, dass dieser Auswahlprozess dynamisch wiederholt wird. Zum Beispiel, wenn ich das einfach entferne und nur hinzufüge, wird dies auf das erste Element ausgerichtet, das die Klasse des Galeriebildes hat , dann das zweite , dann das dritte usw. So dass am Ende alle Elemente ausgewählt werden. Aber wenn wir es zu n machen, dann wird es die zweite Ziel und jedes Mal hinzufügen. So wird die zweite, die vierte , die Sechs und die achte und so weiter ausgewählt. Und wenn wir dies für n machen, ich denke, Sie können jetzt erraten, dass es Element Nummer 48 und 12 und so weiter auswählen wird. Aber wenn wir es für n plus eins machen, dann wird dieser, den wir hinzugefügt haben, der Offset genannt, ist die Zahl, von der wir anfangen werden zu zählen. Also in diesem Fall werden wir Elemente auswählen, die die Zahlen von 159 und so weiter haben, anstelle von 4, 8, 12. Also zum Beispiel, wenn ich hier zum zweiten Selektor gehe und Rand fünf Pixel hinzufüge, solide rot. Wenn wir nun diesen Selektor betrachten, werden wir für n sehen, was bedeutet, dass wir alle vier Elemente ein neues Element auswählen, zum Beispiel für acht und 12. Aber es gibt hier eine Zwei, was bedeutet, dass unser Offset zwei ist. Mit anderen Worten, wir werden beginnen, unsere Elemente aus dem zweiten Element auszuwählen. So wird es 2, 6, 10 sein, und so weiter. Gehen wir also zu unserem Browser und laden Sie es neu. Und jetzt können Sie sehen, dass wir den roten Rand um das Element Nummer 2, dann Nummer 6 und dann Nummer zehn haben. Also jetzt wissen Sie, wie ich die dynamischen Werte der Flex Basis hinzugefügt habe. Aber wenn Sie genau hier schauen, werden Sie feststellen, dass es einen freien Platz gibt. Wir können die Elemente mit erhöhen, um diesen freien Raum mit der Flex wachsen Eigenschaft zu nehmen . Also zurück zu unserem CSS. Lassen Sie uns das löschen und gehen Sie direkt hier in der Galerie Bildauswahl und setzen Sie Flex, wachsen Sie zu einem. Und jetzt können Sie sehen, wie die Elemente erweitert werden, um den verbleibenden Platz zu nehmen. Aber hier gibt es ein Problem. Bilder in unseren Divs nehmen nicht die volle Höhe ein. Dies kann leicht behoben werden, indem Sie zu unserem CSS zurückkehren und auf die Bilder abzielen. Dann fügen Sie die Höhe 100 hinzu. Und Sie können sehen, dass die Bilder gestresst sind, um die volle Höhe des Galerie-Bild-div einzunehmen , aber sie sehen nicht sehr gut aus. Sehen Sie, wie sie gezwungen sind, in den Behälter zu passen. Wenn wir zurück zu unserem CSS gehen und Objekt-Fit-Abdeckung hinzufügen. Und das Problem ist weg. Die Bilder sehen toll aus. Nun, eins ist noch übrig, wir brauchen etwas Abstand zwischen den Bildern. Also zurück zu unserem CSS. Ich gehe hier in unserem Galeriebild div und füge oben einen Rand von 0 hinzu. 0 von rechts, acht Pixel von unten und acht Pixel von links. Und lassen Sie uns das äußere div mit der Klasse der Galeriebilder ausrichten und den linken Rand minus acht Pixel hinzufügen. So zieht es den Container acht Pixel nach links und kompensiert die acht Pixel, die der Container nach rechts geschoben wurde. Also da hast du es. Ein sehr fortschrittliches Galerie-Layout, das gut aussieht und voll reagiert. Wenn ich es auf verschiedenen Bildschirmen ansehe, können Sie sehen, dass es vollständig reagiert. Die Elemente reiben schön, wenn nicht genügend Platz vorhanden ist. Denn denken Sie daran, wir setzen Flex Wrap auf Wrap Das war's also für diese Lektion. Jedermann. In der nächsten Lektion werden wir weiter unsere Galerie bauen. So sehen wir uns dann. 28. 28 fügst du 28 die 28 Lightbox -Plugin in unserer Galerie hinzu: Hallo an alle. In dieser Lektion werden wir das modale Fenster für unsere Galerie mit dem JavaScript Lightbox Plugin erstellt durch niedrigen Cash das Auto erstellen. Also lasst uns anfangen. In Ordnung, jetzt, wenn wir uns unsere HTML ansehen, können Sie sehen, dass unsere Bilder in Anker-Tags eingewickelt sind. Jetzt in der Öffnung eines Tags, wollen wir das href Attribut verwenden, um zu steuern, was wir zeigen. Wir möchten, dass jedes Miniaturbild mit der ungekreuzten Version dieses Bildes verknüpft wird. Also werde ich H ref hinzufügen und dann den Pfad des Bildes kopieren und es hier einfügen. Und jetzt, wenn ich zurück zu meinem Browser gehe und auf dieses Bild klicke, können Sie sehen, es führt jetzt zum vollständigen Bild. Nun ist dies offensichtlich kein modales Fenster. Wir haben die Leuchtbox noch nicht einmal eingesteckt. Und was hier passiert ist, ist, dass unsere Webseite uns einfach auf eine neue Seite verlinkt, oder in diesem Fall auf ein neues Bild. Und wir können zu unserer Seite zurückkehren, indem wir einfach auf den Zurück-Button klicken. Gehen wir zurück zu unserem HTML. Ich gehe durch alle Links und füge die href-Attribute für sie hinzu. Also werde ich die Aufnahme pausieren und damit umgehen. Und zurück. Also jetzt haben wir unsere Bilder und wenn wir auf eines von ihnen klicken, wird es uns zur Vollversion des Bildes führen. Jetzt wollen wir das modale Fenster wirksam machen, wenn wir auf die Bilder klicken. Also lassen Sie uns gehen und suchen Sie nach Lichtkasten wird diesen Link mit Standort öffnen, der Name des Autos. Und dann laden wir es herunter. Als nächstes extrahieren wir die ZIP-Datei, öffnen sie und öffnen dann den Ordner dist. Und wir brauchen den CSS-Ordner genau hier. Also werde ich es kopieren und in unseren Projektordner einfügen. Wir werden auch den JavaScript-Ordner benötigen. Also werde ich den JS-Ordner öffnen und die Lichtbox dot js-Datei kopieren. Und dann gehen Sie zurück zum Projektordner und öffnen Sie den JS-Ordner und fügen Sie die Datei hier ein. Und jetzt müssen wir diese Datei in unsere Webseite aufnehmen. Swell, geh zurück zu meinem Code-Editor und geh hier vor unserer main.js Datei. Und ich schreibe Skript-Quelle JS, Lightbox dot js. Und lassen Sie uns auch unsere CSS-Datei einschließen. Ich scrollen bis zum Kopf unserer Webseite. Und wir werden direkt hier unter den Google-Schriftarten gehen, und wir sagen Link H ref CSS, Lightbox dot CSS. Jetzt mit den Light-Box-CSS- und JavaScript-Dateien sind wir einen Schritt davon entfernt, modales Verhalten zu haben. Scrollen wir nach unten zu unseren Galeriebildern. Beginnen wir mit dem ersten Bild. Also, wenn das ein Element, werde ich ein neues Attribut namens Data Light-Box hinzufügen. Sie können hier einen Wert von allem hinzufügen, was Ihnen gefällt. Also werde ich Galerie benutzen. Jetzt, wenn ich auf das erste Bild klicke, können Sie sehen, dass es in einem Modal geöffnet wird. Als nächstes müssen wir dieses Daten-Lightbox-Attribut auf alle unsere Bilder anwenden. Lasst uns das machen. Wenn wir nun zum Browser zurückkehren, jedes Bild neu laden und öffnen, wird es in einem Modal angezeigt. Und wenn ich die rechte Pfeiltaste auf meiner Tastatur drücken, können Sie sehen, das folgende Bild wird schön angezeigt und so weiter. Und jetzt haben wir unseren Galeriebereich beendet. In den nächsten Vorträgen werden wir weiter arbeiten und lernen. 29. 29 Aufbau unserer Sidebar mit Flexbox: In dieser Lektion werden wir anfangen, Inhalte zu unserer Seitenleiste hinzuzufügen. Also lasst uns anfangen. In Ordnung, also zuerst werde ich hier in das Div mit der Klasse der Sidebar gehen. Und ich werde diesen Dummy-Inhalt löschen, den wir zuvor hinzugefügt haben. Dann werden wir beginnen, indem wir ein div mit einer Klasse von Widget hinzufügen. Und darin werden wir ein weiteres div mit einer Klasse von Widget-Inhalten hinzufügen. Und dann innerhalb von, dass wir H3 hinzufügen und sagen einfach Top-bewertete Filme. Und darin werden wir ein Navigationsgerät mit einer Klasse von Sidebar-Menü hinzufügen. Und dann fügen wir UL LI hinzu, dann ein Anker-Tag darin. Und wir werden sagen „Der Pate“. Und dann werden wir das LI kopieren und ein paar Mal einfügen. Und dann sagen wir einfach 12 Wütende Männer und der Dunkle Ritter. Und jetzt können Sie sehen, unsere Speisekarte ist genau hier. Gehen wir zu unserem CSS und machen noch mehr. Wird genau hier zwischen den Kommentaren gehen. Und wir werden die Sidebar anvisieren, richtig? Klasse. Und dann fügen wir die Polsterung zu E m hinzu und dann fügen wir die Farbe Schwarz hinzu. Und darunter werden wir die Widget-Klasse anvisieren. Und wir werden Hintergrundfarbe weiß hinzufügen, und dann Rand unten zu EM. Es wird also einige Abstände am unteren Rand geben, wenn wir weitere Widgets hinzufügen. Sie können sehen, dass es jetzt eine weiße Hintergrundfarbe hat, aber lassen Sie uns hier etwas Polsterung hinzufügen. Zurück zu unserem CSS. Ich werde das Widget-Content-Div ausrichten und dann Padding von 0,5 EM von oben und unten und zwei EM von links und rechts hinzufügen . Und dann darunter werde ich die UL des Sidebar-Menüs anvisieren und List-Style-Typ hinzufügen, keine, damit wir die Kugeln loswerden können. Und dann hinterließ Padding eine VM. So jetzt können Sie sehen, dass das Menü aufgrund unserer Polsterung ein wenig nach links verschoben wird. Also lasst uns jetzt die Links zurück zu unserem CSS stylen. Ich werde das Anker-Tag innerhalb des Sidebar-Menüs anvisieren. Und ich werde Anzeigeblock hinzufügen. Und dann den unteren Punkt für EN auffüllen, damit wir einige Abstände unter ihnen bekommen können. Und dann schwarz färben. Text, Dekoration, keine. Und Schriftgewicht, fett. In Ordnung, Sie können sehen, dass es jetzt besser aussieht. Also zurück zu unserem HTML. Ich werde die Aufnahme pausieren und dieses div mit einer Klasse von Widget ein paar Mal kopieren . Und ich werde den Inhalt ändern, damit wir mehr Inhalte in unserer Sidebar erhalten können. Wieder zurück. Jetzt können Sie sehen, dass wir mehr Inhalte in der Sidebar haben, und unsere Sidebar sieht gut aus auf breiteren Bildschirmen. Aber wenn ich irgendein Element auf der Seite inspiziere und die Größe der Fenster so ändere, dass unsere Seitenleiste zusammenbricht, wenn wir die mittlere Bildschirmgröße treffen. Sie können sehen, dass die Widgets die gesamte Breite der Seitenleiste einnehmen, und dies wird auf mobilen Geräten gut aussehen. Zum Beispiel, wenn ich weiterhin meinen Browser verkleinere , bis ich den Bereich der kleinen Bildschirmgrößen erreiche, können Sie sehen, dass die Widgets gut aussehen. Aber wenn wir auf die mittlere Größe wieder erweitern, ich denke, es wird besser aussehen, wenn wir zwei Widgets pro Zeile in mittleren Bildschirmen haben , wird dies durch die Verwendung von Flexbox geschehen. Zurück zu unserem CSS werden wir eine neue Rolle für mittlere Bildschirme erstellen, die eine Mindestbreite von 800 zehn Pixeln und eine maximale Breite von einhundert, einhundertzwanzig Pixeln haben . Und dann werden wir die Sidebar rechts div anvisieren. Legen Sie dann die Anzeigeeigenschaft auf flex fest. Sie können sehen, dass alle Widgets jetzt nebeneinander horizontal angezeigt werden. Zurück zu unserem CSS. Wir gehen unter Display Flex und fügen Flex Wrap, Wrap hinzu. Und jetzt werden die Elemente in die nächste Zeile gelesen. Zurück zu unserem CSS. Ich werde das div mit der Klasse des Widgets anvisieren und Flex-Basis 48,8% hinzufügen. Und jetzt gibt es nur zwei Widgets pro Zeile. Aber wir wollen, dass dieser 3% verbleibende Platz hier zwischen den Widgets liegt, nicht am Ende des Containers. Das ist einfach zu machen. Also, das zu unserem CSS. Ich werde direkt hier unter dem Flex Wrap gehen, Ratte und fügen Rechtfertigung Inhalt Raum zwischen. Und jetzt sind sie schön getrennt. Aber eine Sache links, Gehen wir zu unserem CSS und scrollen Sie nach oben, bis wir die Sidebar richtige Klasse finden. Und ändern Sie dann die blaue Hintergrundfarbe in die gleiche Hintergrundfarbe des Körpers. Und jetzt sieht unsere Sidebar auf mittleren Bildschirmen gut aus. Und wenn wir zu kleineren Bildschirmen gehen, sieht gut aus, dann größere Bildschirme sieht gut aus Tag zu. Also, das ist es für diese Lektion, alle. Und wir sehen uns in der nächsten. 30. 30 Erstellung unseres Menüs und unseres footer: Hallo an alle. In dieser Lektion werden wir das Menü zu unserem Projekt hinzufügen. Also lasst uns anfangen. Also fügen wir ein Menü hinzu, das dem einfachen Menü, das wir in den vorherigen Lektionen erstellt haben, sehr ähnlich ist. Wir entfernen einfach einige Links und ändern die Farben. Also hier öffne ich die HTML-Datei des Symbolmenüs, das wir zuvor erstellt haben. Und ich kopiere diese URL und gehe zur HTML-Datei des Projekts und kopiere sie hier im nav Tag mit einer Klasse von Hauptmenü. Und dann lasse ich einfach drei Links und entferne die anderen. Wir werden den Linktext ändern. Also sagen wir sehen, dann herunterladen, dann Galerie. Und jetzt können Sie das Menü sehen. Lassen Sie uns auch die Stile aus der CSS-Datei des einfachen Menüs ausleihen. Also, jetzt öffne ich die CSS-Datei und ein einfaches Menü, und ich werde alle Stile kopieren, die wir zuvor hinzugefügt haben. Dann gehen Sie in den CSS-Ordner unseres Projekts und fügen Sie sie hier ein. Dann werde ich dieses Menü Überschrift Selektor löschen, weil wir nicht über das Menü Überschrift. Und dann ändere ich diese Menüauswahl und mache es Hauptmenü, so dass die Stile auf unser Menü angewendet werden. Ich werde auch diesen einzelnen Navigationsselektor ändern und es Hauptmenü auch machen. Auf diese Weise werden die Flexbox-Stile auf unser Menü angewendet. Und dann werden wir diese 600 Pixel auf 810 Pixel ändern. Und auch, lassen Sie uns entfernen diese Hintergrundfarbe der URL, weil wir unsere gelbe Farbe hier oben haben. Und dann ändern Sie die Farbe der Links auf Schwarz. Dann machen Sie seine Schriftgröße 1.1 EM. Und es ist Schriftgewicht fett. Wenn wir den Mauszeiger darüber bewegen, soll die Hintergrundfarbe schwarz und die Farbe gelb sein. Und hier haben wir unsere Speisekarte sehen toll aus. Und wenn wir den Mauszeiger über einen Link bewegen, wird der Hintergrund schwarz und die Farbe ändert sich zu gelb. Und es sieht gut aus auf Breitbildschirmen. Und wenn wir es auf mobilen Geräten sehen, können Sie sehen, dass die Links schön untereinander sitzen. Nun, wir haben noch eine Sache zu tun, und das ist die Fußzeile. Es wird nur eine einfache Textzeile enthalten. Also lasst uns zu unserem HTML gehen. Scrollen Sie nach unten zur Fußzeile, und entfernen Sie einfach diese. Und sagen Alle Rechte vorbehalten. Ahmed Sidak Udemy. Gehen wir nun zu unserem CSS auf der Suche nach Fußzeile. Entfernen Sie dann diesen Header-Selektor und diese 100 Pixel Höhe und fügen Sie Farbe Weiß hinzu. Dann Text zentrieren und auffüllen, 1,5 e m. Dann Schriftgröße 1 Punkt 2, EM und Schriftgewicht fett. Dann unten werden wir den Header anvisieren und seine Hintergrundfarbe auf schwarz setzen. Und jetzt haben wir unsere Fußzeile. Endlich haben wir endlich unser Projekt beendet. Ich denke, wir haben viel darüber gelernt, wie Flexbox in Aktion zu verwenden , während wir die verschiedenen Abschnitte dieses Projekts erstellt haben. Ich hoffe, dass es Ihnen gefallen hat und ich hoffe, dass Sie jetzt ein solides Verständnis aller Flexbox-Eigenschaften haben und wie Sie sie verwenden. Und natürlich, wenn Sie Fragen oder Kommentare haben oder irgendetwas, was Sie dazu fragen möchten, lassen Sie es im Bereich Fragen und Antworten und ich werde gerne so schnell wie möglich beantworten. - Danke.