CSS Flexbox beherrschen: Alles über Flexbox erfahren und fantastische Layouts erstellen

1. Einführung: Wenn Sie ein Entwickler sind und bereit sind, Ihre Webentwicklungsfähigkeiten auf die nächste Stufe zu heben, indem Sie CSS Flexbox beherrschen. Dann ist dieser Kurs genau das Richtige für dich. Hallo, ich bin Shuffle, ein Frontend-Entwickler. Gewichte unserer siebenjährigen Erfahrung. Ich selbst habe selbst entwickelt und hervorhebend festgestellt, dass es Anfängern schwer fällt, die Konzepte von Flexbox zu verstehen. Aber das Erlernen von CSS und Flexbox ist unerlässlich , um dort Webentwickler zu werden. Deshalb habe ich diesen Kurs erstellt, um Ihnen anhand praktischer Beispiele und Projekte zu helfen, alles über CSS Flexbox zu verstehen . Am Ende dieses Kurses werden Sie in der Lage sein, CSS Flexbox in Ihren täglichen oder Postern zu verwenden , um verschiedene Arten von Layouts zu erstellen. Wenn Sie also bereit sind, CSS Flexbox zu beherrschen , sehen wir uns im Kurs. 2. Eine Flexbox erstellen: Hallo alle zusammen. In diesem Video, das wir lernen werden , wird CSS Flexbox verwendet. Nehmen wir an, wir haben hier einen Container. Und in diesem Container befinden sich mehrere HTML-Elemente. Und wie Sie bereits wissen, können die HTML-Elemente hauptsächlich von zwei verschiedenen Typen sein. Der erste Begriff ist also das Inline-Element und der zweite Begriff ist das Element auf Blockebene. Die Inline-Elemente werden also ein Stapel wie dieser nacheinander sein. Die Inline-Elemente nehmen nur den Speicherplatz ein, den sie benötigen. Also haben sie das tatsächlich in einer einzigen Zeile gefragt , bis sie nicht mehr Speicherplatz benötigen. Aber für die Elemente auf Blockebene nehmen die Elemente das gesamte horizontale Plus ein. Das wird also alles beanspruchen , was der ISP zur Verfügung hat. Jetzt werden wir die Flexbox auf diesen Container anwenden. Das Anbringen der Flexbox auf den Behälter ist also sehr einfach. Wir nehmen einfach den Container ins Visier und zeigen ihm Flexibilität. Jetzt sind wir bei Flexbox. Nun, die Begriffe im Zusammenhang mit der Flexbox sind nicht wirklich definitiv, aber wir werden diesen Container den Flex-Container nennen . Und die Artikel sind die Elemente im Set the Flex Container, wir werden sie diese Flex-Artikel nennen. Ich denke also, es wird interessanter und einfacher zu lernen sein, wenn wir das im Code machen. Also lass uns das im Code sehen. Also habe ich in dem Ordner einen Ordner erstellt , der sich nur auf index.html befindet. Ich habe das mit dem Visual Studio Code geöffnet dem Visual Studio Code und mit der Live Server-Erweiterung habe ich es auch mit Chrome geöffnet. Sie können einen beliebigen Browser verwenden oder einen Vertrag aufrufen, um ihn zu verwenden. Das ist also das einfache HTML-Skelett, nichts anderes darin. Es gibt einen Container erstellen. Ich erstelle einfach ein Div mit der Klasse Container. In dieses Div werde ich mehrere Bänder legen. Benennen wir also diesen Gegenstand, oder wir geben ihnen den Klassennamen des Gegenstands und einen anderen Klassennamen für jeden von ihnen separat. Also Punkt 23 so. Das ist also der erste Artikel und ich werde ihn einfach noch ein paar Mal kopieren. Machen wir sechs Gegenstände daraus. Lassen Sie uns nun einfach den Artikel 234.56 ersetzen. Das ist also der vierte. Mach es an. Und die letzten sind das System. Wir haben also sechs Elemente in der Container-Div. Jetzt können wir tatsächlich eine externe CSS-Datei verwenden. Was ich denke, ich werde hier einfach ein Style-Tag reinlegen und codieren. Also haben wir hier sechs dB gesehen. Um es deutlicher zu machen können wir mehr über die Flexbox erfahren. Wir werden es ein bisschen für den Container stylen. Ich gebe dem einfach eine Hintergrundfarbe für Lila. Und lassen Sie uns das auch umgrenzen. Also werde ich ihm einfach einen drei-Pixel-Rahmen geben , der solide ist. Und lass uns die schwarze Farbe verwenden. Jetzt haben wir das. Das ist also unser Container. Ich werde dem nur einen kleinen Randradius geben , damit es gut aussieht. Also zehn basal. Los, wir sind fertig mit dem Container. Lassen Sie uns nun den Artikel mit dem Pluszeichen hier anvisieren. Es wird also auf alle Divs innerhalb des Container-Divs abzielen . Lassen Sie uns also das Objekt ins Visier nehmen und ihm eine rote Hintergrundfarbe geben. Die Geschmacksfarbe. Machen wir es zur Farbhöhe. Sonst ist es kaum sichtbar. Okay? Lassen Sie uns nun einen Rand geben, etwa zehn Pixel, damit sie einen schönen Abstand zwischen ihnen haben. Auch für den Geschmack werde ich es einfach ein bisschen größer machen. Also lass uns die Schriftgröße auf vielleicht 70 Stück verwenden. Es ist massereicher. jetzt auch wieder Lassen Sie uns jetzt auch wieder einen Randradius verwenden , damit es gut aussieht. Lassen Sie uns auch etwas Polsterung hinzufügen , damit der Geschmack einige Lücken aufweist. Ich habe ihn gefunden. Okay, du hast also sechs, die sie hier gesehen haben. Und die Tiefe hat die Elemente auf Blockebene dort platziert. Es gibt also vor allem Upgrades, also wird das Beste, was horizontal verfügbar ist , in Anspruch nehmen . Okay? Jetzt machen wir diesen Container zu einer Flexbox. Um das zu tun, werden wir dem eine gewisse Flexibilität verleihen . Jetzt lasst uns sparen. Und jetzt ist das der Flockenbehälter und das sind die Flex-Artikel. Lassen Sie uns nun über die Flexrichtung sprechen. 3. Die Flex-Richtungen: Es gibt zwei verschiedene Arten von Eigenschaften, die wir auf die CSS-Flexbox anwenden können , um sie unterschiedlich auszurichten oder zu modifizieren. Also die erste Art von Eigenschaften, die wir auf den Flockencontainer anwenden können, der das übergeordnete Element ist. Und einige der Eigenschaften, die wir auf die Flex-Elemente oder die untergeordneten Elemente anwenden können . Um es also öffentlicher zu verstehen, werden wir über die Ausgänge sprechen. Wie Sie sehen können, werden sie sich hier also in dieser horizontalen Richtung ausrichten. Es beginnt also von der linken Seite und geht nach rechts. Das sind also die Hauptausgänge oder die Flockenausgänge. Wir müssen das verstehen, weil wir die Xs hier tatsächlich ändern können. Das ist also der Flexor vorhanden, also das Gegenteil, das existiert, wird Querachse genannt. In diesem Fall ist der Flexor standardmäßig vorhanden, also , er geht von links nach rechts. Dies ist das Wichtigste, was existiert. Zu einem anderen Begriff. Das ist eigentlich die Reihe. Die Spalte wird vertikal ein Nachlasskapitel auf einem anderen sein. Das ist also die Zeile und das ist die Standard-Flexachse. Aber wir können die Reaktion oder den Ausdruck sex is tatsächlich ändern , indem wir die Eigenschaft flexdirection verwenden. Jetzt wird die PlayStation-Eigenschaft auf den Flockenbehälter angewendet. Sehen wir uns also mehr darüber an. Für die Eigenschaft „Biegerichtung “ gibt es vier verschiedene Arten von Faltenbälgen. Diese Zeile, Spalte, Zeile umgekehrt und die Spalte umgekehrt. Der Standardwert der Flexrichtung ist also row. Es geht von links nach rechts und auf der X-Achse oder der Horizontalen existiert. Die nächste, die wir hier haben, ist die Kolumne. Also die Spalte, du, ich glaube, du hast schon geahnt, dass sie vertikal und senkrecht zueinander stehen wird . Es beginnt also von oben und unten. Wenn wir in diesem Fall die Phrasenrichtung zur Spalte machen, jetzt die Hauptachse vorhanden oder die Haupt-Flex existiert, ist jetzt die Hauptachse vorhanden oder die Haupt-Flex existiert, die vertikale Achse. Die Querachse ist das Gegenteil, das ist die Horizontale. Also im Fall der umgekehrten Zeile, da der Name nur die Hauptstelle hat, werden die Ausgänge hier von rechts nach links gebildet. Wie Sie nun am Ziel sehen können , ist es von links nach rechts wahr. Das ist also die Zeile und der Incus oder Pro Reverse, der existiert, wird das Gegenteil sein. Es beginnt also von rechts nach links. Und auch für die Artikel wird es von rechts nach links beginnen. Das erste Element befindet sich also in der oberen rechten Ecke, dann das zweite Element, dann das dritte, dann das vierte Element und so weiter. Für die Spaltenrückseite ist es auch genau das Gleiche. Die Spalte wird vertauscht. Es beginnt also von unten und geht nach oben. In diesem Fall verlaufen die Hauptausgänge, unsere Hauptflexoren, von unten nach oben. Ich denke also, wir müssen diese Dinge im Code sehen , damit wir sie perfekt verstehen. Das ist also der Code und wir haben bereits über die Richtung des Ausdrucks j gesprochen. Die Standard-Flexrichtung ist also row, und das sind die Eigenschaften , die wir auf den Flex-Container anwenden werden. Mit den untergeordneten Elementen. Wir werden später über die Eigenschaften der untergeordneten Elemente sprechen . Moment werden wir jedoch nur über die Eigenschaften sprechen , die wir auf den Phrasencontainer anwenden werden . Wenden wir also die Flexrichtung an. Und standardmäßig ist es Rho. Wenn wir es also speichern, wird nichts geändert, da dies der Standardwert ist. Wenn wir es nun zu etwas Definiertem wie einer Spalte machen, wird es jetzt so aussehen. Das ist also die Kolumne. Jetzt werden die Hauptausgänge hier von oben nach unten verursacht und die Vertikale existiert, oder die Querachse wird von links nach rechts beginnen. Wenn wir nun davon abweichen, nehmen wir an, wir verwenden die Zeilenumkehrung. In diesem Fall existiert also der Flexor oder der Main existiert von rechts nach links. Und die Artikel werden von der Site auf der linken Seite beginnen . Das erste Element befindet sich also in der oberen rechten Ecke, dann 2.345,6. Jetzt ist auch die Umkehrung der Spalte dieselbe. Es wird von unten beginnen und nach oben gehen. Verwenden wir die Spaltenumkehrung ihres Speichers. Jetzt befindet sich das erste Element unten, dann das zweite Element, dritte, vierte, fünfte und sechste Element. In diesem Fall verläuft die Standardreaktion des Flexors also von unten nach oben und die Querachse verläuft von links nach rechts. Das ist also alles an der Playstation. Lassen Sie uns nun über den Inhalt der Rechtfertigung sprechen. 4. Ausrichtung entlang der Flex-Achse: justify-content: Okay, der Inhalt von Justify verläuft also tatsächlich entlang der X-Achse und ist der wichtigste Inhalt. Wenn wir also die Phrase Geschlecht ändern, sind dies die wichtigsten Existenzen, indem wir die Spielrichtung verwenden , die den Inhalt rechtfertigen wird sich ebenfalls ändern, da Justify-Content nur auf dem Hauptflex wirkt, der x nicht entlang der Querachse liegt. Es gibt also sechs verschiedene Werte um inhaltliche Armut zu rechtfertigen. Der erste ist der Flakes Stat, was der Standardwert ist. Das ist das, was wir bereits gesehen haben. Es ist das dritte von links, dann geht es weiter, bis alle Gegenstände gestapelt sind. zweite Wert des Justify-Contents ist das flexible Ende für den Flux und er wird am Ende des Containers gedrückt. Aber das Alignment wird vom ersten, zweiten, dritten und vierten der gleiche Ester sein vom ersten, zweiten, dritten und vierten der gleiche Ester . Aber es wird am Ende des Flockenbehälters sein. Nun zur Mitte, sie wird sich an der Mittelposition des Flockenbehälters befinden. Jetzt ist das Dazwischen irgendwie interessant. Im Falle eines Abstands zwischen den Elementen oder den Flex-Artikeln wird also den Flex-Artikeln wird also ähnlicher Abstand zwischen den Elementen bestehen. Der erste Platz wird also beim Fast, unserem Startpunkt, dem Flockencontainer, liegen. Und das letzte Platzierungselement befindet sich am Endpunkt des Flexcontainers. Und der gesamte verfügbare Platz wird auf die anderen Flocken-Elemente aufgeteilt , sodass sie einen ähnlichen Abstand zueinander haben. Jetzt ist der Surround irgendwie ähnlich, aber ein bisschen anders. Wenn also ein Leerraum um alle Artikel oder die Flex-Artikel herum alle Artikel oder die Flex-Artikel haben die Artikel links und rechts ähnlich viel Platz. Wie Sie hier sehen können, ist das x der Wert einer ähnlichen Anzahl von Basenpaaren. Jeder Artikel wurde auf der linken Seite und auf der rechten Seite platziert. Jetzt der Raum gleichmäßig. Im speziellen Fall haben also alle Elemente den gleichen Speicherplatz. Alle Lücken, einschließlich der ersten, haben also einschließlich der ersten, haben eine Lücke zwischen dem Anfang des Containers und dem letzten Element, aber eine Lücke mit dem Ende des Containers und der gleichen Lücke ist zwischen allen Elementen und dem Rand verfügbar . Okay? Das sind also die sechs Werte „Inhalt rechtfertigen und „Inhalt nur rechtfertigen“ entlang der Hauptausgänge. Also werden wir das mit Code sehen. Also lass uns das machen. Ich werde nur Flex Direction Column Reverse kommentieren , weil wir den Standardwert verwenden werden , nämlich Rho. Rechtfertige Inhalte also auch Bögen auf dem Flex-Container. Nehmen wir an, es war das, was den Inhalt rechtfertigte. Und standardmäßig ist der Wert Flocken. Fangen Sie an. Wenn wir es also speichern, wird nichts geändert, da dies der Standardwert ist. Der zweite Wert, über den wir jetzt sprechen werden, ist das Ende der Flocken. Also im Fall von Flocken und es wird an das Ende des Phrasencontainers gedrückt, was sich durch diesen violetten Hintergrund und einen Blutrand auszeichnet. Das ist also das Ende des Flexcontainers und sie werden an das Ende des Containers geschoben. Jetzt das Zentrum, und ich denke, Sie wissen bereits, wie es passieren wird. Alle Artikel oder die Flex-Artikel werden sich wie folgt in der Mitte des Flex-Containers befinden. Fellow ist der Raum dazwischen. Also lasst uns das tun, denn bis dahin befindet sich das erste Element am Startpunkt des Flex-Containers und das letzte Element am Endpunkt des Flockencontainers und gesamten Raum um den Gegenstand herum, also wäre es ähnlich. Der nächste Wert, über den wir sprechen werden , ist der umgebende Raum. Jetzt werden sie die gleiche Anzahl an SPs für jedes einzelne Flex-Element links und rechts haben. Der letzte Wert für justify-content ist nun die Fläche, in der alle Elemente gleichmäßig verteilt sind. Wir werden also einen ähnlichen Abstand zwischen ihnen und zwischen dem Start- und Endpunkt des Phrasencontainers haben. Das ist also alles, was mit dem Rechtfertigungsinhalt zu tun hat. Und wieder wird es entlang der X-Achse organisiert. Das ist der Ort, an dem X jetzt ist, und so wird es sich denken. Wenn wir nun die Biegerichtung in Zeile ändern, wird der Inhalt nun wird der Inhalt nun entlang der Hauptachse oder entlang der Spalte gewölbt. Also lass dich nicht verwirren. Darüber werden wir später mehr sprechen. nun im nächsten Video Lassen Sie uns nun im nächsten Video über die Align-Elemente sprechen. 5. Ausrichtung entlang der Querachse: Ausrichtungsgegenstände: Bei der Ausrichtung der Elemente handelt es sich um Bögen entlang der Querachse, weil sie den Inhalt ausrichten, oder entlang der Hauptachse. In diesem Fall ist die Querachse also, geht von oben nach unten oder das Partikel existiert. Um dies perfekt zu demonstrieren, geben wir dem Container eine Höhe. Geben wir ihm eine Höhe von 400 Pixeln. Und jetzt, wie Sie sehen können beginnt das erste Element oben im Behälter und geht nach unten. Dies ist der Standardwert der Align-Elemente. Das ist der Heiligenschein von Stress. Wenden wir also die Align-Elemente an und sie werden auch auf den Flex-Container angewendet. Der Standardwert ist also die Spannung. Jetzt nimmt es den gesamten Platz ein, in dem es eine Zelle auf der Querachse hat. Dies ist der Standardwert. Dafür gibt es jetzt mehr Hallos. Jetzt sind das erste die Flocken, ein Stapel. Also als einziges Team wie in diesem ist das Gleiche wie der Inhalt rechtfertigen. Es wird also am Startpunkt der Querachse beginnen, der die Oberseite ist. Jetzt wird es so eng, dass oben der Startpunkt der Querachse ist. Jetzt ist das nächste Semester zu Ende. In diesem Fall wird es also am Ende der Querachse sein . Das ist also unten. Das nächste ist das Zentrum. Es wird also so in der Mitte der Querachse sein . Es ist eigentlich ziemlich praktisch, wenn Sie nur auf LAN zugreifen, etwas in der Mitte. Nehmen wir an, Sie haben ein Div und möchten ein weiteres Div in den Mittelpunkt stellen. Sie können also einfach dem übergeordneten DVI-Display Flex geben und Content Center ausrichten und Elemente Center ausrichten. Es wird also im Mittelpunkt stehen. Wir werden das später an einem praktischen Beispiel sehen. Der nächste Wert hier ist der Basiswert. Um die Ausgangslage zu verstehen, werden wir uns dort auf einige separate Elemente konzentrieren. Deshalb habe ich ihnen für jeden Artikel eine eigene Klasse gegeben . Lassen Sie uns den Punkt Nummer zwei ins Visier nehmen. Also geben wir diesen Gegenstand einer Polsterung oben, vielleicht auf 100 Pixeln. Und lassen Sie uns das auch unten mit einer Polsterung versehen. Vielleicht. Geben wir ihm 200 Pixel. Jetzt wird es dauern, dass die Masse am besten ist. Es gibt auch Target und andere drauf, vielleicht das Item für vielleicht das Item für und gib dem eine Polsterung von 300 Pixeln. Nun, wie Sie hier sehen können, beenden es tatsächlich drei etwas mehr, also werde ich es einfach auf 200 speichern. Nun, wie Sie hier sehen können, sind alle Artikel hier, der ganze Geschmack ist auf einer Linie. Das ist also wirklich schwierig , was die Baseline tun. Das ist alles an den Align-Elementen. Und im nächsten Video sprechen wir über den Flex Wrap. 6. Beispiel aus der Praxis: Ein Div zentrieren: Nun, da wir bereits über die Elemente „Elemente ausrichten“ und „Inhalte rechtfertigen“ gelernt haben, denke ich, dass es an der Zeit ist, ein praktisches Beispiel aus der Praxis zu betrachten . Hier habe ich einen Heldenbereich Ihrer Website gestaltet. Das ist also sehr einfach. Wir haben das Hintergrundteam mit dem Abschnitt und etwas Text und einer Schaltfläche in der Mitte. Das ist also das, was wir jetzt erstellen werden. Aber bevor Sie mit dem Kurs beginnen, ist es meiner Meinung nach am besten, ihn tatsächlich für Kunst zu planen. Also werden wir es zuerst planen, wie Sie es machen werden, dann werden wir den Kurs durchgehen. Dies ist eine sehr gute Methode, um alles zu planen, bevor Sie mit dem Code beginnen. Was wir hier tun können, wir können einen Abschnitt erstellen und wir geben dem Hintergrundteam seinen Bereich. Und in diesen Abschnitt oder das Div können wir tatsächlich die Elemente einfügen, nämlich den Text und die Schaltfläche. Aber wir werden die Stricks auf den gesamten Abschnitt anwenden und das untergeordnete Element in die Mitte stellen. Wenn wir mehrere Elemente im übergeordneten Element haben, wird es schwierig. Was wir also tun werden, ist ein weiteres Div zu erstellen, das alle Elemente hier enthalten wird. Also ich finde das irgendwie verwirrend, aber es wird einfach, wenn wir zum Code gehen. Also habe ich einen Ordner erstellt, und in dem Ordner gehen wir zu index.html, einer style.css und einem Hintergrundbild. Ich habe das Markup hier erstellt. Wir haben ein Header-Tag mit der Klasse des Helden. Das ist also das übergeordnete Element oder der Flex-Container. Also haben wir ein Header-Tag mit der Klasse Null. Das wird also unser Flex-Container sein. Und in diesem Behälter haben wir nur einen Flockenartikel, und das ist der Behälter. Und darin habe ich alle Elemente eingefügt, die wir hier haben, wie den Titelgeschmack, Untertitel und die Schaltfläche. Das ist also der Flockenartikel und das ist der Flockenbehälter. Ich habe auch ein grundlegendes Styling hinzugefügt, da das sonst lange dauern wird . Also habe ich gerade den grundlegenden Rand und das Padding des Browsers entfernt , indem ich ein Sternchen gesetzt habe und diesem einen **** Rand Null als Padding Null für den Körper gegeben habe. Ich habe auch eine Schriftfamilie von Poppins und eine Farbe Schwarz hinzugefügt . Es wird also hier auf den Text angewendet. Und mit dem Helden, der unser Flex-Container sein wird , habe ich auch das Hintergrundteam hinzugefügt, ich habe auch einige Stylings für den Geschmack hinzugefügt und auch ein bisschen Polsterung unter den Gegenständen und auch den Button hier. Das ist also alles. Jetzt werden wir das anwenden. Aufgrund dieses Designs hier wird es also den gesamten Viewport einnehmen. Also geben wir dem Hero-Bereich, dem Container oder dem Flex-Container eine Mindesthöhe von 100 Viewports. Das wird also die gesamte Höhe einnehmen , die es im Viewport haben kann. Das wird also von hier und zwei hier beginnen. Das ist also die Höhe des Viewports von 100. Und der Abschnitt hier ist der Held. Geben Sie ihm also eine Mindesthöhe von 100 BAs, was der Höhe des Viewports entspricht. Jetzt wird das gesamte Viewport benötigt. Das nächste, was wir tun werden, ist an der Bag County Miss zu feilen. Lassen Sie uns also diesen Hintergrund anwenden. Psi soll abdecken, nicht enthalten. Und es gibt auch eine Position in den Zentren. Also Hintergrund in der Mitte positionieren. Sie können auch die Kurzform verwenden, unsere Abkürzungsmethode, wenn Sie möchten. Okay, wir haben uns verabredet. Lassen Sie uns nun über den Container sprechen. Der Container hat das Maximum von 878 Pixeln erreicht. Also lass uns das machen. Wir nehmen den Container-Div ins Visier, der all die Dinge enthält, die schmecken und zuordnen, und geben diesem ein maximales Gewicht. 780 Pixel Sie sind in Sicherheit. Jetzt wird es standardmäßig linksbündig ausgerichtet. Aber das wollen wir nicht. Wir können also auch die Textausrichtung an der Mitte ändern. Lassen Sie uns auch ein wenig Polsterung hinzufügen. Studienzentrum. Und wir werden links und rechts ein wenig Polsterung hinzufügen. Also lass uns das machen. Ich gebe einfach eine Null für oben und unten und von links nach rechts vielleicht 20 Stück. Denn wenn das Display kleiner als 72 Stück sein wird , wird es in die Ecke gehen. Wenn wir es also einfach entfernen und den Behälter verkleinern, wie Sie sehen können, wird dies hinzugefügt. Und wenn wir die Polsterung hier anbringen, wird es eine gewisse Lücke geben. Okay? Jetzt haben wir das maximale Öl und die Polsterung hinzugefügt. Jetzt werden wir es zentrieren. Also hier ist das übergeordnete Element der Held oder das Header-Tag mit der Hero-Klasse. Und darin haben wir den Flockenartikel, den Behälter. Also werden wir die Flocken mit dem Helden auftragen. Also lass uns das machen. Das ist der Held und wir werden diesen Flex-Effekt anwenden. Jetzt gehen wir zum Flex-Container für den Artikel, das ist dieser Container hier. Und wir werden es sowohl entlang der X-Achse als auch entlang der Querachse zentrieren. Das ist also der Flexor, der existiert. Und wenn Sie es entlang der X-Achse zentrieren möchten, verwenden wir die Option Inhaltszentriert ausrichten. Es sollte horizontal zentriert sein. Jetzt müssen wir es auch darauf zentrieren , dass das Teilchen oder das Kreuz dort existiert. Wir werden also das Center „Elemente ausrichten“ verwenden. Jetzt sollte es richtig zentriert sein. Es gibt verschiedene Methoden, Pose Centering und Element, aber diese Flux-Methode ist auch sehr nützlich und kann sehr praktisch sein, wenn Sie ein Beispiel aus der realen Welt ausprobieren oder vielleicht eine Website für einen Kunden oder nur für sich selbst programmieren möchten. Das ist also völlig responsiv. Und wie Sie sehen können, ist das völlig zentriert. Wenn wir die Displaygröße verkleinern, wird sie auch zentriert. Wenn ich sie responsiv gestalten würde , können Sie auch die Medienabfrage und die Schritte hinzufügen. Make the taste ist also kleiner als das, aber wir werden es hier nicht tun. Nur zur Demonstration der Zentrierung eines Elements oder des tiefen Inneren eines anderen Dave mithilfe von Flocken. Also haben wir das gemacht und wir haben hier ein weiteres Projekt. Hier werden wir die Medienabfrage verwenden. Das ist also ihr Ergebnis für das nächste Video. 7. Wrap oder Nowrap!: Ich werde einfach alle Artikel hier löschen, wie die Kacheln der Separatisten. Es gibt auch einen Kommentar dazu und sagen wir, so sieht es aus. Jetzt ist die Standardeinstellung Hallo, sie richten Elemente aus, es nimmt also genauso viel in Anspruch wie bisher. Es ist für die Artikel verfügbar. Jetzt gibt es hier nur sechs Flex-Artikel. Und ich werde auch den Rechtfertigungsinhalt kommentieren. Also legen Sie jetzt den Flex-Container ein. Wir haben sechs Artikel. Es wird in den Flex-Artikel gelegt . Es hat tatsächlich einen Platz im Container, aber nehmen wir an, wir haben viele Gegenstände , die wir nicht in den Behälter passen können. Ich werde hier nur ein paar andere Artikel hinzufügen. Also haben wir 12 Flex-Artikel. Und wie Sie sehen, gibt es im Flex-Container nur Platz für neun Flex-Artikel. Der andere wird auf der rechten Seite sein. Wenn sie überlaufen, werden sie einen flexiblen Container haben. Wir können dies tatsächlich ändern, indem den Ramp-Schritt Flakes verwenden, ebenfalls eine Eigenschaft, die für den Flex-Container verwendet werden kann. Der Standardwert der Flockenfalle ist also keine Rampe. Das bedeutet, dass hier nur horizontale Abstände berücksichtigt werden . Wenn die Artikel also überlaufen, wird es an derselben Linie sein. Nehmen wir also das Flakes Rep ins Visier und der Standardwert ist kein Wrapped. Das wird also nichts einwickeln, es würde die zusätzlichen Artikel außerhalb des Flexcontainers überlaufen . Wenn wir nun als Nächstes die überflüssigen Elemente in der nächsten Zeile platzieren wollen , verwenden wir den Rep. Jetzt wird es die zusätzlichen Artikel verschieben. In der nächsten Zeile. Es gibt auch einen Kerl, der rapide schlechter benannt ist. Das heißt, es wird, die erste Linie wird am Ende des Querausgangs geschoben . Das ist also erben Sie die zweite Zeile. Es beginnt mit dem ersten Ton, dem zweiten Ton und geht zur App, die der Agonist ist, der die Ausgänge überquert oder die Querachse umkehrt . Gehen wir jetzt zurück zum Rap. 8. Ausrichtung mehrzeiliger Artikel: Align-Content: Wie Sie sehen können, müssen wir hier Linien definieren und es gibt eine Eigenschaft, müssen wir hier Linien definieren die wir mit dem Flex-Container verwenden können , um die Elemente der zweiten Zeile auszurichten Dieser Eigenschaftsname ist der Inhalt der Fluggesellschaft. Airline-Content und Airline-Content sind also nur nützlich, wenn wir mehrere Zeilen mit Felix-Elementen haben. Sonst nützt es nichts. Es gibt also sieben Werte für den Align-Inhalt und der Standardwert ist derselbe wie für die Align-Elemente. Das ist also der Stress. Es wird so viel Platz beanspruchen , wie Sie hier sehen können. Die erste Zeile wird dauern, das heißt, sie hat sie und die zweite Zeile auch, also sind sie sich irgendwie ähnlich. Es gibt also Staatsraum. Diese kleine Lücke hier bezieht sich auf den Rand, den wir hinzugefügt haben. Das ist also der Standardwert. Der nächste Wert sind die Flocken, was bedeutet, dass er auch den Align-Elementen ähnelt. Dadurch werden alle Elemente am Startpunkt der Querachse platziert , da die Airline-Inhalte als Elemente immer auf der Querachse gelten. Ich werde es nur ein bisschen höher machen. Also das wird jetzt am Anfang sein, entlang der Querachse. Nun, wenn du es am Ende verschieben willst, also das untere Ende erben willst, können wir das auch tun, indem wir das Flocken-Ende verwenden. Dieser nächste Wert wird der Mittelpunkt sein. Ich denke also, Sie wissen bereits, was passieren wird. Alle Elemente befinden sich in der Mitte entlang der Querachse. Der Listenwert, den wir hier haben, ist das Leerzeichen dazwischen. Nun, das wird bei den Rechtfertigungsinhalten, die wir gesehen haben, ähnlich sein . Jetzt wird sich der gesamte verfügbare Speicherplatz zwischen den beiden verschiedenen Flex-Artikeln befinden. Der nächste Wert ist das umgebende Leerzeichen. Jetzt werden sie also eine ähnliche Anzahl von Basenpaaren am unteren und oberen Rand jeder Linie haben. Das nächste Semester ist gleichmäßig. Jetzt werden sie von oben und zwischen den Objekten ähnlich viel Platz haben . Es wird also ähnlich viel Platz zwischen dem Container-Div oder dem Rand des Container-Divs und zwischen den Zeilen geben. Das sind also die LAN-Inhalte und das kann sehr praktisch sein. Wenn wir mehrere Reihen von Flex-Artikeln haben. Und selbst was die Reaktionsfähigkeit angeht, sagen wir, wir haben drei Elemente für das größere Display. Und wenn wir die Displaygröße kleiner als ein Stern machen , werden die Elemente in die nächste Zeile verschoben. Um sie dann perfekt auszurichten, können wir die Inhaltseigenschaft align verwenden. Lassen Sie uns jetzt über die Kappe sprechen. 9. Abstand zwischen den Flex-Items: Lücke: Ich werde hier nur den Align-Inhalt kommentieren und speichern. Jetzt erhalten sie den Standardwert. Jetzt können wir dieses kleine Taxi überall sehen. Das ist für die Marge. Wir werden das kommentieren. Nehmen wir an, jetzt gibt es dort keine Lücke, sondern direkt nebeneinander. Jetzt gibt es eine Eigenschaft, um eine gewisse Lücke zwischen den Flex-Elementen zu schaffen , die eigentlich als Lücke bezeichnet wird. Okay? Es gibt also zwei Arten von Lücken. Wir können den Phrasencontainer verwenden. Der erste Term ist also die Rho-Cap und der zweite Term ist die Spaltenlücke. Der Rogue-AP wird also zwischen zwei verschiedenen Elementen angewendet, z. B. zwischen zwei verschiedenen Zeilen. Versuchen wir es also mit dem Zeilenabstand. Und ich werde hier zehn Teile verwenden. Wie Sie hier sehen können, ist das ein Abstand von zehn Pixeln zwischen den beiden verschiedenen Zeilen. Wenn wir eine Lücke zwischen den Spalten schließen möchten , befinden wir uns zwischen den Elementen in der Spalte. Wir können die Spalte benutzen. Ja. Siegel, vielleicht 15 Stück. Jetzt wird es eine schöne Lücke zwischen diesen geben. Aber wenn Sie nicht zwei verschiedene Werte oder beide Parteien angeben. Du kannst das also auch kommentieren und die Lücke ausprobieren. Die Lücke ohne Angabe der Zeile oder Spalte. Es wird es sowohl auf die Zeile als auch auf die Spalte anwenden. Versuchen wir es also mit 15 Teilen. Dadurch wird die Lücke zwischen den Elementen sowohl entlang der Zeile als auch der Spalte von 15 Pixeln erreicht. Wenn Sie keine andere Art von Werten haben, können wir das auch tun. Also probieren wir hier fünf Teile aus. Der erste Wert hier wird also die Zeile sein, und der zweite Wert hier ist für die Spalte. Jetzt ist der Abstand von 15 Teilen zwischen den Haarreihen verfügbar und die Fight-Teases werden zwischen den Spalten verfügbar sein. Das sind also die Eigenschaften wir für den Flockenbehälter verwenden können. Und im nächsten Video werden wir über einige verschiedene Eigenschaften sprechen , die wir auf die Platzgegenstände anwenden können. Also wir sehen uns dort. 10. Reihenfolge der Flex-Artikel: Bisher haben wir nur über die Eigenschaften gesprochen , die angewendet werden können, den Gesichtscontainer oder das übergeordnete Element. In diesem Video werden wir nun über die Eigenschaften sprechen, die auf die untergeordneten Elemente oder die Flex-Elemente angewendet werden können . Also werden wir zuerst über die Bestellung sprechen. der Standardeinstellung wird das also so bestellt, wie sie sind. Der erste Artikel kommt zuerst, dann der zweite Artikel. So, wie wir das tatsächlich codiert haben. Dies wird in derselben Richtung und in derselben Reihenfolge angeordnet. Also werde ich es einfach reduzieren. Lass uns nur vier Gegenstände behalten und bis es soweit ist. Okay. Außerdem werde ich die Dinge hier einfach löschen , um es übersichtlicher zu machen. Lassen Sie uns das auch kommentieren. Auch die Marge. Und ich werde hier nur eine kleine Lücke einbauen , etwa 15 Pixel. Okay, gut. Gut zu gehen. Jetzt kommt der erste Gegenstand zuerst, dann der zweite und der dritte dann der vierte. Nehmen wir also an, wir wollen sie ausrichten, sind sie unterschiedlich angeordnet. Standardmäßig haben alle Flocks-Elemente eine Standardreihenfolge von Null, aber wir können die Reihenfolge tatsächlich separat auf die untergeordneten Elemente anwenden . Und die Regel lautet, je niedriger die Reihenfolge des Elements ist, desto schneller kommt es. Also hier haben standardmäßig alle Artikel die Reihenfolge Null. Wenn wir also ein Element oder das Flockenelement und eine Reihenfolge von minus eins angeben , was kleiner als Null ist, wird es an erster Stelle stehen. Nehmen wir also an, wir werden den dritten Punkt ins Visier nehmen. Hier kommt der dritte, und geben Sie diese Reihenfolge von minus eins an. Also machen wir Punkt drei und geben dem die Reihenfolge minus eins, was kleiner als Null und weniger sein wird. Die Bestellung ist, sie kommt schnell. Speichern wir das. Und wie Sie sehen können, kommen die dritten Artikel schnell. Wir können es also tatsächlich benutzen und es ist ziemlich praktisch. Wir werden im nächsten Video mehr darüber sehen. Aber lassen Sie uns vorerst noch ein paar Artikel darin bestellen. Der erste Artikel kommt also am Ende. Wenn wir also das Element anvisieren, für das sich das erste Element befindet, befindet es sich jetzt an der zweiten Position, da das dritte Element eine Reihenfolge kleiner als Null hat, was der Reihenfolge von on entspricht. Das ist also der erste Artikel, der eine Reihenfolge von Null hat. Nehmen wir an, wir geben ihm die Reihenfolge von vielleicht fünf. Jetzt hat es mehr Reihenfolge als die anderen Artikel, da der zweite Artikel hier eine Standardreihenfolge von Null hat. Das dritte Element erhielt die Reihenfolge minus eins und das vierte Element erhielt die Reihenfolge 84 von Null. Nun hat Artikel eins die größte Bestellung, also wird er an letzter Stelle kommen, denn je größer die Bestellung ist, wird sie beim letzten Artikel in der Reihenfolge von fünf sein, und sie kommt am letzten. So wird es funktionieren. Nehmen wir an, wir möchten das vierte Element, das erste Element, verschieben . Das können wir auch tun, wenn wir den Artikel gezielt und diese Bestellung größer als die Bestellung von fünf aufgeben . Also werden wir mehr als das geben. Also geben wir sechs und es wird nach dem ersten Punkt kommen. Aber was passiert dann, wenn wir mehrere untergeordnete Elemente mit derselben Reihenfolge haben? In diesem Fall wird die Ausrichtung oder die Reihenfolge so angezeigt, wie wir sie hier codiert haben. Nehmen wir also an, der Artikel in der Größenordnung von fünf, der Artikel für eine Bestellung mit dem gleichen Wert, das ist fünf. Wenn wir das nun als das Element speichern, das zuerst kommt, dann ist das das Element Vier. Jetzt wird der letzte Artikel der vierte Artikel sein, und davor wird der Artikel zum Verkauf angeboten. Jetzt kommt die Vier an letzter Stelle und der erste Gegenstand kommt davor. Das ist also alles an der Bestellung. Und es kann sehr praktisch sein, wenn Sie etwas anderes auf einem kleineren Display oder so bestellen . Im nächsten Video werden wir dieses Projekt machen, werden wir dieses Projekt machen damit wir mehr über die Reihenfolge und den Wandel erfahren können. Also lass uns das machen. 11. Beispiel aus der Praxis: Ändern Sie die Reihenfolge in einem kleineren Display: In diesem Video werden wir es als einfache Posen belassen , die Ihnen viele Dinge über die Flexbox beibringen können. Das ist also unser Projekt und das ist eine Helden-Sektion. Bevor wir uns also mit dem Code befassen, lassen Sie uns das erweitern. Also haben wir einen Container. Das ist unser Container hier. Ich werde einfach ein Rechteck zeichnen. Okay? Das ist also der Container. Streiche es einfach und entferne es. Okay? Das ist also der Behälter und wir werden die Flocken pro Tag auf diesen Behälter legen . Hier. In diesem Container haben wir noch eins, das unser flexibles Kind sein wird. Es wird also das Kind unseres Flex-Artikels sein , nämlich dieses. Das ist also das Phase-Child und das ist der Flex-Container. So können wir die Anzeigeeffekte auf das übergeordnete Element anwenden und es auch zur Ausrichtung des Inhaltszentrums machen und die Elemente mittig ausrichten, sodass es entlang der Querachse zentriert wird . Und auch die Hauptflussanalyse. Wir geben ihm auch eine maximale Höhe, damit er nicht aus dem weißen Bereich herauskommt. Darin verwenden wir also wieder den Display-Flex für diesen Container, der eigentlich das untergeordnete Element eines Flex-Containers ist. dafür den Display-Flex verwenden, werden wir ihn auf verschiedene Artikel anwenden. Als ob wir diesen Div hier haben, der ist dieser. Ich werde ihm nur einen Schlag verpassen. Dies wird ein schneller Artikel oder der Flockenartikel in diesem Flexbehälter sein . Und der zweite Begriff, den wir hier haben, ist dieser hier. Das Bild ist also das zweite Flex-Element und das erste Listenelement wird dieser Geschmack sein. Also werden wir alle Geschmäcker in ein Div packen. Also gehen wir in verschiedene Tiefen in diesen Flockenbehälter und richten ihn aus. Bei einem kleinen Display werden wir also die Flexrichtung zur Spalte ändern. Jetzt wird es standardmäßig die Zeile sein. Aber bei einem kleinen Display sind wir nicht die E-Mails, die oben schnell ankommen und unten werden wir den Geschmack angeben. Also lass uns das machen. Ich fange einfach mit dem viskosen an. Lassen Sie uns also ein Header-Tag mit der Klasse Theta erstellen. Das wird also alles enthalten. Das ist also das übergeordnete Element und wir fügen dem eine Hintergrundfarbe hinzu und verwenden den Display-Flex, um den Inhalt innerhalb seiner Mitte zu platzieren. Holen wir uns jetzt stattdessen das Container-Div. Dies wird unser zweiter Flex-Container sein. In diesem Behälter haben wir definiert, dass DBS direkt den ganzen Geschmack enthalten wird. Ein anderes wird das Bild enthalten. Also lass uns das machen. Stattdessen haben sie zu Abend gegessen. Lassen Sie uns ein Div erstellen und ich gebe diesem einfach eine Klasse von Container-Inhalten. Okay, gut. Jetzt ist es stattdessen später Susan Sontag und setzt alle Geschmäcker ein. Ich werde das einfach kopieren und einfügen. Okay, los geht's. Nun zur Prager-Technik, wir werden einen Blindtext wie Lorem Ipsum einfügen. Dann haben wir zwei verschiedene Knöpfe. Das ist eigentlich ein EMS. Ich gebe Steve einfach den Klassennamen Hero. Heldenknöpfe. Okay, eingefügt, da dies ein Button oder ein Link ist, werden wir das Ankertag hier verwenden und es einfügen, Blätter versiegelt die Bilder. Und ich denke, der Bildname ist gespeichertes Punkt-PNG. Ich werde das einfach kopieren und einfügen, weil wir hier zwei verschiedene Artikel haben. Der zweite Begriff ist der Play Store. Okay, gut. Dies ist der Live-Server und wir können die Artikel hier sehen. Jetzt ist die zweite gut, tief im Behälter. Das wird also ein Flex-Container sein und das ist das Fast-Flex-Item und das Layer-Set, das zweite Flips-Item, das ein Hero-Image sein wird. Geben wir das einfach, gruppieren wir sie, Held Amos, darin. Fügen wir das Punkt-PNG der Heldenbilder hinzu. Wir haben es. Und standardmäßig wird dies eine Zeile wie diese sein. Ich weiß nicht, warum der Cursor so blinkt. Okay, jetzt gehen wir zu der style.css über, die ich bereits hinzugefügt habe. Okay, ich habe nichts getan, also werde ich das einfach minimieren. Und wie Sie sehen können, gibt es einen Standardrand und einen Standardabstand. Wenn wir also einfach die Ästhetik dort verwenden , um das Standardstyling zu entfernen, können Sie so viel in Null machen. Jetzt gibt es links und rechts keine Lücke . Fügen wir also eine Polsterung von Null hinzu. Sei einfach vorsichtig. Lassen Sie uns nun den Helden ins Visier nehmen, der das übergeordnete Element ist, das ein Alles darin enthalten wird. Mit dem Helden. Ich gebe dem nur eine Mindesthöhe. Lassen Sie uns eigentlich zuerst die Hintergrundfarbe festlegen. Ich gebe einfach einen sechseckigen Farbcode wie D, E, D und drei CA ein. Das ist also die farbige Fellfarbe gespeichert und wir haben die Haarfarbe. Jetzt geben wir diesem eine Mindesthöhe von 100 lebendiger Höhe. Es wird also die Höhe des Viewports annehmen. Danach. Lassen wir den Helden einen Display-Flex. Aber vorher gab es eine Farbe des Textes, als würde es ein Applet sein, all das Schmecken hier. Es ist ein bisschen schwärzlich. Lassen Sie uns nun auf den Container-Div abzielen. Also lass uns diesen Container machen. Und wir geben dem maximal acht von 13 70 Pixeln. Lass uns sparen. Jetzt. Es hat die 13 70 Teile hoch, aber wir können es nicht sehen, weil es nicht wirklich in der Mitte ist. Jetzt werden wir den Display-Flex darauf anwenden. Jetzt müssen Sie also Flex-Elemente definieren. Standardeinstellung ist die Biegerichtung Zeile, sodass sie in horizontaler Richtung nach der anderen angezeigt wird . Lassen Sie uns also dafür sorgen, dass das Display flexibel ist. Lass uns sparen. Wie Sie sehen können, sieht es so aus. Jetzt befinden wir uns also nicht alle Elemente in der Mitte, also entlang der Querachse. Wir können also das Zentrum für die Ausrichtung von Elementen verwenden. Jetzt befinden sie sich in der Mitte entlang der Querachse, aber nur um sicherzugehen, werden wir auch den Inhaltsabstand zwischen ausrichten verwenden , sodass sich das Bild an der Endecke der Flexbox befindet, die der Container ist. Und der Text hier wird am Startpunkt des Flex-Containers stehen. Verwenden wir also die Option „ Inhalt rechtfertigen“ dazwischen. Es wird nichts ändern, denn alle Elemente werden alles beanspruchen, was explizit möglich ist. Es gibt auch eine kleine Lücke zwischen den Elementen. Ich werde einfach den Phi-Viewport verwenden. Es werden also fünf Prozent der gesamten OID sein. Jetzt werden wir es in den Mittelpunkt stellen. Ich denke, das haben wir im vorherigen Projekt gesehen. Also werden wir den Helden ins Visier nehmen, der nur Kinderelemente enthält. Und gib dem eine Flockenausstellung. Also lass uns das machen. Zeigen Sie Fälschungen an und rechtfertigen Sie das Inhaltscenter. Richten Sie die Elemente mittig aus. Es wird also sowohl entlang der X-Achse als auch entlang der Querachse zentriert sein . Lass uns jetzt ein bisschen Stylings machen. Ich werde das einfach kopieren und einfügen, weil ich hier keine Zeit stehlen werde usw. Ein Sohn, der ist, ist der Titeltext. Ich habe eine Schriftart, Familienschrift, Zeilenhöhe, Rand und Unterseite, um eine gewisse Lücke zum allgemeinen Text zu schließen. Für das Absatz-Tag haben wir hier eine Schriftfamilie von Poppins. Und auch Größe oder etwas Rand unten, um hier etwas Abstand zu den Bildern zu bekommen. Okay, wir haben also alles richtig gemacht. Jetzt fügen wir dem Container auch eine Polsterung hinzu , da wir hier nichts anderes sehen können. Aber für das kleinste Display werden wir nur ein wenig aufaddieren. Vor allem, weil wir es kleiner machen. Wie Sie sehen können, wird es immer dann, wenn es kleiner als die maximale Höhe ist, z. B. 13.70 Pixel, am Endpunkt, am Anfang des Containers oder, sorry, im Browser sein Anfang des Containers oder, . Wenn wir nun ein wenig Polsterung mit dem Container oben und unten hinzufügen , sagen wir 50 Pixel und links und rechts. Da sind diese 30 Pixel. Lass uns sparen. Ok, jetzt hast du diese kleine Lücke mit der Polsterung. Machen wir es also responsiv. Um es responsiv zu gestalten, werden wir die Medienabfrage verwenden. Okay, also lass uns das machen. Ich tippe einfach ein, dass das Medium gereinigt ist und wir geben dem eine maximale Breite. Wenn also die Displaygröße kleiner als diese maximale Höhe ist, gilt dies. Geben wir ihm also eine maximale Höhe von unseren 12.70 Pixeln. Ich werde es nur in diesem bestimmten Browser aufschlüsseln . Also erhalte ich bei der ersten Liste den Container und wir machen die Flexrichtung zur Spalte. Also, wenn wir die Flexrichtung zur Spalte machen. Wer gerade ist, ist standardmäßig in dieser Reihe, also sind sie in der Reihe glücklicher. Und wenn wir die Biegungsrichtung zur Spalte machen, werden sie an der Vertikalen erscheinen , die nach der anderen existiert. Also lass uns das machen. Ich werde einfach auf den Container abzielen und diesem eine flexible Richtung für die Spalte Speichern geben . Und wie Sie sehen können, wird ich gepaart sein und die Säule existiert, die Vertikale existiert jetzt, das ist der Hauptfluss, der jetzt existiert weil wir die Standard-Flexrichtung geändert haben. Aber wie Sie hier sehen können, wird die Bestellung standardmäßig so angezeigt, wie wir sie hier codiert haben. In diesem Container-Div haben wir also das erste Element hier, das ist der Container-Inhalt , der schmeckt, und der Button dort, damit sie schnell kommen. Dann ist da noch der zweite Punkt. Jetzt müssen standardmäßig alle Elemente im Flex-Container die Reihenfolge Null haben. Also können wir, wir werden diese E-Mails hier gezielt ansprechen, und wir werden sie schnell versenden. Und das können wir auf zwei verschiedene Arten tun. Wir können entweder die Reihenfolge dieses EMS auf Null reduzieren. So werden wir es hier vor das Textfeld stellen , wie den Container-Inhalt. Jetzt ist die Leitung des Containers um Null gefallen und es wird ungefähr minus eins sein, was weniger als Null ist. Es wird also schnell erscheinen. Außerdem können wir diesem den Container-Inhalt geben , wenn der Hello-Modus größer als Null ist. diese Weise wird es größer sein als die Reihenfolge des Helden EMS, die standardmäßig Null ist. Also nehmen wir das Heldenbild ins Visier und geben diesem die Reihenfolge minus eins, sodass das weniger als Null ist. Also lass uns das machen. Hero wird es hier einfach in die nächste Zeile setzen. Hallo E-Mails. Und da ist die gleiche Minusreihenfolge drauf, sparen, und jetzt kommen die USA schnell, dann ist da noch der Geschmack. Okay, lass es uns noch mehr, kleiner machen. Und wie Sie dieses Bild sehen können, ist es irgendwie überfüllt. So heiß werde ich es machen, ich füge einfach das EMS-Haar-Like-Helden-Bild hinzu. Und lassen Sie uns die EMS-Technologie ins Visier nehmen, insbesondere für die MS. Und wir werden dafür eine maximale OID von hundert Prozent geben, damit sie nicht mehr überfliegt. Das ist also unsere Helden-Sektion. Und es sieht gut aus. Außerdem können Sie die Schriftgröße für dieses kleinere Display ein wenig reduzieren . Aber darum geht es hier nicht. Wir werden nur sehen, wie die Reihenfolge von s und anderen flexiblen Elementen und Eigenschaften ist. Jetzt ist das auf einem größeren Display völlig responsiv. Geschmack kommt schnell, dann sind da noch die Bilder. Und wenn wir die Displaygröße kleiner machen, wird es umgekehrt sein . Die EMS zählen also schnell nach dem Bruchpunkt, bei 1.270 Pixeln liegt. Und dann kommt das Rettungsdienst schnell. Das ist also alles an diesem Projekt. Ich hoffe es hat dir gefallen und wir sehen uns im nächsten Video. 12. Verteilung von Extra-Räumen: Flex-grow: Lassen Sie uns in diesem Video über das Wachstum von Flocken sprechen. Wie Sie hier sehen können, fügen Sie den Phrasencontainer ein. Wir haben vier verschiedene Artikel und sie nehmen nur so viel mit, wie sie brauchen. Ansonsten ist das Haar umsonst. Das sind also die leeren Räume und die Flocken wachsen. Durch die Verwendung von Flex Grow können wir die zusätzlichen Kosten tatsächlich nutzen. Schauen wir uns an, wie wir das machen können. Standardmäßig werden alle Elemente, die als Standard-Flex bezeichnet werden, auf Null erhöht. Der Standardwert der Phrase grow ist also Null. Wenn wir nun sagen, dass zu einem bestimmten Gegenstand oder Element eine andere Art von Ort wächst, wird das mit Röntgenbildern zu tun haben. So wird es also funktionieren. Lassen Sie uns also auf einen bestimmten Gegenstand abzielen, z. B. auf Punkt vier. Wenn wir dem einen Satz geben, wachsen wir mit dem auf, was passieren wird. Standardmäßig wurden alle anderen Elemente, wie das Element bis zur dritten Phrase, auf Null erhöht. Sie werden also keinen Stress aushalten , sondern nur so viel nehmen, wie sie brauchen. Aber jetzt ist der Artikel für die Kata-Phrase älter geworden und in der Freundesgruppe geht es um das exzessive Geschäft, okay? Jetzt, wo die Phrasengruppe aktiviert ist, wird es all die zusätzlichen SPSS benötigen. Also lasst es uns speichern. Und wie Sie sehen können, werden dafür all diese Teile benötigt, die gelebt haben. Jetzt können wir die Zustandsräume auf mehrere Flex-Elemente aufteilen . Wie können wir das machen? Also dieser Gegenstand für Gott, falls sie es bei diesem Ziel und auf der Flucht vermasseln. Sagen wir also Punkt zwei, den zweiten Begriff. Und wir werden dem einen Satz von drei geben . Was jetzt passieren wird, ist , dass wir das einfach kommentieren. Das ist also der Expressbus und er wird in vier Teile aufgeteilt. Die drei Teile der vier Versionen werden also dem zweiten Element zugewiesen, weil es den Ausdruck Wachstumsbaum enthält. restliche Portion wird dem Artikel gegeben , weil er mit Flocken aufgewachsen ist. Also werde ich das einfach auskommentieren. Und wie Sie sehen können, wurden all diese Leerzeichen dem vierten und dem zweiten Element zugewiesen. Das zweite Item erhielt eine Phasengruppe drei. Es wird also den Dreiviertelteil der Räume einnehmen und das Photon hat nur einen Teil bekommen. Also, wenn wir den Artikel hier anvisieren und den gleichen Wert wie den Artikel für beibehalten. Bitte vergrößern Sie den Artikel für einen Artikel, der eine ähnliche Menge erhält. Und in diesem Fall wird es in fünf Teile aufgeteilt, wird es in fünf Teile aufgeteilt weil auf zwei plus drei, das heißt, fünf auf die Portion oder die Untauglichen werden speziell auf den Gegenstand gegeben, der für dieselbe Person bestimmt ist, oder dasselbe wird speziell auf den Gegenstand gegeben , und drei Fünftel werden für den zweiten Gegenstand gegeben. das dritte Element wachsen dort keine Flaggen, daher hat es den Standardwert Null übernommen. Und es wird nur so viel dauern, wie es braucht. Das ist alles daran, dass die Flocken wachsen. 13. Einen bestimmten Artikel anders ausrichten: align-self: Okay, lassen Sie uns jetzt über die Airline-Zelle sprechen. Wir haben also bereits über die Align-Elemente gesprochen. Die Align-Elemente werden also auf den Textbausteincontainer oder das übergeordnete Element angewendet . Der Umsatz der Fluggesellschaft wird jedoch auf das untergeordnete Element der Flakes-Artikel angerechnet. Um dies zu demonstrieren, werde ich einfach die Höhe des Artikels abkommentieren. Jetzt hat es standardmäßig die Align-Elemente erfasst, die sein Geschmack dort hat, also tickt es. Alle expliziten Elemente können entlang der Querachse sein da die Airline-Elemente entlang des Kreuzes existieren. Okay? Nehmen wir an, wir gehen zum Airline Items Center und die Fluggesellschaft verkauft nur einen Bogen entlang der Querachse. Hier haben also alle Flocks-Elemente die Mitte der Elemente ausrichten, weil wir die Elemente mit dem Container-Div, dem Auszeichnungscontainer, ausgerichtet haben Elemente mit dem Container-Div, dem Auszeichnungscontainer . Nehmen wir nun an, wir möchten einen Artikel mit einer separaten Fluggesellschaft. Also, wie können wir das machen? Um das zu tun, gibt es also die Fluggesellschaft selbst. Durch die Verwendung einer Linsenzelle können wir also auf ein bestimmtes Flexelement abzielen und es separat ausrichten. Nehmen wir an, wir haben die dritten Gegenstände und Haare und wollen sie anders ausrichten als die übrigen Elemente. Also lass uns das machen. Lassen Sie uns den Elementbaum ins Visier nehmen und ihm eine Ausrichtungszelle geben. Und der Palast, der Standardwert ist Auto. Das bedeutet, dass der Artikel dieselbe Ausrichtung hat wie bei einem Flexcontainer, der die Mitte darstellt. Das ist also ein automatisches Mittel. Wenn Sie es nun anders machen wollen, können wir das auch tun. Also lasst uns die Flocken ins Visier nehmen. Das heißt, Sie wissen bereits, dass es am Startpunkt der Querachse sein wird , der sich oben befindet. Es wird ein flexibles Ende haben. Es wird am Ende der Querachse sein. Das nächste, das wir hier haben, ist das Zentrum. Und ich denke, es wird genauso sein wie zuvor, denn das ist das Zentrum. Auch, wenn Sie es durch die ausdrücken möchten, alles entlang der Querachse. Das kannst du also auch tun. Drücken wir auf Speichern. Wir haben es. Ebenfalls. Wir können hier die Basislinie verwenden. Das sind also die Werte. Wir können also die Verkäufe bei der Fluggesellschaft verwenden um Artikel getrennt von den übrigen Artikeln, die ausgerichtet werden sollen, auszurichten , indem wir die Eigenschaft „Artikel ausrichten“ mit dem Flockenbehälter verwenden . Es ist also auch sehr praktisch wenn Sie Karten erstellen möchten. Nehmen wir an, wir möchten die LAN-NIC-Karte separat im Container platzieren. Das ist also alles über die Fluggesellschaft selbst. 14. Ändern der Standardgröße durch Flex-Basis: Lassen Sie uns nun über die Flex-Basis sprechen. Ich glaube nicht, dass wir es im echten Positiven oder im wirklichen Leben verwenden werden. Aber da ist gelernt, dass ich es einfach lösche und sagen wir, auch die Höhe entfernt habe. Eigentlich werde ich es einfach behalten, aber die Elemente anordnen. Lassen Sie uns einen flexiblen Start machen. Die feste Basis wird verwendet , um einen separaten Flex-Artikel und eine separate Ölsorte anzugeben. Oder sie platzieren den Raum, den es entlang der X-Achse haben kann. Nehmen wir an, wir konzentrieren uns hier auf den zweiten Punkt, Punkt zwei. Und wir haben ein paar zusätzliche Leerzeichen, oder? Nehmen wir an, wir geben dem Artikel eine Höhe von 50 Prozent. Wie können wir das machen? Wir können das tun, indem wir die Flex-Basis verwenden. Und wir können für alles entweder einen Pixelwert oder einen Prozentwert angeben . Der Standardwert der Flex-Basis ist jedoch auto. Das wird also genauso viele spezifische Bedürfnisse erfordern. entsprechend der Flocken Richten Sie Elemente entsprechend der Flocken aus oder rechtfertigen Sie den Inhalt. Dies ist der Standardwert. Wenn Sie ihm einen separaten Wertetyp geben möchten z. B. die persönliche Dichte in 50 Prozent, nimmt es 50 Prozent des gesamten Raums ein. Nehmen wir an, wir haben mehr Werte als diese, etwa 100% Dann wird es zur nächsten Linie übergehen , weil die Ingenieure die 100% entlang der Flocken rausfahren müssen, was auch immer der Fall ist. Also probieren wir es hier mit einigen anderen Eigenschaften aus, wie dem Punkt drei, sorry, wir nennen es hier einen Punkt. Okay, geben wir dafür eine Flockenbasis von 50 Prozent. Lass uns sparen. Es wird dauern, ich werde nur etwa 48 Phasen reduzieren. Wir können also tatsächlich zwei Gegenstände hineinlegen. Geben wir den Artikel auch für das gleiche Gelb an. Eigentlich denke ich, dass wir es noch weiter reduzieren müssen. Als ob 45 nicht bogenförmig wäre. Wieder unser Start. Wenn Sie ein komplexes Layout wie dieses erstellen möchten, können wir die Phrasenbasis verwenden, aber ich denke, das ist nicht sehr praktisch, da wir bei dieser Art von komplexem Layout immer das CSS-Raster dafür verwenden können, aber es ist besser, andere Dinge zu wissen. Okay, das ist also alles an den Phasenpässen. Sehen Sie im nächsten Video.