Erweitern Sie dein CSS mit Flexbox

1. Einführung: Ich bin Jay Silverstein, ein Web-Entwicklungs-Boot-Camp-Instruktor und Front-End-Entwickler, und ich werde Sie durch diesen Kurs auf CSS Flex Box führen. Flex Box ist eine meiner Lieblings-neuen CSS-Entwicklungen, und Unternehmen beginnen wirklich, in ihr Potenzial für Flexibilität und Reaktionsfähigkeit zu graben . Dieser Kurs ist perfekt für Leute, die bereits ein wenig über Alter bis Berg CSS wissen und bereits mit ihnen einige vertraut und wollen erweitern. Osias hat Toolkit. Im Laufe dieser, 16 Videos werden durch die Werkzeuge gehen, die wir brauchen, um ein Projekt einzurichten, ein paar Alter von zwei Melonen zu aktualisieren , ist als Grundlagen und dann fertig zu werden. Geschäft mit CSS Flex Box wird auch über einige responsive Design-Techniken und Konzepte gehen ,und auch ein wenig vorne und spielen. , Entscheiden Sie. Am Ende des Kurses werden Sie in der Lage sein, Ihre eigene einseitige Website mit CSS Flex Box zu entwerfen und zu bauen. Ich bin wirklich aufgeregt, diesen Kurs zu unterrichten, und ich freue mich darauf, dass Sie für das Richtige dabei haben. Eine Sache, die ich darauf hinweisen möchte , ist , dass wegen der Art und Weise, die besagt, dass dies ein Konzept ist, eine Sache ist. Es ist nicht möglich, dass Sie alles darüber in 16 Videos lehren, obwohl wir nur eine sehr kleine Teilmenge machen, also um zu lindern, dass ich eine Reihe von Ressourcenmaterialien zusammengestellt habe , auf die Sie als Du gehst zu den Videos. Dazu gehören Dinge wie der gesamte Code, den ich in den Beispielen verwende, alle Links und Artikel , von denen ich denke, dass Sie hilfreich finden würden, und alle zusätzlichen Übungen, die Sie tun sollten um Ihre Fähigkeiten zu üben. Dies wird in der Beschreibung dieses Kurses verlinkt, so dass Sie fortfahren und darauf klicken und durch die Ressourcenmaterialien folgen können, während Sie mit Videos gehen. Ohne weitere Umschweife, lasst uns diese Reise in Richtung Let's Box Mystery beginnen 2. Einrichtung und Tooling: einer der wichtigsten Teile von Entwicklern eingerichtet ist, gibt es Werkzeuge? Tooling bezieht sich auf die Werkzeuge, die sie verwenden, wenn sie an Projekten arbeiten, und in diesem Kurs werde ich V s Code verwenden. Es gibt eine Reihe von anderen Code-Editoren da draußen, Adam und erhabene oder zwei Beispiele, und Sie können alles verwenden, wenn Sie am bequemsten sind. jedoch Sie müssenjedocheinen Code-Editor verwenden. Sie können keinen Code in Microsoft Word oder Seiten schreiben oder kein Haustier oder was auch immer. Wenn Sie überhaupt keinen Editor haben, empfehle ich Della Envious Code bei code visual studio dot com. Es ist verfügbar für Mac, Windows und Lennox, ein weiteres wichtiges Tool, das Entwickler häufig die Befehlszeile oder das Terminal verwendet. Im Allgemeinen, wenn Sie mit Ihrem Computer interagieren war, verwenden Sie, was die grafische Benutzeroberfläche genannt wird, die klebrig, die Ihnen zeigt, wo Ihre Ordner sind, Was ist Formate. Ihre Dateien sind und etcetera im Gegensatz zu den klebrigen, was Ihnen eine Art visuelle Ebene über das gibt, was unter der Oberfläche Ihres Computers vor sich geht . Das Terminal ermöglicht es Ihnen, direkt mit dem Dateisystem Ihres Rechners zu interagieren. Ich werde durchgehen, wie man die Befehlszeile auf einem Maxwell A-nächsten Computer verwendet , weil das ist, was ich habe. Ich gebe Ihnen Wenn Sie auf einem Windows-Computer sind, können Sie immer noch folgen. Es gibt ein paar Befehle, die unterschiedlich sind. Aber ich sag dir was. Die sind im Voraus. Um, wenn Sie nicht bequem mit dem Terminal zu navigieren, würde lieber nur Finder oder Windows Explorer verwendet, Was haben Sie das ist völlig in Ordnung. Ich finde nur, dass die Verwendung des Terminals mir hilft, produktiver zu sein. Das ist es, was ich während des Kurses demonstrieren werde. Das erste, was ich auf meinem Rücken dio-dio-werde, wird Spotlight nicht benutzen, was Kommandoraum ist, um das Terminal zu finden. Ich tippe das Terminal ein und öffne es, damit du sehen kannst, dass es mir den Namen meines Computers sagt , der Victoria an ist. Und dann hat es meinen Benutzernamen. Das erste, was ich tun möchte, ist, dass ich überprüfen möchte, welches Verzeichnis ich bin und ich werde das tun , indem ich den Commander P W. D.Tape D. Dies steht für Druckarbeitsverzeichnis, und es sagt mir, dass ich traf Benutzer Schrägstrich Jail sind Das ist ziemlich cool. Aber was, wenn ich wissen will, was in diesem Verzeichnis ist. Ich kann den Befehl benutzen. L s l s wird alle Unterverzeichnisse und alle Dateien, die sich in diesem speziellen Verzeichnis befinden, auflisten . Dies ist einer der Befehle, die auf einem Windows-Rechner etwas anders sein werden. Wenn Sie sich auf einem Windows-Computer befinden, sollten Sie den Befehl verwenden. D I r wird ein bisschen anders aussehen. Wird dir ein paar andere Informationen geben. Das ist in Ordnung. Also hier ist meine Liste von allem, was in diesem speziellen Ordner ist. Ich werde einen neuen Ordner namens Flux Box erstellen wollen. Hier werde ich alle Materialien für diesen Kurs aufbewahren. Um das zu tun, werde ich das immer noch auf der Kommandozeile tun und den Befehl m k d I R verwenden. Das steht für make directory. Und dann werde ich ihm den Namen des Verzeichnisses geben, das ich machen möchte, was Flats Box ist. Ich werde gehen und Enter drücken und es wird mir sagen. Okay, ich habe dieses Verzeichnis Flex-Box gemacht, und wenn ich es mache oder de ir. Wenn Sie sich wieder auf einem Windows-Computer befinden, können Sie diese Flex-Boxen sehen. Nun, hier in meiner Liste der Dinge, die in diesem speziellen Ordner sind, ist sie ziemlich cool. Was ich jetzt tun möchte, ist, dass ich in diesen Flex-Box-Ordner gehen und anfangen werde, Dateien zu erstellen , damit ich Dinge mit ihnen machen kann. Also, was ich tun werde, ist, dass ich den Befehl C d didiotieren werde , der für Change Directory steht und dann werde ich ihm den Namen des Ordners geben, ich in Flex-Box ändern möchte. Und wenn ich das tue, wenn ich überprüfe, wo ich wieder bin, indem ich PWD verwende und sehe, dass ich jetzt bin, dass es Benutzer Slash jlr Slash Flex-Box . Cool. Wenn ich ein Level wieder nach oben gehen und in meinen enthaltenden Fuller gehen wollte, würde ich c d dot dot eingeben und das würde mich eine Ebene zurück in meinen Benutzerordner bringen. Punkt Punkt steht für den Volleren über dem aktuellen. Wenn Sie nur einen Punkt tun, der für den aktuellen Ordner steht. Wir werden dies wieder sehen, wenn wir darüber sprechen, wie HTML- und CSS-Dateien verknüpfen, um, für jetzt, denken Sie daran, dass diejenigen von Punkt Punkt Punkt bedeutet zurück Punkt bedeutet den aktuellen Ordner. Also werde ich zurück in die Flex-Box kappen, und dann werde ich meine erste Datei machen wollen. Ich mache eine Datei namens , Flex-Box,die CSS auf einem Mac. Die Mac- oder Lennox-Maschine. Der Befehl dafür ist Touch. Und dann der Name der Datei, die Sie berühren wollen, Äh, Flex-Box, dass CSS. Und jetzt, wenn ich es wieder tun, können wir sehen, dass ich jetzt die Flex-Box, die CSS-Datei in meinem Verzeichnis Windows-Benutzer habe. Was Sie tun möchten, um eine Datei zu erstellen, ist der Typ N u l größer als und dann der Name des Dateiflex-Feldes. Das ist ja. Das würde brechen, wenn ich versuche, es auszuführen, weil ich es nicht tue, ich führe keine Windows-Maschine, aber das ist, was Sie genau hier tun würden. Wenn ich das öffnen und sehen möchte, dass alles in dieser Datei war, und in diesem Verzeichnis könnte ich Code eingeben, uh, uh, open dot und das wird öffnen, dass im Finder oder Windows Explorer oder was Sie haben, was ziemlich cool ist. Das letzte, was ich in diesem Video übergehen möchte, ist, dass, wenn Sie V s Mantel heruntergeladen haben, es eine zusätzliche Sache gibt, die Sie tun können, die Ihren Prozess viel glatter macht. Also möchte ich, dass du das tust, ist ich will, dass du den V-Code öffnest. Ich möchte voran gehen und Befehl shift p eingeben, um die Befehlspalette zu öffnen und dann mit der Eingabe von Shell zu beginnen und dann zu dieser Option zu gehen, die Codebefehl im Pfad installiert ist. Sie sollten diese Sache erhalten, die besagt, dass Shell-Befehlscode erfolgreich im Pfad installiert wurde. Dann, wenn Sie Ihr Terminal mit dem Befehl Q beenden und es neu starten. Lassen Sie uns CD zurück in die Flussbox. Dann kann ich Code dot eingeben und was das tun wird, ist, dass es den aktuellen Ordner in V s Code öffnen wird, einschließlich aller Dateien, die sich in diesem Ordner befinden, was ziemlich cool ist. Die Befehlszeile verbraucht ein wenig einschüchternd, wenn Sie das erste Mal davon erfahren haben. Aber es ist ein wirklich leistungsfähiges Tool, das Ihre Produktivität als Entwickler wirklich steigern kann. Und die Ressource ist, dass ich im ersten Video erwähnt. Es gibt eine Reihe von Befehlszeilenübungen für Sie, um Ihre Befehlszeilenfähigkeiten zu üben . Und natürlich, natürlich, wie ich bereits erwähnt habe, wenn Sie nicht bequem mit der Befehlszeile sind, müssen Sie es nicht tun. Sie können fortfahren und weiterhin den grafischen User Interface Finder oder Windows Explorer verwenden, oder was haben Sie, um alle erforderlichen Schritte für dieses Projekt auszuführen. Ich bitte jedoch, jedoch, dass Sie diesen Flats-Box-Ordner so machen, dass Sie irgendwo haben, um alle Ihre Kursmaterialien zu platzieren . In diesem Video. Wir haben über die Tools von Entwicklern gesprochen. Ein Code-Editor wie V S Code Adam sind erhaben, und die Terminal-Befehle, sobald Sie diesen Flex-Box-Ordner gemacht haben und optional auch die Befehlszeilenübungen gemacht haben, die ich in den Ressourcenmaterialien habe. Gehen wir zum dritten Video 3. HTML Refresher und HTML5-Semantik-Elemente: in diesem Video werde ich kurz über die Grundlagen von HTML gehen. Wenn Sie vorher noch nicht mit HTML gearbeitet haben, empfehle ich Ihnen, etwas Zeit damit zu verbringen, darüber zu lernen, bevor Sie mit dem Kurs fortfahren . Auf der anderen Seite, wenn Sie bereits mit HTML vertraut sind und über HTML fünf semantische Elemente wissen, können Sie voran gehen und dieses Video überspringen. HTML steht für Hypertext-Markup-Sprache. Es wurde von Tim Berners Lee am CERN erstellt, um Forschung zu teilen. HTML definiert die Struktur von allem, was Sie im Web sehen. CSS definiert den Stil, und JavaScript definiert die Interaktivität, und in diesem Kurs wird darüber sprechen, wie HTML verwendet wird, um Struktur für unsere Websites zu erstellen und dann CSS zu verwenden, um sie zu stylen. Jede HTML-Seite hat zwei grundlegende Teile. Ein Kopf und ein Körper. Der Kopf eines HTML-Dokuments enthält Informationen über das Dokument, den Titel, der auf der Registerkarte angezeigt werden soll, und die entsprechenden Stylesheets. Jegliche CEO-Informationen , etc. Der Körper enthält den Inhalt, der im Browser angezeigt wird, also habe ich Terminal geöffnet. Ich werde eine neue in meinem Flussmittel-Box-Halter erstellen. Ich werde einen neuen Ordner namens Demo-Website Demo-Website erstellen und dann innerhalb der Demo-Website, werde ich eine neue Datei namens Index dot html indiziert bei HTML erstellen. Dann öffne ich es. Neidvoller Code mit meinem Code-Punkt-Befehl. Dann werde ich aus der grundlegenden HTML-Struktur Gerüst machen. Das erste, was ich brauche, ist ein Dock-Typ. Dies teilt dem Browser mit, welche Art von Dokument es sich in diesem Fall um ein HTML-Dokument handelt. Dann muss ich alles in ein HTML-Tag wie dieses einbinden, damit Sie sehen können, dass ich das öffnende Tag hier oben und dann das schließende Tag hier unten habe. Das zeigt ein schließendes Etikett, um, um, den Schrägstrich nach der Karotte, dann brauche ich ein Ahead-Element, das ich auch hier diesen Titel einfügen werde. Alles klar, zuerst, welche Seite dann? Ich werde auch eine Leiche brauchen. Und darin werde ich in jedem, der nur Hallo Welt sagt, und das ist eine sehr einfache HTML-Seite. Die anderen Dinge, die Sie tun können, ist, anstatt all dies selbst Ves-Code eingeben zu müssen, werden wir für Sie gerüstet, wenn Sie html Doppelpunkt fünf eingeben und Tab drücken. Also habe ich das HTML-Tag. Ich habe den Body Tag, den ich habe, um Tag zu führen. Ich werde mit diesem Titel zusammengefegt, was mein erster Anblick sein wird und dann im Körper werde ich in jedem haben, der Hallo sagt, Welt. Ich werde voran gehen und öffnen Sie das in und krähen, indem Sie offenen Index tippen, dass h zwei Mund. Da gehen wir hin. Wir haben etwas, das hallo sagt, Welt. Dies gibt mir auch Zugriff auf Chrome-Entwicklertools. Wenn ich vorwärts und rechts gehe, klicken Sie und dann auf Inspect, Sie können sehen, dass ich hier unten diese Toolbox, die sich öffnet und es gibt und es zeigt mir der html für das, was auf der Seite zeigt. Es hat auch einige Sachen mit den Stylesheets darin, wer sich in ein wenig mit uns herumwirren wird. Dies ist also ein weiteres sehr leistungsfähiges Tool, das Entwickler ziemlich viel verwenden. Sie sind wahrscheinlich mit viel HTML vertraut. Die Elemente sind fertig. Zum Beispiel, Dube P Tags a Tags H one 36 umfasst geschrien Verbündete, etcetera, etcetera, etcetera, etcetera, etcetera. Was Sie vielleicht nicht wissen, ist, dass neueste HTML-Spezifikation und führte eine neue Reihe von Elementen namens HTML fünf semantische Elemente. Semantische Elemente umfassen Dinge wie Nie Hauptartikel, Header, Fußzeile beiseite und andere. Semantische Elemente erscheinen im Web nicht anders als DIV-Elemente, aber sie sind vorteilhaft für Dinge wie Web-Crawler, Bildschirmlesegeräte und S e O. Was sie tun, ist, dass sie beschreiben, was jeder Teil des Dokuments ist und wie es bezieht sich auf andere Teile des Dokuments. Deshalb ist es vorteilhaft für die moderne Web-Entwicklung, und die Ressource ist, ich habe einen Link hinzugefügt, wo Sie mehr über jede Art von semantischem Element lesen können. Sobald du das gelesen hast, kannst du mit dem nächsten Video fortfahren. 4. CSS Review und reset.css: also habe ich ein paar kleine Änderungen an unserer Demo-Seite vorgenommen. Ich habe eine Struktur hinzugefügt, also haben wir jetzt einen Header auf einem Haupt. Die Haupt hat einige Fakten über die Erde, die ich dachte, würde Spaß machen. Wir sagen hallo. Welt-Führer werden einige Fakten über die Welt haben, uh, und das e in einem Diff mit einem P-Tag drin, was ziemlich cool ist, aber bis jetzt sieht es ziemlich einfach aus. Wir haben nichts von unserem eigenen Styling gemacht. Wir verlassen uns nur darauf, dass der Browser entscheidet, wie er aussieht. Was Sie jedoch bemerken, ist, dass einige Elemente sich von anderen unterscheiden, obwohl wir keine Stile geschrieben haben. Dies liegt daran, dass jeder Browser über eigene integrierte Stile verfügt, die standardmäßig in Abwesenheit von benutzerdefinierten Stilen verwendet werden. Zum Beispiel sagt Crom, dass dies jeder größer sein sollte als diese h drei, und dass eine drei sollte größer sein, als diese P Steuer sollten. Es besagt auch, dass es einen Rand von acht Pixeln oder etwas geben sollte, und dass jeder von ihnen sollte ein wenig verteilt sein, so dass Sie um sie herum sehen können . Wir wollen all dieses Standard-Styling loswerden. Also werden wir etwas namens Reset CSS verwenden. Wir wollen das Styling loswerden, weil jeder Browser ein wenig anders umgeht . Es ist also gut, mit einem leeren Schiefer zu beginnen, damit wir von vorne anfangen können und sich um nichts kümmern müssen. Wir werden dies mit etwas namens Reset CSS tun. Wie der Name schon sagt, wird dies jede Standard-Styling wegnehmen und uns eine leere Leinwand geben, mit der wir unser Web-Design Kunst erstellen können . Es gibt ein paar verschiedene Versionen von Reset CSS. Wir werden das Original von Eric Meyer benutzen. Du kannst gehen. Sie können es auf meinem Web Dot com Schrägstrich Eric Slash Tool Slash Slash Reset finden. Oder Sie können einfach tun, was ich jedes Mal mache und Google es zurücksetzen. Los geht's. Uh, und hier ist es. Also haben wir hier und es beschreibt es ein wenig, und dann hat es den Inhalt des CSS-Reset. Sie können sehen, dass es nur alles auf Null zurücksetzt und alle seine Standardwerte. Was wir tun werden, ist, dass wir das nehmen, wir kopieren es, und dann fügen wir es in etwas namens Reset CSS ein. Nun, wir haben diese Datei noch nicht erstellt, aber was wir tun werden, ist im Terminal haben wir unseren Index HTML und unseren Demo-Website-Ordner. Bisher werden wir einen anderen Ordner namens Styles machen und dann werden wir auch einen namens Assets machen , der alle Bilder enthält, die wir später einschließen können. Wir werden es noch nicht benutzen, aber wir werden es tun. Also in, wir werden also jetzt CD in Styles. Dann machen wir einen neuen CSS-Ordner zurücksetzen, Touch Reset, Nazi beurteilen. Und wir werden auch einen Stil CSS Datei Touch Stil machen, die CSS cool. Dieses Update wird in unserem in R. V s Code angezeigt . Sehen Sie, wir haben diese neuen Dinge, also gehen wir in Stile in Reset-CSS, und wir werden nur das gesamte Reset-CSS einfügen. Speichern Sie es jetzt. Es gibt immer noch keine Änderung in unserem HTML-Dokument. Dies liegt daran, dass wir das CSS noch nicht mit dem HTML verbunden haben. Also, in Index es sie Mel, wir werden innerhalb des Head-Tags kommen. Wir werden eine neue Zeile hinzufügen, die OK sagt, fügen Sie dieses Stylesheet ein. Wir werden sagen, Link Stirn ist Stil. Shoot-Typ ist ein Textschrägstrich CSS und die IT-Referenz ist der aktuelle Ordner und dann der Ordner Stile und dann setzen Sie dieses CSS zurück. Also, was das tut, ist, dass es OK ist, wir werden einen Link zu einem anderen Dokument hinzufügen. Dieses Dokument wird ein Stylesheet vom Typ Text, CSS, sein. Und dann ist hier der Pfad dazu, was ist, dass Stile dieses was ist, dass Stile diesesCSS zurücksetzen. Also jetzt, wenn wir das speichern und aktualisieren, können Sie sehen Nein, wir haben absolut kein Styling hier drüben, was ich denke, ist ein Plus. Natürlich sieht das super langweilig aus. Lasst uns das reparieren. Ich werde sagen, dass wir vielleicht einen Chuan wieder groß machen sollten. Wir sollten vielleicht auch Dinge ein wenig ausräumen und auch ein bisschen Farbe hinzufügen. Also, was ich tun werde, ist, dass ich gehen und meinen Stil verknüpfen, den CSS Also werde ich sagen Link Rale sein Stylesheet wieder Typ ist Text Schrägstrich CSS und dann ein Entwurf. Diese Zeit wird in Stilen sein. Es wird Stil sein, dass CSS cool. Dann bleibt mir alles, was ich tun muss, ist weiter zu gehen und mein Stylesheet zu öffnen. Das erste, was ich tun werde, um alles in der Körpermarke zu nehmen und es Sand Saref zu machen weil ich lieber Sand Saref als Sarah betrachte. Also werde ich dafür eine Regel schreiben. Zuerst kommt mein Selektor. Dann kommt die Eigenschaft, die Spaß Familie wird, und dann der Wert. Was Sands sein wird. Sarah. Cool. Da gehen wir. Dann will ich, dass jeder wieder groß wird. Also werde ich sagen, dass jeder Spaß machen sollte Größe 2 morgens und ich werde sagen, dass jedes Div einen Rand von fünf Pixeln haben sollte . Das wird also ein bisschen mehr Raum geben. Lassen Sie uns auch einfach Alter drei liebenswerte Spaß machen. Warte, sollte beide cool sein und wir sind fertig. Das ist immer noch nicht sehr schön, aber es sieht ein bisschen besser aus als vorher. Ähm, aber wir haben das Reset-CSS aufgenommen. Also jetzt haben wir eine leere Leinwand Zehenarbeit an, wenn Sie sich mit CSS nicht wohl fühlen. Ich habe einige Links in das Ressourcenmaterial aufgenommen, damit Sie durchschauen können, bevor Sie fortfahren , da dieser Kurs für Leute gedacht ist, die bereits ein wenig mit CSS vertraut sind. Wenn all das Zeug, das ich gerade geschrieben habe, dir völlig fremd ist, empfehle ich dir wirklich, dass du durch diese Beine schaust, bevor du weitermachst. Es gibt insbesondere einen Artikel, den ich möchte, dass jeder, der das waschen , lesen kann , dass die sichtbaren Teile von CSS von Mike Wreath Mueller sind. Ich empfehle besonders den Teil über das visuelle Formatierungsmodell, da das in ein wenig relevant wird. Bisher haben wir in unserer Demo-Website Reset CSS aufgenommen. Wir haben ein bisschen Stehen getan, aber nicht so viel. Wir haben immer noch nicht Flex Box eingeführt, und wir werden das im nächsten Video tun 5. Flexbox: Ein neuer Kontext: so ist es endlich an der Zeit, den Star dieser Show vorzustellen. CSS Flex Box. Mal sehen, was die Beamten das sehen, da besondere Anlässen über Flex Box zu sagen haben. Das CSS drei flexible Box-Modul oder Flex-Box, ist ein Layout-Modus, der für die Anordnung von Elementen auf einer Seite, so dass die Elemente vorhersehbar verhalten , wenn das Seitenlayout muss unterschiedliche Bildschirmgrößen in verschiedenen -Anzeigegeräte. Der entscheidende Aspekt des Flex-Layouts ist die Möglichkeit, seine Elemente mit und oder Hype so zu ändern , dass sie am besten in den verfügbaren Platz auf jedem Anzeigegerät passen. Wer Was bedeutet das? Lassen Sie uns erkunden und herausfinden. Aber bevor wir es tun, müssen wir über das Konzept des Kontexts und Ihre durchschnittliche Internet-Website sprechen. Die Elemente werden in einem Blockkontext nach oben angeordnet, ihr Standardanzeigewert ist. Block gibt Heather Listenelemente. In HTML. Fünf semantische Elemente sind standardmäßig alle blockierten Elemente. Ein schwarzes Element zu sein bedeutet standardmäßig ein paar Dinge, die das volle Gewicht ihres übergeordneten Containers einnehmen . Standardmäßig übernehmen sie die Höhe ihres Inhalts und blockieren, wenn Sie verschachteln, wenn Sie verschachteln,Elemente innerhalb von Blockelementen. wird ein neuer Blockkontext erstellt, der sich ähnlich verhält, wenn wir Anzeige anwenden. Flex zu einem Element jedoch jedoch setzten den Kontext zurück. Wir enden mit einem sogenannten Flex-Kontext. Elemente innerhalb eines Flex-Kontextes verhalten sich sehr anders als Ihre gewöhnlichen Blockelemente. Werfen wir einen Blick auf ein Beispiel, so habe ich hier sind die gleichen Demo-Website. Ich habe einige zusätzliche Dips mit Zahlen hinzugefügt. 123456789 Sie sind nur dibs der Klasse Box. Sie haben ein paar Stile gibt es in diesem Container, genannt Boxen, die eine Mindesthöhe von 300 Pixeln und mit 600 Pixeln haben. Sie verhalten sich also wie normale Blockelemente. jedoch Lassen Sie unsjedochvoran und wenden Sie Display Flex auf unseren übergeordneten Container Display Flex an. Wenn ich die Seite aktualisiere, unterscheidet sich das, was wir sehen werden, sehr von dem, was wir gesehen haben. Wenn ich die Seite aktualisiere, unterscheidet sich das, Wir beobachteten im schwarzen Kontext. Jedes Element, das die Eigenschaft display flex hat, wird zu einem sogenannten Flex-Container. Hier haben wir einen Flex-Kontext erstellt. Hier ist, was die W drei Spezifikationen dazu zu sagen haben. Jedes untergeordnete Endfluss-Element eines Flex-Containers wird zu einem Flex-Element. Jede fortlaufende Ausführung von Text, der direkt in einem Flex-Container enthalten ist, wird in ein anonymisiertes Flex-Element umbrochen . Also, aber es bedeutet über das anonyme Flex-Element ist, dass, wenn ich gerade so habe ich die Abschnitt-Klassenboxen , Dies ist unser Fußcontainer. Ich habe all diese Boxen gibt. All dies sind so genannte Flussmittel. Wenn ich nur einen zufälligen Text nebeneinander habe, wird es auch wie ein Flex-Element behandelt. Das ist alles, was das bedeutet. Also werden alle Elemente auf Blockebene innerhalb unseres neuen Flex-Kontextes, was ein Flex-Element genannt wird . Flex-Elemente sind Flex-Level-Boxen, was bedeutet, dass sie am Flex-Formatierungskontext ihrer Eltern teilnehmen. Das bedeutet also, dass sie sich einfach anlegen, wie Sie hier sehen können. Innerhalb jedes Flex-Elements jedoch ist der Kontext jedochrelativ, unabhängig davon, dass bestimmte Elemente Anzeigewert ist, standardmäßig ist in der Regel Block. Was das bedeutet, ist, dass, wenn ich in einem dieser Tage ein paar andere Dibs erschaffe, das ist eifrig. Ist die Klasse gleich Box One? Okay, lassen Sie uns ein paar mehr von diesen in Ordnung machen, und zu einem kühlen und dann lassen Sie uns auch voran und anders gehen. Behandeln Sie sie ein wenig, also haben wir eine Box Box Bestellung. Sie können sehen, dass diese Luft in der normalen Weise aufgelegt wird, dass ein Blockelement so sein würde . Während ein Flex-Element in einem Flick Kontext vorhanden ist, sein Inhalt immer noch in jedem Kontext vorhanden, der erstellt wird, was normalerweise standardmäßig ein Blockkontext sein wird. Wir können auch ausführen, was ich gerne Flex-Option nenne, die Flex-Kontexte in anderen Flex-Kontexten verschachtelt. Also lasst uns das schnell demonstrieren. Wenn ich die übergeordnete Box nehmen und sagen sollte, dass es Displayflex sein sollte, können Sie sehen, dass jetzt unsere untergeordneten Elemente jetzt Flex-Elemente sind. Dies ist ein neuer Flex-Kontext. Dies sind Flex-Elemente und Sie können sehen, dass wir einen anderen Flex-Kontext erstellt haben und diese Luft, die in dieser langen Art von vertikaler Dehnung wie die anderen Elemente in diesem Flex im Flat-Container angezeigt wird. Nachdem wir nun die Einrichtung eines neuen Kontexts für unsere Elemente besprochen haben, wird der Flex-Kontext die nächsten fünf Videos mit spezifischen Eigenschaften besprechen, die wir auf Flexcontainer und Flex-Elemente anwenden können . Wie immer ist der Code, den wir in diesem Video geschrieben haben, in den Ressourcen Materialien 6. Hauptachse, Querachse: Im letzten Video haben wir das Konzept der Flex-Container und Flex-Elemente in diesem Video und den folgenden Videos erwähnt . Wir werden eintauchen, was einen Flex-Container für ihn von einem Flex-Element unterscheidet und welche spezifischen Eigenschaften wir auf jeden anwenden können. Bevor wir dies tun, Allerdings müssen wir über die beiden Achsen sprechen, die spezifisch für Flexkontexte sind. Jeder Flexbehälter hat eine Hauptachse und quer über die Achse. Es ist wirklich wichtig, dass Sie nicht denken, dass diese Achsen X- und Y-Achsen oder horizontale und vertikale Achsen oder so etwas. Sie sind der Hauptzugang und die Querachsen. Der Hauptzugriff legt fest, welche Richtungselemente standardmäßig auf der Seite platziert werden. Die Hauptachse beginnt auf der linken Seite der Seite und geht nach rechts. Besprechungselemente werden horizontal nebeneinander angeordnet. Dies ist, was passiert, wenn wir Displayflex auf ein Element anwenden. Es ist untergeordnete Elemente richten sich entlang des Hauptzugriffs ihre Eigenschaften wir verwenden können, um die Richtung der Hauptachse zu ändern . Wir werden diese im nächsten Video übergehen, aber für jetzt, hier ist eine kurze Demo. So können wir hier sehen, dass wir in dieser kleinen Box einen Flex-Container mit drei Flex-Items Boxen haben . Wir haben auch einen kleinen Indikator, der uns zeigt, wo der Hauptzugang beginnt. So beginnt der Hauptüberschuss auf der linken Seite und dann werden alle Elemente entsprechend ausgelegt . Jetzt werde ich ungewöhnlich diese anderen Abschnitte, die ähnliche spielen haben. Sie können sehen, dass sie das gleiche exakte HTML-Markup haben. Sie haben nur die Richtung des Hauptzugriffs geändert. Werfen wir einen Blick auf das. So können Sie sehen, wann der Hauptzugriff am oberen Rand des Containers beginnt. Die Elemente werden entsprechend ausgerichtet. In diesem Fall, da der Hauptzugang oben ist, sind die Allium vertikal ausgelegt. Hier ist ein weiteres Beispiel, bei dem der Hauptzugang rechts beginnt und nach links geht . Sie können sehen, dass die 1. 1 jetzt ganz nach rechts ist, weil sie immer noch in Übereinstimmung mit dem Hauptzugang stehen . Und zu guter Letzt haben wir den Hauptüberschuss, der am unteren Ende beginnt. Und dann gehen 123 hoch. Der Querzugriff ist standardmäßig senkrecht zum Hauptzugriff. Es wird nur an der Spitze beginnen, wo die linke. Aber wir können auch in welche Richtung wechseln. Wir werden sehr bald sehen, wie wir den Cross-Zugang in unseren Layouts nutzen können. 7. Flex Eigenschaften: flex-direction, Flex-wrap: Im letzten Video haben wir über die beiden Achsen gesprochen, dass jeder Flexbehälter die Hauptachse und den Querzugriff hat . In diesem Video werden wir lernen, wie man diese Achsen wechselt, so dass wir verschiedene Layouts auf meinem Flocks-Container erstellen können , was der Abschnitt ist, den ich die Eigenschaft Flex-Richtung hinzufügen und ihm den Wert Row flex geben Flex-Richtungszeile. Dies wird nichts tun, weil Row der Standardwert ist, aber wenn anstatt die Flex-Richtungszeile zu sagen, ich sage Flux Direction Spalte, können Sie sehen, dass diese Änderung ist, wo der Hauptzugriff beginnt, das heißt wie gesagt, sagte vor durch diesen kleinen roten Punkt angegeben Dies ist praktisch, vor allem beim Entwerfen einer Website, die sowohl auf dem Desktop als auch auf dem Handy verwendet werden wird, weil wir wechseln können, welche Richtung Elemente werden nur durch Ändern eines Eigenschaftswerts, können wir auch den Wert verwenden. Zum Beispiel startet Ro reverse ro reverse die Flexachse auf der rechten Seite statt auf der linken Seite. Und wie Sie wahrscheinlich erraten können, wenn wir sagen, wenn es eine Spalte umgekehrt ist, wird das unten statt oben beginnen. Das ist bisher ziemlich glatt, aber es gibt ein Problem, auf das wir stoßen könnten. Wenn wir eine Reihe von Elementen nebeneinander aufgereiht haben und eines von ihnen einen Satz mit haben muss , werden sie den Container überlaufen. Wir können dieses Verhalten beheben, indem wir die Eigenschaft Flex Rap Rap hinzufügen. zuerst Lasst unszuerstdas zuerst brechen, bevor wir es reparieren. Also werden wir das wieder in Ruder ändern. Ich habe ein paar andere Boxen hier drin, die ich zu einer NCAA gehe, und dann mal sehen, wie das aussieht. Oh, nein, das ist nicht wirklich der Look, den wir suchen. Ich denke, es wäre cool, wenn all diese unter die nächste Zeile eingewickelt würden. Das ist es, was wir tun werden. Wir werden die Eigenschaft Flex Rap Flex Wrap anwenden. Also, jetzt werden diese in die nächste Zeile fließen. Wenn ich eine weitere Reihe von Boxen hinzufügen würde, würden diese auch weiter nach unten fließen. Mal sehen, wie das cool aussieht. Wie Sie sehen können, überlaufen sie immer noch die Grenzen unseres Containers, aber das liegt daran, dass ich Container zu klein ist. , um alle von ihnen zu halten, und das ist in Ordnung. Cool. Also kann ich das auch mit, ähm mit einer Kolumne tun . Also, wenn ich Flux Direction Spalte haben will und ich weiß, dass dies zu groß ist, um all diese und Spaltenform zu halten , so wird es 123 in der Spalte bekommen und dann so weiter und so weiter. Wir können die Richtung auch umkehren, indem wir Rap Reverse verwenden. Also, jetzt, anstatt dies, ändert die Richtung des Querzugriffs. Wenn wir also zum Beispiel Flex Direction Grow und Flex Wrapped Rep Reverse hätten zum Beispiel , beginnen wir hier unten unten statt und unten links. Und so oben links. Also ändern wir nur, wo der Cross Access beginnt. Wir können diese beiden Eigenschaften in einer Eigenschaft kombinieren, die Flex Flow genannt wird. Flex-Fluss ist eine Art wie der Rahmen, die border-Eigenschaft oder eine dieser anderen Eigenschaften, die Sie allen auf einmal eine ganze Reihe von Werten geben können . Das passiert, geben Sie einzelne Eigenschaftsnamen ein, also geben Sie ihm mit Flex-Fluss zuerst die Richtung, die Sie gehen möchten. Sagen wir, wir wollen, dass Theo geht und spaltet. Und dann, ob du das einpacken wolltest oder nicht, verkaufe ich es, um es einfach so zu wickeln. Da gehen wir hin. Wir haben also über Flex Direction Flex Wrap im Flex Flow gesprochen und im nächsten Video werden wir darüber sprechen, wie wir unsere Elemente entlang jeder Achse ausrichten und rechtfertigen können. 8. Flex Eigenschaften: Ausrichtungselemente, justify-content: haben wir darüber gesprochen, wie Sie die Richtung von Flex-Elementen mit Flex-Richtungsflex verwalten können, die in Flex-Fluss eingewickelt sind. Als nächstes müssen wir darüber sprechen, wie diese Elemente relativ zu ihren übergeordneten Containern positioniert werden können. Die Eigenschaften, über die wir in diesem Video sprechen werden, sind diejenigen, die mir wirklich in den Kopf gejagt haben, als ich das erste Mal lernte Flex Box hat viel von der Grunz-Arbeit aus dem Lernen von CSS genommen und es einfach alles viel einfacher gemacht. Ah, also freue ich mich, sie zu teilen. Sie sind auch ein Traum für Responsive Design als auch. Sprechen Sie in einem späteren Video über die Eigenschaften. Dafür werden wir über unsere Ausrichtungsgegenstände sprechen und Inhalte rechtfertigen. Sie machen sehr ähnliche Dinge, weshalb wir gemeinsam über sie reden. Begründen Inhalt befasst sich mit der Positionierung von Elementen entlang der Hauptachse, während eine Zeile Elemente befasst sich mit ihrer Position entlang des Querzugriffs. Lassen Sie uns also einen Blick auf beide werfen und um demonstrieren, also schauen wir uns zuerst die verschiedenen Werte für rechtfertigen Inhalt an. Ah, ich werde damit beginnen, zu sagen, dass diese Lufteigenschaften, die auf ah Flex-Container angewendet werden , also werde ich meinen Flex-Container nehmen , der der Abschnitt ist, und ich werde sagen, rechtfertigen Inhalt. Fangen wir mit Flex Start an. Eines der netten Dinge über Bs-Code ist, dass es kleine Hinweise darauf gibt, was jede der Eigenschaften tun, während Sie sie eingeben. Wie Sie sehen können, packt flex start alle Elemente an der Vorderseite des Containers. Dies sind die Standardwerte, und wir werden noch keine Änderung sehen. jedoch Wenn wirjedochdas Ende ändern, werden Flex-Elemente gegen das Ende der Zeile gepackt werden, weil Sie hier sehen können, ist dies anders als Rap umgekehrt Wenn wir rep umgedreht haben, war das der ganze Weg an der Richtig. Wie Sie hier sehen können, drücken Sie einfach die Elemente, um sie zu schreiben, anstatt sie neu zu ordnen. Also okay, also haben wir Flex und wir werden auch das Zentrum haben, das, wie Sie vielleicht vermuten, die Elemente zentriert. Und dann haben wir, ähm auch den Standardwert, der Stretch eso ist. Die Elemente werden entlang der Höhe der Seite gestreckt, aber dies ist die Standardeinstellung. Eine sehr praktische Sache, die Sie damit tun können, ist, dass Sie etwas tun können. Sie stimmen ihren Elementen sowohl horizontal als auch vertikal zu. Was viel Arbeit erfordert, wenn Sie nicht Flex-Box, sondern mit Flex-Boxen verwenden. Super einfach. Also sagen wir Online-Elemente Zentrum und dann sagen wir auch rechtfertigen Content-Center. Und da gehen wir hin. Wir haben unsere Elemente direkt in der Mitte unserer Box. Wenn Sie dies nicht mit Flex Box tun, müssen Sie ein paar ähnliche, leicht hacky Dinge tun, und es ist sehr frustrierend. Also, das ist eine Linie. Elemente in rechtfertigen den Inhalt. Es gibt 1/3 Eigenschaft, die zu dieser Familie gehört. Es wird als Zeileninhalt bezeichnet, der für Flex-Container gilt, die mehr als eine umbrochene Inhaltszeile haben . Also lassen Sie mich hier ein paar weitere Kisten hinzufügen. Wickeln sie sich ein? Jup. Sie sollten sich einwickeln. Also gehen wir zurück und sagen, äh, äh, Flix Flow Pro Rap. Cool. Jetzt wickeln sie sich ein. Der Standardwert dafür ist, dass sie sich strecken, aber wir können sagen ah, Line-Content-Flex-Start, und dies wird alle von ihnen nach oben in Richtung Start schieben. Natürlich können wir durch Flex-Ende gehen und sehen, was aussieht, wie es wird sie nach unten in die untere Mitte schieben wird, natürlich, legen Sie sie in der Mitte. Und dann haben wir auch Raum um, wie Sie sehen können und Raum dazwischen. Ich weiß nicht, ob der Platz gleichmäßig auf diesen zutrifft oder nicht. Oh, das tut es. Also haben wir Raum um Raum gleichmäßig und Raum zwischen, wie Sie mit einer Zeile Elemente sehen konnten und rechtfertigen Inhalt hilft uns, eine Menge Layout-Probleme zu lösen, die sonst hätten wir eine Menge Handarbeit zu tun, um zu lösen. Das ist also nur einer der vielen Vorteile der Verwendung von Flex-Boxen. Die Möglichkeit, Online-Elemente zu verwenden und Inhalte zu rechtfertigen, ist, dass Sie Platzobjekte hinterlassen. Nun, da wir über diese beiden gesprochen haben und wie Atome auf der Seite ausgerichtet sind, wir als nächstes darüber sprechen, wie man Artikel wachsen und bestellen kann, damit wir ihre Größe und die Reihenfolge kontrollieren können , in der sie erscheinen 9. Flex Eigenschaften: Flex-Grow, Flex-Basis, Order: Jetzt, da wir wissen, wie Elemente zu setzen, wo wir sie wollen. Lassen Sie uns darüber sprechen, wie Sie ihre Größe anpassen können. Um dies zu tun, werden wir verwenden, um Eigenschaften Flex Räume und Flex wachsen. Flex-Basis beschreibt die Grundgröße eines Flex-Elements entlang der Hauptachse. Also okay, das ist ein bisschen schwer zu verstehen. Lasst es uns ein bisschen zusammenbrechen. Also hier habe ich eine andere Version meiner Boxen in ihrem Flex-Container. Ähm, es gibt fünf verschiedene Kisten. Jeder von ihnen ist ein div innerhalb eines Abschnitts, also kann ich sie alle mit diesem Ziel ansprechen und sie dann einzeln mit den Klassen . Und dann hier ist mein Abschnitt. Es hat Display-Flecks drauf. So ist es Bi Flex Container. Also möchte ich, dass jedes dieser Geräte 25 Pixel breit ist. Ich möchte darauf hinweisen, dass ich auf diese bestimmte Sache super gezoomt bin. Also sind es 25 Pixel normalerweise nicht so groß, aber ich möchte, dass jeder von ihnen 25 Pixel hat. Was? Also meine Standardantwort rechts wird sein, zu sagen, äh, was, 25 Pixel, die normal und vernünftig erscheinen, richtig? Okay, jeder von ihnen ist 25 Pixel. Was? Nun sagen wir, ich möchte, dass es tatsächlich Spalten sind. Richtig? Also möchte ich diese einfach umdrehen, so dass die eine oben ist und dann 2345 runter gehe ich immer noch will, dass sie das ganze mit aufnehmen. Ich möchte immer noch, dass sie Zehe sein müssen, dass 25 Pixel, die ich erwähnt habe, behalten. Außer, dass ich jetzt eine Höhe sein wollte, statt eines was? Also lasst uns zuerst versuchen. Anwenden der Flexrichtungsspalte Okay, nun, sie sind so aufgereiht, wie ich sie wollte, aber sie sind alle noch 25 Pixel breit. Es hat sich nicht geändert, weil ich jetzt möchte, dass sie 25 Pixel hoch sind anstatt 25 Pixel breit sind. Um so etwas zu beheben, anstatt Breite oder Höhe zu verwenden, verwenden wir eine neue Eigenschaft namens flex basis. Flex-Basis Flex Basis beschreibt die Messung des Elements entlang der Hauptachse. Also jetzt diese Luft 25 Pixel hoch entlang des Hauptzugangs, der am oberen Mann beginnt, geht nach unten. Wenn ich diese Flex-Richtungsspalte loswerden sollte, würde ich sie 25 Pixel breit entlang des Hauptzugangs bekommen , der von links nach rechts geht. So funktioniert die Flex-Basis. Ich möchte darauf hinweisen, dass die Flex-Basis nicht unbedingt ein Sprichwort ist wie „ Oh, ich will, dass dies genau dieser Wein ist. nicht unbedingt ein Sprichwort ist wie „ Oh, Oh, Also, wenn ich dieses ganze div sagen sollte, ist dieser ganze Abschnitt 300 Pixel Wein. Aber wenn ich die Flex-Basis sage, 300 Pixel zu sein, wird es das nicht tun, weil es nicht über den Container hinaus erweitern möchte. Wenn ich wollte, dass es tatsächlich 300 Pixel breit ist, müsste ich Männer benutzen. Was in welchem ist das Minimum mit diesem bestimmten Element erlaubt? Wie Sie sehen können, ist das Festlegen der Flex-Basis eines Elements nicht dasselbe wie das Setzen mit. Es kann immer noch erweitern oder schrumpfen, je nachdem, wie viel Platz verfügbar ist, die Basis gibt es nur eine Richtlinie, wo zu starten. Nun, wenn wir über das Erweitern eines Elements sprechen wollen, werden wir die Eigenschaft flex wachsen verwenden. Ich werde diese Männer loswerden und zu unserem normalen Layout dieser Typen zurückkehren. Und dann werde ich eine Flex-Grow-Eigenschaft mit dem Wert eins auf alle anwenden, die Sie zusammen sehen können, was das tut. Es nimmt den zusätzlichen Platz, den wir hier haben. Sub teilt es in so viele Einheiten, die wir hier haben, und wendet eine Einheit des zusätzlichen Raums auf jede an, was den Effekt hat, dass sie gleichmäßig verteilt werden. Jetzt haben wir Flex angewendet wachsen eine Zehe alle fünf dieser Elemente, was bedeutet, dass wir den zusätzlichen Platz nehmen und unterteilen ihn in fünf Teile und dass die Anwendung eines Teils auf jedes dieser fünf Elemente. Aber wenn ich das abnehmen sollte, so dass wieder so aussehen und dann Flex anwenden, wachsen Sie eins zu nur einem Element. Unsere erste Box, die den ganzen zusätzlichen Platz belegen wird, weil es nur ein Element gibt , auf das wir es anwenden müssen. Nun, wenn ich wollte Flex anwenden, eins zu meiner zweiten Box wachsen, können Sie sehen, dass die verbleibenden Leerzeichen jetzt zwischen ihnen haben, kann ich auch verschiedene Zahlen verwenden , um unterschiedliche Mengen an Wachstum auf jedes Element anzuwenden. Wenn ich also Flex sagen werde, eins auf der ersten Schachtel wachsen und Flicks auf die zweite Box wachsen, wird das so aussehen. Also, was wir tun, ist, dass wir diesen zusätzlichen Platz nehmen, der hier drüben zur Verfügung stand. Wir addieren alle Flex-Wachstumszahlen, die in diesem bestimmten sind oder die in diesem Fluss-Container sind, also haben wir drei. Also teilt es diesen zusätzlichen Platz in drei und dann diese Stücke extra Platz auf. Es teilt sie auf jedes der Sub-Boxen auf der Zahl, dass sie Flex wachsen. Die Zahl ist, so dass dieser ein Stück zusätzlichen Platz in diesem bekommt zwei Stücke zusätzlichen Platz. Flex Grow ist eines der schwierigeren Konzepte in Flex Box zu verstehen. Wenn Sie das Gefühl haben, dass Sie ein wenig mehr Hilfe dazu verwenden könnten, es zu verstehen, habe ich einen Artikel in den Ressourcenmaterialien verknüpft, den Sie sich ansehen können, der einige detaillierte Illustrationen und einige Erklärungen der gesamten Mathematik enthält , die involviert ist , da der Browser seine Berechnungen durchführt. Die nächste Eigenschaft, mit der wir reden müssen, ist die Bestellung Eigentum. Die Bestelleigenschaft ermöglicht es uns, unsere Flex-Elemente neu anzuordnen, ohne den Quellcode zu ändern. Dies ist zum Beispiel für S C O hilfreich . Es erlaubt, . dass wichtige Inhalte zuerst im Quellcode erscheinen, auch wenn er nicht zuerst auf der Seite erscheint . Verwenden Sie die Eigenschaft order. Alles, was wir tun müssen, ist, Ordnung anzuwenden und ihm dann eine Nummer zu geben. Ich werde sagen, Bestellen 54 Box eins. Wenn ich dann die Seite aktualisiere, wird Box eins am Ende sein. Wenn ich sagen sollte Box zu haben, lasst uns eigentlich geben, Box vier sollte Ordnung vier haben. Es wird jetzt neben Box Eins erscheinen. Also, jetzt ist unsere Bestellung 235 für einen. Nach der Bestelleigenschaft, die wir hier gegeben haben, ist das ziemlich cool. Es ist auch sehr hilfreich für den Umgang mit einem CEO und Responsive Design, da es uns die Flexibilität gibt , unsere Elemente neu anzuordnen, ohne das HTML-Markup unserer Seite ändern . Nun, da wir über die Dimensionierung mit der Flex-Grow-Eigenschaft und der Flex-Basis-Eigenschaft gesprochen haben und unsere Elemente mit der Order-Eigenschaft bestellen. Es ist Zeit, sich einzupacken und etwas mehr Übung zu machen, bevor wir in das Erstellen von Websites mit Flex-Büchern eintauchen . 10. Flexbox Froggy: wir haben über Richtung, umwickelte Ausrichtung, Begründung, Größe und Ordnung gesprochen umwickelte Ausrichtung, Begründung, . Aber es gibt immer mehr zu lernen, um mehr zu üben. Wenn Sie wirklich wollen, um Ihre Flex-Dollar üben, Ich empfehle wirklich die Website. Flex Box Froggy Sie Confined Effect Flex Box für er dot com Grundsätzlich, was es ist, ist es eine interaktive Praxis mit Flex-Box. Sie haben diesen Frosch, den Sie brauchen, um auf die Lilie Pad zu bekommen und Sie nur die richtige Wohnungen Eigenschaft anwenden , damit es endet. Und diese Ebene wollen wir die Rechtfertigung Inhalt Eigenschaft Inhalt Eigenschaft verwenden, um den Betrug den ganzen Weg bis zum Ende des Containers zu senden . Flex, ich empfehle wirklich, das zu durchspielen. Ich habe das die ganze Zeit durchgespielt. Wenn ich nur meine Fähigkeiten auffrischen möchte. Ich habe das durchgespielt, als ich diesen Kurs zusammenstellte, um sicherzustellen, dass ich nichts vergessen habe. So weiter und so weiter gibt es auch noch eine andere Sache, die ich Ihnen zeigen möchte. Zum Glück für mich, Flex Box Robbie hat ein Niveau gewidmet, dass bestimmte denken verkauft ihn. Lassen Sie rechts auf hier ist es die Eigenschaft ausgerichtet Selbst. Eine Zeile selbst ermöglicht es Ihnen, ein bestimmtes Flex-Element zu nehmen und es anders als die anderen Elemente auf der Seite auszurichten . Also wissen Sie, wie sind Einzelposten? Eigenschaften sind Dinge wie, um Flex, Start Flex, End-Center So weiter und so weiter, allein über den Zugriff. Nun, wenn wir wollen, haben wir ein Element, das wir am Anfang oder am Ende einer Seite getrennt von den anderen umgebenden Elementen setzen wollen . Wir wenden die Eigenschaft an, richten sich selbst an diesem bestimmten Flex-Element aus. Also werden wir sagen, Verbündeter im Selbstcenter, und Sie können sehen, dass wir diesen Frosch der Klasse haben. Gelb ist jetzt in der Mitte, während alle anderen Frösche noch oben ausgerichtet sind und wir hätten uns tatsächlich den ganzen Weg hinunter bewegt, um zu biegen. Und da gehen wir hin. Soweit ich es betrifft, wo Sie alle Flex-Eigenschaften berührt haben und wir wissen, wie Sie sie auf verschiedene Elemente anwenden können, können wir jetzt beginnen und einige Layouts mit Flex-Box erstellen 11. Das Holy Grail: und dieses Video, werden wir eine Layup-Beschreibung machen. Wir werden es mit Flex Box lösen, und dann werden wir durch das Leben reden. Das Lösen mit Flex-Mooren ist die beste und effizienteste Wahl, die das Layout lösen wird , heißt das Heilige Gral Layout. Du hast es schon mal gesehen, etwa 1.000.000.000-mal. Es sieht so aus, um es in Worte zu fassen. Das Layout „Holy Gral“ hat eine fließende Mitte, was bedeutet, dass sich die mittlere Spalte mit ändert, wenn sich der Browser ändert und mit Seitenleisten fixiert . Alle haben die gleiche Höhe. Die mittlere Spalte wird zuerst in der H zwei angezeigt. Mel, jede Spalte kann den meisten Inhalt haben. Es hat eine feste Höhe, Kopf- und Fußzeile, die die Breite der Seite überspannt. Es hat eine Fußzeile, die mindestens den unteren Rand des Browserfensters erreicht. Unabhängig von der Höhe des Inhalts, ohne absolute oder fixe Positionierung zu verwenden, benötigt es nur ein zusätzliches Element und es verwendet so wenig CSS wie möglich. Nun ist diese Beschreibung aus einem Artikel auf einer Liste abgesehen mit dem Titel „Heiliger Gral Layout“ entnommen. Ich habe es verknüpft, und die Ressourcenmaterialien werden von diesem HTML aus funktionieren. Es sieht einfach so aus. Wir haben unser Element des Hauptelements auf Artikel zwei asides und eine Fußzeile gehabt, das ist es auf. Wir werden Flex-Box verwenden, um dies in etwas zu verwandeln, das wie das Bild aussieht, das ich Ihnen zuvor gezeigt habe . Also habe ich basierte Stile erstellt, die uns nur etwas Farbe geben. Wir haben die Struktur unserer H zwei Münder hier in unserem Dokument aufgestellt. Fangen wir an, etwas CSS zu schreiben. Es scheint mir, dass ein guter Ort, um zu beginnen wäre, den ganzen Körper des Flex-Containers eso wir werden dio Display haben sollte Flex sieht cool aus. Okay, jetzt haben wir diese wunderbare Flex-Sache vor sich. Lassen Sie mich einen Blick auf das werfen. Wie Sie sehen können, möchten wir, dass der Körper die volle Höhe des Browserfensters hat. Ähm, aber im Moment ist es nur was, 348 Pixel hoch. Was wir tun werden, ist, dass wir diese Höhe nehmen, und wir werden sagen, dass die Männerhöhe des Körpers 100 V h v h für Vieux Port Höhe stehen sollte . Ähm, und was das tun wird, ist, dass es unserem Körper Container sagen wird, dass 100% der Höhe des Browserfensters sein muss . Dann müssen wir auch die Flex-Richtung ändern, da wir möchten, dass die Kopfzeile oben in der Fußzeile unten sein soll. Ähm, also sagen wir „Flexrichtungsspalte“, die uns wieder da zurücklassen wird, wo wir angefangen haben. Aber wir wissen, dass hier unter der Haube viele verschiedene Sachen los sind. Okay, jetzt, da wir das eingerichtet haben, werde ich voran gehen und diese Beschreibung der Kopfzeile und der Fußzeile als eine gleiche Höhe angehen. Also werden wir sagen, Kopf- und Fußzeile, Fuß sie werden beide haben, äh, Flex-Eigenschaft Flex-Basis von 150 Pixeln, so dass sie ihre gleiche Höhe geben. Also habe ich diesen Flex-Container. Es verbringt die gesamte Höhe des Browserfensters, aber ich habe all diesen zusätzlichen Platz am Ende. Ich möchte all diesen zusätzlichen Platz nehmen und es meinem Hauptelement geben. Also werde ich sagen, Maine wird ein Flex Grow Eigentum von einem haben. Da gehen wir hin. Also, jetzt kommt das zu, wie unsere Beschreibung aussah. Wir haben die Kopfzeile an der Spitze. Wir haben den Fuß oder den ganzen Weg unten. Auch wenn es hier noch keinen Inhalt gibt. Wir wollen auch, dass unser Hauptbehälter ein Flussbehälter ist. Also werden wir sagen, äh, Display Flex auch hier. Ehrfürchtig. Jetzt bleibt nur noch die Größe dieser Seitenleisten zu ändern. Die Koteletten sind also beide Seitenelemente, und sie werden eine Flex-Basis von 200 Pixeln haben, so dass sie eine gleiche Größe haben. Und dann wird unser Artikel-Tag den ganzen verbleibenden Platz hier haben. Also sagen wir Flex, wachsen eines für diesen Artikel-Tag, und dann müssen wir es einfach bestellen. Die linke Seitenleiste hat eine Klasse von links, also werden wir Ordnung Null sagen. Der Artikel muss eine Bestellung haben, und dann muss unsere rechte Seitenleiste um drei bestellt werden. Und da gehen wir hin. Wir haben diese Schicht gemacht. Es war super schnell und einfach mit Flex-Box. Ich möchte Ihnen nur kurz einen kleinen Codeausschnitt zeigen, wie die Lösung ohne Flex-Box aussieht . Das ist extrem hässlich. Wenn Sie jemals eine so große negative Marge haben, haben Sie etwas falsch gemacht, und Sie sollten wahrscheinlich überdenken, was Sie mit Ihrem CSS tun. Also haben wir dieses Layup-Problem mit Flex-Box gelöst, und wir haben ein wenig y Flex-Boxen erkundet, die richtige Wahl für diese Art von Sache. Aber es gibt immer noch einige Fehler und unsere Lösung. Zum Beispiel, wenn wir voran gehen und einen Blick darauf werfen, wie das aussieht, wenn wir den Bildschirm kleiner machen, zum Beispiel, wenn es ein mobiles Gerät ist, beginnt es ein wenig funky zu suchen. Wenn wir den Bildschirm klein genug machen, reagiert er noch nicht. Wir werden die nächsten paar Videos damit verbringen, über Responsive Design zu sprechen, was es ist und wie wir Flex-Box verwenden können, um unsere Designs reaktionsschnell zu machen. 12. Sich anpassendes Design: Also unser Holy Grail Layout, das wir mit Flex-Boxen ziemlich cool gebaut haben, aber es hat immer noch einige Fehler. Wie ich bereits erwähnt habe, ist es nicht sehr ansprechbar. Bevor wir voran gehen und eine Responsive machen, werden wir ein wenig darüber sprechen, was responsive Design ist und was es bedeutet. Der Begriff responsive Design wurde 2010 von Ethan Marcotte geprägt. Hier ist, was er dazu zu sagen hat. Responsive Webdesign ist der Ansatz, der darauf hindeutet, dass Design und Entwicklungauf das Verhalten der Benutzer und die Umgebung basierend auf Bildschirmgröße, Plattform und Orientierung reagierensollten auf das Verhalten der Benutzer und die Umgebung basierend auf Bildschirmgröße, Plattform und Orientierung reagieren . Nun, Entwerfen auf diese Weise mit auf ich zu dem, was der Benutzer zur bestimmten Zeit braucht, ist es etwas, das spezifisch für Bildschirme ist, oder? Wenn Sie für den Druck entwerfen, können Sie die Dinge nicht reaktionsschnell machen. Das Entwerfen für Bildschirme unterscheidet sich von Natur aus von der Gestaltung für den Druck. Wegen dieses Konzepts, das Frank Camaro Flussmittel nennt. Flux ist das Konzept, dass , dass der Bildschirm veränderbar ist. Es kann sich im Laufe der Zeit ändern. Ähm, mein gutes Beispiel dafür ist ein Excel Dokument. Sie können die Spalten neu anordnen, Sie können die Rose so weiter und so weiter neu anordnen, während Sie mit einer ausgedruckten Tabelle ursprünglich nicht die Personen, die für Web entwerfen, Druckdesigner waren. diesem Grund sehen viele frühe Webdesigns in den neunziger Jahren und in den frühen zweitausenden viel sehr boxy aus. Sie ändern sich nicht gut. Sie werden mit Tabelle so weiter und so weiter gebaut, weil die Designer daran gewöhnt waren, für den Druck zu entwerfen , so dass sie über die gleiche Art von Werkzeugsatz wie sie daran arbeiteten. Aber sobald die Leute die Anzeige begannen, das Internet auf verschiedenen Bildschirmgrößen zu betrachten, so sobald es begann, verschiedene Größen von Monitoren zu geben, sobald die Leute begannen, Dinge auf ihren Telefonen zu betrachten , usw. etcetera wurde es ziemlich schnell offensichtlich, dass sich die Art und Weise, die wir über das Design für den Bildschirm gedacht haben , ändern musste. Hier ist eine Definition einer Webseite aus einem Artikel mit dem Titel The Web's Grain von Frank Camaro . Ah, Webseite ist eine naturalistische Oberfläche unbekannter Teile, bestehend aus kleinen, einzelnen unveränderlichen Elementen aus mehreren Aussichtspunkten besteht, die zu einem lesbaren Loch zusammengebaut sind. Jetzt gibt es hier ein paar Dinge, die ich einzeln auspacken möchte. Die 1. 1 ist dieses Konzept von Edgell ist ISS. Wenn Sie schauen Wenn Sie über eine Webseite nachdenken und Sie darüber nachdenken, welche Form Ihre Webseiten, die erste Antwort Recht ist, es als ein Rechteck zu betrachten, weil das Browserfenster rechteckig ist . Aber in Wirklichkeit ist es mehr wie eine unendliche Oberfläche, die verbindet verbringen potenziell, unendlich in jede Richtung. Richtig, Da Sie in der Lage sind, zu scrollen, können Sie in verschiedene Richtungen scrollen. Es könnte sogar Elemente der Interaktivität geben. Wenn die Website verantwortlich gemacht wird, Musik, oder wenn sie in der Lage ist, auf Ihre Umgebung zu reagieren, würde ich sagen, dass das Teil der Form ist es. Das ist also ein Element dieser Definition. Ein weiteres Element ist dieses Konzept der Neuzusammensetzung oder von Elementen, die verschoben und wieder zusammengesetzt werden können, um verschiedene Versionen derselben Bohrung zu erstellen . Ich werde dir eine Grafik zeigen, die dir dabei hilft, das zu verstehen. Auf der linken Seite. Hier haben wir ein Bild von der Mona Lisa. Wir können uns die Mona Lisa als Entwurf für Druck vorstellen, die statisch sind. Es ändert sich nicht auf der rechten Seite. Wir haben einen Schreiner von David Hockney. Nun, das ist viel mehr wie das Design für Web. Sie können sehen, dass wir all diese kleinen Einzelelemente haben. Es gibt eine Menge Bewegung in diesem speziellen Stück. Wir können uns vorstellen, dass wir, wenn wir einige dieser Fotografien herausnehmen und sie in einer etwas anderen Reihenfolge neu anordnen würden, immer noch den gleichen Kontext des Ganzen erhalten würden. Das ist eine Menge wie, wissen Sie, über Ihre Webseiten nachzudenken, die Sie entwerfen. Sie können sie als kleine, einzelne Stücke eines größeren Lochs betrachten , die Sie bei Bedarf neu anordnen können. Also werfen wir einen Blick auf diese Definition wieder auf Kantenliste, Oberfläche unbekannter Proportionen. Also sprachen wir über die Form einer Website und darüber, wie wir nicht wissen, wie groß sie ist, bis wir sie überprüft haben. Bestehend aus kleinen, einzelnen unveränderlichen Elementen, sind dies Abgaben und Spannweiten usw., die zu einem lesbaren Loch zusammengebaut sind. Nun, Verwaltung dieser Art von Wiederaufbau ist das, was wir tun, wenn wir responsive Design tun, weil wir nicht denken sollten, dass responsive Design die Bruchpunkte einer Website verwaltet oder wo es beginnt, seltsam aussehen. Wo das Layout anfängt, so weiter und so weiter zu brechen, sollten wir es in Bezug auf die Neuzusammensetzung denken . Wir nehmen die gleichen Elemente, die wir bereits haben, und fügen sie in ein anderes , lesbares Ganzes zusammen. Der Job eines Designers oder Entwicklers. Dies, um Seite zu strukturieren, die zu jedem Zeitpunkt, unabhängig von der Größe des Bildschirms oder des Geräts des Benutzers, der Benutzer sieht die Informationen, die sie am meisten benötigen. Eines der schönen Dinge über Flex-Boxen, dass es macht es wieder zusammenbauen so viel einfacher zu verwalten, wie wir im nächsten Video sehen werden. Aber ich möchte dich mit einem letzten Gedanken überlassen. Responsive Design geht nicht nur darum, sicherzustellen, dass die Website in allen Größen gut aussieht. Es geht auch darum, die individuellen Bedürfnisse des Nutzers zu antizipieren. Wir sprechen hauptsächlich im Kontext des visuellen Designs, aber dies erweitert Teoh Dinge wie wie der Inhalt der Website strukturiert ist, wie sollte. Die wichtigen Informationen sollten näher sein, die Spitze auf einem mobilen Gerät, weil es eher ein Schmerz ist, nach unten zu scrollen. Es sollte sein, wie einfach die Website ist, auch auf dem Bildschirmlesegerät zu lesen. Das ist ein weiterer Teil des Responsive Designs. So weiter und so weiter, Designer nähern sich nur einem Problem mit durch ein kreatives Objektiv, um eine schöne Lösung zu finden . Wenn dieses Thema für Sie interessant ist, so wie es ist. Für mich ist Responsive Design definitiv eines meiner Lieblingsdinge, über die ich sprechen muss. Ich empfehle wirklich Artikel von Frank Camaro. Die erste hat den Titel What Screens Will und die in der zweiten ist mit dem Titel The Web Grain Ich habe beide in den Ressourcen Materialien verlinkt. 13. Responsive Design: Medienabfragen: also haben wir die Theorie hinter Responsive Design diskutiert. Lassen Sie uns nun darüber sprechen, wie Sie es tatsächlich in unserer Website implementieren können, indem Sie etwas namens Medienabfragen verwenden. Medienabfragen sind es, was es uns ermöglicht, unsere Websites für variable Bildschirme anpassbar zu machen. Hier ist die Syntax für die sofortige Abfrage, die für Bildschirme mit einer Breite von 10 25 Pixeln gilt . Es macht Sinn, wenn Sie es laut zu Hey, Medien, lesen , wo der Bildschirm Größen über 10 25 Pixel. Sie können Größenbasierte Medienabfragen ohne anzugeben, dass daher Bildschirm. Aber normalerweise ist es gut, so spezifisch wie möglich zu sein. Sie können auch Druckbedeutung angeben, wenn jemand geht, um Ihre Seite und Sprache für Bildschirmlesegeräte auszudrucken , um Medienabfragen auf Ihrer Seite funktionieren zu lassen. Sie müssen etwas hinzufügen, das als Meta Vieux Port-Tag bezeichnet wird. Das heißt, dieser hier. Das ist etwas, das Sie viel googeln werden. Ich empfehle, dass Sie nur buchen Markt. Ich habe einen Link mit mehr darüber aufgenommen, was der Meta-Ansichtspunkt-Angriff in den Ressourcenmaterialien ist . Also im Moment haben wir dieses Holy Gral Layout, das seltsam aussieht, wenn der Bildschirm klein genug wird . Lassen Sie uns also eine Medienabfrage hinzufügen. Das erste, was ich tun werde, ist, dass ich sagen werde, ähm, dass ich will, dass das eine Medienabfrage ist. Vier Telefongrößen, die Telefongröße, mit der ich normalerweise beginne, beginnt bei 7 68 Pixel. Also werde ich auf dem Medienbildschirm sagen, und wir werden sagen, das sollte für Bildschirme gelten, die weniger als 768 Pixel breit sind. Also sagen wir, Max mit muss 7 68 p x sein und dann haben wir unsere Medienabfrage. Wir können hier anfangen, einige Regeln zu lesen. Ich denke, die 1. 1, die wir angehen werden, ist dieser Hauptbereich hier in der Mitte, weil wir als Spalten aufstellen wollten, anstatt seine eine Reihe, ich werde die kleinere Bildschirmgröße haben. Also, was wir tun werden, ist, dass wir sagen, Haupt sollte Flex-Richtung sein. Nennen Sie ihn cool. Jetzt, wenn ich die Seite aktualisiere und die Größe ändere, sobald sie auf die Größe gelangt, die sie in die Spaltenrichtung wechselt. Das ist so schön. Ich liebe Flex-Box speziell, einfach Dinge wie diese zu tun, ohne sich um irgendwelche Floats kümmern zu müssen oder wie, wo Elemente auf der Seite positioniert sind. Aber ich könnte einfach sagen, Flicks Richtung ruhig und es sumpft automatisch. Ich liebe es so sehr. Okay, das nächste, an dem wir arbeiten müssen, sind die Befehle, die der Vertrag zuerst kommt, und dann die linke Leiste auf der rechten Seitenleiste. Das ist auch ziemlich einfach. Alles, was wir tun müssen, ist zu sagen, äh, dass Linke Grenze eins sein sollte, äh, Recht bekommt seine bekommt zu bleiben. Bestellen Sie drei, wie es jetzt ist, und wir werden sagen, dass Maine Ordnung Null sein sollte, und das war's. Das war alles, was wir tun mussten. Ich liebe es. Welche Medienabfragen sollten Sie also in ein Projekt aufnehmen? Es hängt wirklich davon ab, was Ihr Projekt benötigt. Es ist sinnlos, eine Medienabfrage für jeden einzelnen Gerätestandort zu schreiben, da es buchstäblich Hunderte von verschiedenen Gerätegrößen gibt. Mein Rat ist, mit dem Design für Mobilgeräte zu beginnen und dann alle Ihre Desktop-Stile innerhalb einer Desktop-Medienabfrage zu setzen , wie normalerweise eine gute Idee, mit Mobile zu beginnen, da Design einfacher als ein additiver Prozess ist als ein subtrahierter Prozess. bedeutet, dass Sie mit der grundlegendsten Version Ihrer Website beginnen sollten, die normalerweise die mobile sein wird. Wir sind sehr nah daran, das Projekt zu erledigen. Und das nächste Video. Ich werde einige gängige Layout-Techniken und Design-Trends betrachten, um Ihnen bei der Gestaltung Ihres Projekts zu helfen . 14. Layout 101: Bisher haben wir gelernt, wie man eine Seite zusammenstellt. Worüber wir noch nicht gesprochen haben, ist, was wir auf die Seite setzen und wie es aussieht, wenn Sie es dort platzieren . Das ist, Ah, ganzes Thema für ein ganz anderes Video Siri, also werde ich nicht das gesamte Website-Design in diesem Video abdecken . Aber ich werde ein paar Grundlagen eingehen, die Ihnen helfen werden, während Sie an Ihrem Projekt arbeiten. Die erste Sache ist, die Lesbarkeit Ihrer Website zu berücksichtigen. Ein Fehler, den ich bemerkt habe, dass viele neue Designer machen, ist, dass sie den Text in voller Breite oder wirklich, warum , ah, gute Faustregel ist versuchen, Ihren Text irgendwie schmal er und wie Blöcke zu halten. Es gibt eine Länge, und ich werde die Ressourcenmaterialien, die ein Spiel haben, das Sie spielen können, das Ihnen helfen wird , das richtige Verhältnis der Zeilenhöhe herauszufinden, auch. Uh, Absatzlänge zu Absatz mit einem großen Trend und Webdesign im Moment ist, etwas zu haben , das einen Helden Abschnitt genannt wird, der ein großer Abschnitt am oberen Rand der Seite ist, der ein Bild und einen großen Text enthält . Ich habe einige Auswahlen aus Anzeigen, die ich in der U-Bahn gesehen habe, kuratiert, und ich möchte, dass Sie feststellen, wie lebendig all diese Bilder sind und wie Aufmerksamkeit sie bekommen . Schauen Sie sich auch die Typografie an. Typografie ist eines dieser Details, die nicht super wichtig erscheinen, aber wenn es wirklich gut ist, ist es eines jener Dinge, die man überhaupt nicht bemerken sollte. Eine andere Sache, die viele dieser Seiten demonstrieren, ist wirklich ein guter Sinn für Rhythmus, wie Sie die Seite nach unten scrollen, etwas, was viele Websites tun, ist, dass sie separate separate Abschnitte haben. Vielleicht möchte ein Bild und ein Bild, oder sind mehrere auffällige Bilder. Dieser hat eine Reihe von Produkten. Dieser hat einige Aufrufe zur Aktion genannt Die Aktion ist ein Bereich, der wie ein kleiner Autotext hat . Und dann irgendwo können Sie klicken, um Maßnahmen zu ergreifen, die entweder verkaufen Sie das Produkt oder so etwas. Sie werden auch häufig so etwas sehen. Diese drei Spalten Layout, entweder mit drei verschiedenen Produkten oder drei Schritten, die Sie ausführen können, oder einige Informationen über ein bestimmtes Produkt. Der Rhythmus einer Seite richtig zu machen, braucht in der Praxis viel Zeit. Wenn es ist, wenn Sie sich nicht gut über den Rhythmus Ihrer 1st 2 Websites fühlen. Das ist in Ordnung. Das bedeutet eigentlich, dass du an einem guten Ort bist, was ist, dass dein Geschmack davor läuft, wo deine Fähigkeiten sind. Das ist wirklich ein guter Ort, denn Sie können immer Ihre Fähigkeiten verbessern. All dieses Zeug baut auf einem wirklich soliden Fundament guter Farbe und guter Typografie auf. Die Auswahl von Farben und Schriftarten ist beide Kurse für sich. Aber ich möchte darauf hinweisen, dass ein paar Ressourcen ist, dass Sie nicht besuchen konnten, um Ihnen zu helfen über beide Dinge zu lernen. Diese Seite, die Ammon jetzt nennt sich Color Claim. Es ist von zwei voreingenommenen Van Schneider. Er entwarf Spotify, und er hat die Website, die eine Reihe von wirklich guten Farbpaarungen hat. Ich gehe auf diese Seite, wenn ich die Farben für ein neues Projekt und dann eine andere Website, die Sie ihn praktisch finden würden, wenn Sie suchen gut. Typografie ist der Website-Typ Wolf. Diese Seite hat nur viele Beispiele von Websites mit guter Typografie. Betrachten von Beispielen ist eine der besten Möglichkeiten, wie man diese Art von Sache macht. Und natürlich natürlich ist Google-Schriftarten immer eine großartige Ressource. Wie immer habe ich Links zu einer Reihe dieser Websites in den Ressourcenmaterialien gesetzt. Im nächsten Video werde ich zeigen, wie ich ein Projekt wie das bauen würde, das Sie bauen werden. 15. Komplette Build: es ist endlich Projektzeit. Wie aufregend, aber ich werde in diesem Video tun, ist, dass ich eine Demonstration eines Projekts wie das, das Sie für diesen Kurs machen werden. Also, was ich tun werde, ist, dass ich mich für eine Website entscheiden werde, die ich bauen möchte. Ich werde es entwerfen. Ich werde es verdrahten. Ich werde und dann werde ich es mit H zwei Mountain CSS bauen. Die Seite, die ich bauen werde, wird sein, ich denke, ein Raumschiff. Ähm und ich werde dir meinen Schöpfungsprozess mit all den Dingen zeigen, die ich mache, um die Seite vorzubereiten. Und Sie können das nehmen, was ich tue, und es an Ihre eigenen Bedürfnisse anpassen, während Sie Ihr Projekt erstellen. Wie ich bereits erwähnt habe, ziehe ich meine Drahtfreunde wirklich vor. Sie werden nicht von Funktionen verschiedener Drahtangst Programme abgelenkt, beginnend mit meinem Heldenbereich. Wird großen Text in einer kleinen Arbeit mit Schaltfläche, die Aktionsbereich genannt, die Text auf einem Autotext hat , dann ein Abschnitt, der drei Spalten mit einem Titelbild und eine kleine Beschreibung unter jedem Bild für jede von denen hat , dann wird ein Bereich, der es hat, ein Bild auf der linken Seite und dann einen Text auf der rechten Seite haben , gefolgt von einem weiteren kurzen Absatz und dann nicht zuletzt eine Fußzeile mit drei Spalten zum Text und einem Bild. Eine andere Sache, die das ziemlich gut aussieht. Bis jetzt, eine andere Sache, die ich gerne mache, ist, dass ich das aufspalte und wie viele Abschnitte haben werden also eins, 23 für fünf und dann last but not least, diese Fußzeile ist unser sechsten Abschnitt. Dann unterteile ich auch gerne Abschnitte in Dibs, die ich denke, dass ich auf meiner Seite brauchen werde. Es gibt also einen dieser ganze Heldenbereich, Vielleicht wird dieser SMS-Knopf ein anderer sein. Dann wird unser jeder unserer Säulenbereich ein div sein. Und dann wird jede der Spalten ihr eigenes div haben. Das Bild und die Phantasie wäre ein div auf. Dann wurde dies auch eingeführt, so dass wir es von den Seiten ein wenig kompensieren können. Es muss richtig verteilt werden, und dann wird jede dieser Spalten sein, die sie gehört. Wenn mir das wirklich hilft, was zu sehen? Die Struktur meines HTML wird jetzt ziemlich glücklich damit sein Alles, was bleibt, ist die angefangene Arbeit an der Beschichtung. Also werde ich anfangen, indem ich ein Raumschiff-Site-Verzeichnis mache und mein Flicks-Box-Verzeichnis mache eine Index-HTML-Datei einen Stil-Ordner und einen Asset-Ordner mache und dann innerhalb von Stilen muss ich CSS stilvoll zurücksetzen. CSS. Dann öffne es alles im Code. Ich werde auch den Index html und Chrome öffnen. Ähm, dann brauche ich meinen HTML-Fünf-Boilerplate. Gib ihm einen Titel. Bisher sieht es nach nichts aus. Das ist ziemlich cool. Wir müssen CSS hier zurücksetzen. Lassen Sie sich nicht ablenken, wie schnell ich hier tippe. Ich habe das einige beschleunigt, so dass es keinen ganzen Song brauchte, wenn Sie es ansehen, okay, ich benutze Split-Screen, damit ich gleichzeitig HTML und CSS betrachten kann. Ich verbinde meine Stylesheets. Ich brauche zum einenzumReset. Und ich brauche auch einen weiteren Link für dieses Stylesheet selbst. Wer wird sein, was all meine eigenen Stile hält? Cool. Immer noch sieht nicht wie irgendetwas aus Lassen Sie uns etwas HTML hinzufügen Lassen Sie uns mit einem Header-Tag beginnen. Das wird sein, wo unser Held ist, und dann werden wir sagen, H ein Raumschiff-Absatz mit einigen Warm-Ups und Text und dann eine Spanne von Klassenknopf, die ich später wie ein Knopf aussehen werde, anstatt nur mit etwas Text zu suchen . Sagen Sie, es ist ein Mädchen, mehr zu erfahren. Okay, cool. Also ist es da. Es sieht einfach nichts aus, aber wir wissen, dass es wie etwas aussehen kann, also lasst uns weitermachen und anfangen, es zu stylen. Mit der Kopfzeile, die Displayflex ist, sollte es eine Flexrichtung der Spalte haben und wir geben ihm eine Männerhöhe, so dass es einen Bereich am oberen Rand der Seite einnimmt. Wir werden auch sagen, ich will ein Container-Div um diese drei Elemente, aber ich hatte das bekommen. Ich habe bereits ein Containertiv, also brauche ich das nicht. Ich habe diesen Divid-Class-Held, der meinen Bedürfnissen entspricht, würde auch ein Zeilenpunktcenter sagen und Content Center rechtfertigen, so dass dies vertikal und horizontal in dieser Box zentriert ist . Wir werden sagen, alle Angriffe hier sollten Allianzzentrum sein. Wir geben ihm eine Schriftgröße und Schriftart warten auf diese h. Da gehen wir. Größer scheint nicht ganz groß genug zu sein, aber wir kommen in ein bisschen dazu. Da ist die Marge, die ein bisschen größer wird. Lassen Sie uns den ganzen Text auf dem Helden größer machen, damit wir das auch sehen können, und dann nur noch ein bisschen daran geigen. Eine Möglichkeit, Ihren Text besser lesbar zu machen, besteht darin, ihm eine Markierung von 1,4 E. zugeben zu Dieser Streifen hilft, den Text in einem Absatz zu platzieren, so dass es einfacher für das Auge von Zeile zu Zeile zu folgen. Wenn Sie das tun, müssen Sie nur sicherstellen, dass jedes Mal, wenn Sie die Schriftgröße ändern, Sie Teoh auch die Zeilenhöhe eingestellt haben, so dass nur hilft, macht die Dinge besser lesbar. Auch werde es Sand Sarah machen, weil ich finde, dass ein bisschen weniger schmerzhaft zu betrachten, wie ich entwerfe und lassen Sie uns diese Kopfzeile Hintergrundfarbe geben, so dass es einen Blick darauf werfen kann, wie es nicht ganz groß genug aussieht . Geben Sie ihm auch diese Klasse. Das ist also ein bisschen größer. Okay, das ist irgendwie das, was ich haben will. Bisher, Lassen Sie uns am ersten Abschnitt arbeiten, die RCD A oder unser Aufruf zum Handeln ist. Ich werde das kommentieren und sagen, was jeder Abschnitt endet , dass wir es alleine betrachten können , dass wir es alleine betrachten können. Cool. Also werden wir eine acht Geschichte haben, die besagt, dass dies eine Seite über Raumschiffe auf einer tatsächlichen Seite ist. Dies wäre so etwas wie kontaktieren Sie uns, um mehr über globale blah zu erfahren. Und dann würde der Button „Jetzt anrufen“ oder so etwas sagen und dann mit der Kontaktseite verlinkt werden. Aber da habe ich nicht eine andere Seite, die wieder einen Link zu und wird es so verlassen So werde ich auf meine Basis Stile der Spitze setzen. Ich werde sagen, dass jede Spanne eine Anzeige von Block haben sollte, so dass ich sie später ein wenig leichter bewegen könnte . Cool. Das ist also nicht wirklich so, wie ich will, dass das bis jetzt aussieht, aber es wird sein. Also haben wir Wir werden ein div CJ machen, um diese beiden Textelemente in cool zu setzen. Und dann werden wir sagen, dass Tops et a C T ein div verwendet, um eine Anzeige von Flex zu haben. Ich muss es auch etwas Polsterung geben und dann ein Maximum mit geben, weil ich es nicht will. Ich werde ihm eine Breite von 80% des Berichts innerhalb eines Max mit 1000 Pixeln geben, Sie wurden eine Marge Auto gegeben, die im Grunde den gesamten verfügbaren Platz nehmen und dann dieses div auf der Seite zentrieren wird . Sie können sehen, wie es das gemacht hat. Ich werde sagen, ein Wainaina-Raum zwischen, außer dass wir es entlang des Hauptzugangs tun , es sollte tatsächlich gerechtfertigt Inhalt sein. Ich verwirre die beiden immer, wenn ich versuche, solche Sachen zu machen. Cool. Also ist das okay auf der einen Seite und die H drei ist auf der anderen. Machen Sie die H drei ein wenig größer, machen Sie ein wenig kleiner, passen Sie die Strichhöhe an. Wie ich schon erwähnt habe. Ich mache das ständig. Diese beiden sind nicht ganz gleichmäßig, also werde ich eine Linie Inseln Basislinie hinzufügen, die sie einfach am unteren Rand des Textes aufwickelt . Ich habe nicht erwähnt, dass, wenn ich über einen Wein sprach Adam das erste Mal, aber es ist sehr praktisch für Fälle wie diesen, wenn Sie Elemente zu texten haben und müssen den Text selbst ausrichten . Das ist also dieser Abschnitt erledigt. Lassen Sie uns an diesem Drei-Säulenbereich arbeiten. Ich entschied, dass es diesen Abschnitt Display Flex brauchen. Also haben wir diesen drei gemeinsamen Bereich. Es wird einen Titel haben, und dann wird es diese drei Kämme haben. Lasst uns damit anfangen. Also haben wir den Abschnitt mit einem H drei n es. Hier sind einige grundlegende Fakten über Raumschiffe, die ich cool buchstabieren kann und dann haben wir ein Diff unseres Spaltencontainers und dann muss jede Balkenspalte auch ein individuelles def sein. Also haben wir Dritte angerufen, und dann werden wir dieses Ding namens Ort benutzen. Halten Sie, dass ich t. um ein paar Bilder zu greifen. Sie sind einfach wie graue Bilder von welcher Größe Sie zufällig benötigen. Es kommt als Link. Ich will es nicht als Bindeglied. Werde das los. Da ist das. Und dann meine Raumschiff-Tatsache, die so etwas sein wird, wie sie normalerweise ziemlich groß sind, was eine gute Tatsache über Raumschiffe auf dann ist, eine andere Spalte genau rechts im HTML für diese Spalten. Das ist wirklich gut, wenn Sie Ihre Klassen benennen, um sie beschreibend zu benennen, damit Sie sehen können, was sie tun sollen. Sie machen lange Reisen im Weltraum. Und dann bekam ich eine Kopie, diese ganze Sache, und dann ändere den Text wieder. Also lasst uns das anstoßen. Sie werden von extrem tapferen Männern, Frauen und Menschen angesammelt , weil wir nicht wissen, was Richter Aliens haben. Okay, so cool. Das sieht also so aus. Bisher müssen wir hier einige Dinge hinzufügen, damit wir sicherstellen können, dass dies so aussieht wie in unserem Drahtrahmen. Erstens, das erste, was wir tun werden, ist, dass wir uns damit verwirren. Ich glaube, wir werden uns mit dieser drei aneinandersetzen, damit wir es so aussehen können, wie es nötig ist . Es sind drei. Wir werden wieder das Ding tun, wo wir ihm eine Breite und Max mit und Rand geben, so dass es nicht das gesamte mit der Seite erweitert, die in diesem Bereich enthalten ist. Ich habe diese Box-Größeneigenschaft auch ein paar Mal verwendet. Wenn Sie nicht wissen, was das tut, empfehle ich, es nachzuschlagen. Es hat mit dem CSS-Box-Modell zu tun und wie es funktioniert. Hinzufügen von etwas Polsterung. Nur ein Leerzeichen aus dem Abschnitt ein bisschen mehr. Da gehen wir. Das sieht besser aus. Und dann fügen Sie einen Rand oben am unteren Rand unserer Kopfzeile hinzu, so dass wir es noch ein wenig mehr ausräumen können . Okay, dann muss unser Spaltencontainer Display flex sein, weil wir diese drei nebeneinander ausrichten wollen . Wir werden jedem die ganze Sache und Polsterung und 50 Pixel geben. Wir werden auch das gleiche tun hier oben, das ist, dass wir wollen, dass der spezifische Container von einem geringeren ist mit einem Faktor. Gelegenheit hier besteht darin, alle diese Regeln in eine Klasse zu setzen und dann diese Klasse endgültig anzuwenden . Das braucht es. Okay, jetzt waren Elemente aufgereiht, also werden wir an den einzelnen Spalten arbeiten, die sagen würden, dass jede von ihnen eine maximale Breite von 33% und ein Flex wachsen von eins haben sollte. Wir werden einen Spielraum haben, und sie wollten ihnen sagen, sie sollen die Kartongröße benutzen. Und wir werden auch sagen, dass jedes Bild und eine dieser kleinen Boxen nur ein Maximum mit dem 100% haben sollte , weil Okay. Ja, da gehen wir. Die Bilder waren früher überlaufen, so dass das bis jetzt ziemlich gut aussieht. Als Nächstes werde ich herausfinden, dass der Text aussieht. OK, also wird jede Spalte, der dritte Absatz eine etwas größere Schriftgröße haben. Es wird zentriert sein. Cool, leicht Wort. Ihre Schriftgröße wird zentriert sein. Wir geben ihm ein wenig Spielraum. Und dann denke ich, wir werden es auch ein bisschen anders geben. Höhe. Da gehen wir. Das sieht besser aus. Wir könnten vielleicht noch besser aussehen. Da gehen wir. Cool. Da ist also unser dritter Abschnitt. Der nächste Abschnitt, an dem wir arbeiten müssen, ist der mit dem Bild und dem Text direkt nebeneinander. Cool. Also werden wir an der Abschnittsklasse arbeiten, um seine 1/2 davon ist das Bild der anderen Hälfte ist das Bild und dann der Text, Text, und wir werden anfangen, indem wir schreiben. Also werden wir sagen, dass der Zwei-Haus-Abschnitt sollte Display Flex rechts vorne sein. Ja, ja. Da, los. Dann muss es das tun. Einer wird Pick Container genannt. Der andere wird als Inhalt bezeichnet. So gibt es das Bild von diesem Inhalt, den pic Container gewonnen. Anstatt tatsächlich das Bild darin zu platzieren, werden wir das Pick-Bild als Hintergrundbild festlegen, das es ein wenig einfacher macht zu verwalten, wie es auf verschiedenen Bildschirmgrößen wieder Größen. Wenn Sie eine Beschreibung dieses speziellen Problems mit einem Bild nächsten Text sehen möchten und es sieht seltsam aus, wenn die Bildschirmgröße ändern ist überprüfen Sie diesen Artikel, The Web grün. Okay, das sieht also nicht so aus, als wollten wir jetzt arbeiten. Wir möchten also, dass sowohl Container als auch Inhalt ein Flex-Wachstum von eins haben. Und dann wollen wir auch beide haben eine Flex-Basis von 50%. Cool. Da gehen wir. Sie können also sehen, dass es links ein Bild und rechts ein Bild auf einem Text geben wird . Machen Sie die Schriftart ein wenig größer, sagte die Zeilenhöhe und setzen Sie dann auch einige Polsterung auf den Inhalt tive. Da gehen wir. Das sieht ziemlich gut aus. Ein bisschen mehr Polsterung. Los geht's. Ähm, wir werden auch sagen, dass beide eine minimale Höhe von 200 Pixeln haben sollten. Wir werden ihm einen gerade Fuß Inhalt oder auf der Linie Elemente eher Mitte geben und dann sagen ihm, Flex anzuzeigen, so dass das in der Sache zentriert wird. Und dann werden wir Container auch eine Hintergrundfarbe von Grau geben, damit wir sehen können, wie das aussieht , wenn wir tatsächlich ein Bild dort platzieren. Sieht ziemlich gut aus. Und dann ist unser zweiter bis letzter Abschnitt dieser Autotext. Sie haben also eine andere Klasse von Autotext. Wir werden tatsächlich einige tatsächliche oder Minuten von dort. Also muss ich nicht weiter versuchen, , die Teile davon herauszuziehen,die ich auswendig gelernt habe. Wir gehen, unser Absatz cool. Und bis jetzt sieht das so aus wie Sehen, das geht den ganzen Weg über die Breite der Seite. Ich mag diesen Blick nicht wirklich, also werden wir das ändern. Wir werden die gleichen Regeln verwenden, wie wir es vor dem Zeug getan haben. Wir werden es standardmäßig noch ein wenig schmaler machen, nur so dass es ein wenig mehr marschieren Auto Streicheln D und dann Box-Dimensionierung abhebt. Dann machen wir es ein bisschen größer und Sie setzen eine Zeilenhöhe, sehen, wie es aussieht. Okay, das sieht ziemlich gut aus. Aber wir werden es noch größer machen. Nur, dass es hebt sich mehr und dann die Polsterung hoch. Ehrfürchtig. Und dann bleibt nur noch die Fußzeile zu tun. Wir werden einige dieser Klassen wiederverwenden, die wir vorher benutzt hatten. Also diese Spalte, Container-Klasse und dann diese Spalte, dritte Klasse, nur weil, wissen Sie, wir wissen, dass wir sie vorher benutzt haben und wir wissen, dass sie so aussehen, wie wir wollen, dass sie einige, wie, Dummy-SMS hier. Liste der bemerkten Raumschiffe umfasst die William Fall ihn, die USS Enterprise und die Wild Card und viele mehr. Und unsere nächste Kolumne. Wir werden nur noch einen Autotext über Raumfahrt haben. Coole Innovationen des 22. Jahrhunderts. Offensichtlich ist dies eine Website aus der Zukunft. Wenn ich tippen kann und dann nicht zuletzt, werden wir hier ein kleines Bild einbinden, und wir werden diesen Ort benutzen. Halten Sie, dass ich t Bild Sache wieder. Einer der Vorteile dieser Verwendung ist, dass Sie diese Bilder Art von on the fly rezitieren können nur aber die Zahlen in der URL ändern. Also entschied ich, dass ich das nicht wirklich mochte. Sieh mal, sie werden sich ändern. Welche Größe Bilder. Okay, okay. Okay. Da gehen wir. Das sieht richtig aus. Und dann eine Sache, die ich gerne mache, ist, dass ich die Fußzeile zum schwersten Ding auf der Website mache . So geht es weiter. Also der Rhythmus fließt, runter, wir machen das einen schwarzen Hintergrund, und dann geben wir ihm einen weißen, äh, Text. Okay, das ist also die Struktur unserer Seite. Bisher sieht es ziemlich gut aus. Ich bin ziemlich glücklich darüber. Was ich tun werde, ist, ich nehme das und füge dann Farben, Schriftarten und Bilder hinzu , und dann kommen wir wieder zusammen und ich zeige Ihnen, was ich ausgedacht habe. Okay. Wie Sie sehen können, hier ist unsere fertige Version der Website. Ich habe einige Farben ausgesucht, einige Bilder ausgewählt. Wir haben ein gutes, mutiges Bild an der Spitze. Die Schriftarten und ich verwende sind alle von Google Fonds. Ich wählte ein schönes dunkelblau akzentuiert durch ein paar wärmeren Farben für die Farbpalette A Z Sie sehen können, dass es beginnt, tatsächlich wie eine Website aussehen. Wir haben hier einige Hintergrundmuster, so weiter und so weiter, wie ich bereits erwähnt habe, wenn Sie daran interessiert sind, zu lernen, wie man gute Farben und Schriftarten für Ihre Website, sollten Sie sich die Sehenswürdigkeiten in der Ressource Materialien, um Ihnen bei diesem Prozess . Ein Schwung. Ich habe den Code des aktualisierten Codes mit allen aktualisierten Stilen. Dies wird auch im Ressourcenmaterial sein, so dass Sie einen Blick darauf werfen können. Grundsätzlich habe ich die Wieder Faktor-Sache gemacht, die ich bereits erwähnt habe, wo ich jeden Teil des Codes nahm, der so aussah, und dann überzeugte, dass er eine Klasse besitzt und dann weiter angewendet wurde. Diese Klasse hat sich verdreht. Das ist ein Konzept, das eine Hilfsklasse genannt wird. Es hilft wirklich. Es ist wirklich eines dieser Dinge, die wirklich hilft Modul entstehen Ihr CSS, dass Sie Teile davon wiederverwenden können , ohne alles erneut eingeben zu müssen, was etwas zu streben ist. Und im Großen und Ganzen bin ich ziemlich zufrieden mit meinem Anblick. Ich bin ziemlich aufgeregt darüber, und ich freue mich auch, was Sie in Ihrem Projekt einfallen. Und da haben Sie es, eine Internet-Website zusammen mit Flex-Box. Wie immer ist der Code für diesen Build in den Ressourcenmaterialien, und jetzt sind Sie dran. Denken Sie an einen Ideendraht, rahmen Sie ihn aus und erstellen Sie dann HTML und CSS dafür. 16. Outro / Abmoderation: Nun, Sie haben es bis zum Ende des Kurses geschafft und dieses Siri haben wir ein Tooling durchlaufen, das HTML- und CSS-Grundlagen eingerichtet hat. Was Flex-Box ist, wie man einzelne Sexeigenschaften ein wenig darüber verwendet, was responsive Webdesign ist und wie man seine Konzepte anwendet und sogar ein wenig über Layout-Design gesprochen hat, bevor Sie Ihr Projekt erstellt haben. Ich bin so froh, dass du mit mir auf dieser Fahrt mitgekommen bist und dafür etwas zu zeigen hast. Ich will dich nur mit einem Gedanken verlassen. Das Lernen von CSS braucht Zeit. Es ist unvernünftig zu erwarten, dass Sie alle CSS auf einmal verstehen. Es ist eines dieser Dinge waren egal, wie lange Sie es tun, Sie immer noch es ist ein wenig wie ein Prozess von Versuch und Irrtum. Sie müssen immer noch unsere Dinge Art von verschiedenen Eigenschaften zu verletzen, so weiter und so weiter. Sie werden viel Zeit in Ihren Entwickler-Tools verbringen, um die Dinge zum Laufen zu bringen. Das ist in Ordnung, das ist normal. Mein Rat ist, wenn Sie wirklich wollen, um diese Fähigkeiten nach unten zu bekommen, ist zunächst, spielen Flex Box, Brockie und zweitens, gehen drei oder vier Projekte wie die, die Sie gerade gemacht haben, dass wird wirklich das Wissen in Ihrem Kopf festigen, und es werden Sie in der Lage sein, zu sehen, wie Sie sich von Projekt zu Projekt verbessern. Vielen Dank, dass Sie zugesehen haben. Es war mir ein Vergnügen.