Layouts meistern: Grundlagen des CSS-Grids und Flexbox

1. Kurs-Einführung: Hallo und willkommen zu unseren neuen Class-Bustering-Layouts, CSS Grid und Flexbox Essential Hallo. Mein Name ist Jota, kurzes Auto und voller Stecktisch und Online-Instruktor Dieser umfassende Kurs soll Ihnen helfen, mithilfe von zwei der leistungsstärksten Ces-Tools reaktionsschnelle, flexible und professionell aussehende Wavesite zu erstellen , flexible und professionell aussehende Wavesite mithilfe von zwei der leistungsstärksten CSS-Grid und CSS-Flexbox. CSS Grid ist ein bahnbrechendes zweidimensionales Layoutsystem , das eine präzise Steuerung von Zeilen und Spalten ermöglicht, und Flexbox vereinfacht das eindimensionale schaffen perfekte Ausrichtung und Abstände für dynamische, anpassungsfähige Designs, und wir werden diesen Kurs mit Ces Grid beginnen Was ist ein CSS-Rasterlayout? Dann lernen wir das Cess-Grid, das Erstellen von Zeilen und Spalten. Als Nächstes lernen wir, Ces Grid Gap putorial Dann grep, grit spani grid line Name, grid am, minmax-Funktion, implizites explizites Grid, Rasterbandausrichtung, Spurausrichtung, Autop Auto Feet, Grid Feet, Grid Water Property, verschachteltes Raster, überlappende Rasterelemente usw. Dann springen wir zum Abschnitt CSS Flexbox. Hier erstellen wir endlich ein Projekt mit CSS Flexbox Flexbox, Flexbox Flexbox Reaction, Flexbox Reaction, Flexbox Reaction, Flexbox Reaction, Flexbox Wrap Flexbox Flexbox Reaction, Flexbox Reaction, Flexbox Reaction, , Flexbox Brow Property, Flexbox Basics, string, margin ato, C flexbox, nested flex. Hier erstellen wir endlich ein Projekt mit CSS Flexbox . Er wird ein Drop-down-Menü mit der Hauptnavigation erstellen. Dies ist der komplette Kurs über Sess Grit und Sess Am Ende des Kurses werden Sie sicher sein, Sess Greet and Pledge Box zu verwenden , um ein ansprechendes, flexibles Layout zu erstellen, flexibles Layout Egal, ob Sie ein Anfänger sind oder Ihre B-des-Fähigkeiten verbessern möchten, in diesem Kurs erhalten Sie alles, was Sie benötigen, um B-Spieler zusammenzustellen Worauf wartest du noch? Lass uns zusammen anfangen. 2. Was ist CSS-Rasterlayout: Hallo Leute, willkommen zurück. In diesem Tutorial werde ich Ihnen vorstellen, was ein CSS-Grid ist und wie es funktioniert. Warum sollten wir das CSS-Grid verwenden? Die erste Anforderung ist ein zweidimensionales Rastersystem. Es ist ein neues Layoutsystem. Wir nennen es zweidimensional, weil wir Rosensäulen gemeinsam bearbeiten können Unser zweiter Vorteil ist, dass das Rasterlayout das Float-Layout ersetzt Wir müssen die Float-Eigenschaft nicht mehr verwenden, wie z. B. die Margin-Tier, und wir müssen uns nicht mehr auf Float Left und Float Right konzentrieren. Wir können Layouts sehr einfach erstellen. Unser dritter Vorteil ist, dass es unseren Code zuerst und dann erstellt. Weil wir uns nicht auf Float-Eigenschaften konzentrieren müssen und das die Lesbarkeit des Codes erhöht Unser vierter Vorteil ist, dass wir kein CSS-Framework wie Bootap, Foundation, Materialized Cass usw. verwenden müssen wie Bootap, Foundation, Materialized Cass Denn wenn Sie Grid richtig verstehen, müssen Sie kein Framework verwenden Weil du mit Css Grid all die Dinge erledigen kannst. Versuchen wir zu verstehen, wie Grid eigentlich funktioniert. Angenommen, das ist tief. In dieser Tiefe haben wir sechs verschiedene Tiefen, und wir nennen das Strukturgittersystem Ohne Float und Margin können wir hier Lücken schaffen, und wir können das gemeinsam bewältigen Wir nennen diesen übergeordneten Container Grid-Container. Um diesen Grid-Container zu erstellen, müssen wir eine CSS-Eigenschaft in unserem übergeordneten Element verwenden, nämlich display property, display grid. Wenn wir Display Property Grid verwenden, geht es automatisch davon aus, dass dieser übergeordnete Container ein Grid-Container ist. Da Sie alle Elemente in diesem Deb sehen können, nennen wir es Grid-Elemente. Hier siehst du ein einzelnes Deb, wir haben es Grid Cell genannt, und hier kannst du einige Linien zwischen diesen Tiefen sehen, und wir nennen es Grid Line. Hier können Sie vier Rasterlinien sehen. Das sind alles vertikale Linien. Hier sehen Sie eine Lücke zwischen diesen beiden Zellen, wir nennen sie Dachrinne In ähnlicher Weise werden diese Linien vertikal ausgeführt. Wie ich Ihnen bereits sagte, funktioniert das zweidimensional, und wir können es sehr einfach handhaben, und es funktioniert wie Tabellenzellen, Zeilen und Spalten. Hier können Sie der Struktur entsprechend sehen, dass wir in unserem Bild zwei Rasterzeilen haben. Hier sieht man in gelben Rändern, wir nennen es Rasterspalten. Hier sehen Sie eine Lücke zwischen Zeilen und Spalten, und wir haben sie Rasterfläche genannt. In unseren kommenden Videos werden wir verstehen, wie wir Raster erstellen können In unserem kommenden Video werde ich alle Rastereigenschaften in dieser Tutorial-Serie behandeln in dieser Tutorial-Serie Wir werden auch lernen, wie wir mithilfe der Rastereigenschaften ein schönes Layout erstellen können . Hier sehen Sie den Namen des Browsers , der unser Grid-System unterstützen kann. Internet Explorer unterstützt kein Grid-System, H unterstützt, Firefox unterstützt, Chrome unterstützt, Safari unterstützt und auch Operator-Unterstützung. Die meiste Zeit arbeiten wir mit Chrome, Safari und Firefox. Danke, dass du dir dieses Video angesehen hast, Statute für unser nächstes Tutorial. 3. CSS-Rasteraufbau mit Zeilen und Spalten: Hallo Leute, schön, dass ihr wieder da seid. In diesem Tutorial lernen wir, wie wir Raster erstellen können Wir werden mit zwei Eigenschaften beginnen. Unsere erste Eigenschaft ist griechische Tablettspalte, und unsere zweite Eigenschaft ist griechische Tablettzeile. Fangen wir mit der Praxis an und versuchen zu verstehen, wie es funktioniert. Hier können Sie sehen, dass ich bereits ein Esteml-Dokument erstellt habe und dieses Estel-Dokument mit der Live Server-Erweiterung öffne mit der Live Auf unserer rechten Seite sehen Sie unseren Webbrowser. Zuerst erstelle ich ein D, in dem ich einen Grid-Container erstellen werde. Dep Außerdem werde ich diesem tiefen Klassencontainer eine Klasse zuweisen diesem tiefen Klassencontainer eine Klasse Und in dieser Tiefe werde ich sechs weitere Deeps erstellen, D, und ich werde ein Klassenelement und ein Element eins festlegen Ich werde diese Tiefe fünfmal duplizieren. Hier verwende ich mehrere Klassen und werde den Klassennamen ändern. Punkt zwei, Punkt drei, Punkt vier, Punkt fünf und Punkt sechs. In dieser Tiefe werde ich etwas Text eingeben. Erster, zweiter, dritter, vier Pi, und der letzte ist sechs. Wenn ich diese Datei einstelle, können Sie hier alle Tiefen sehen, die erste, zweite, dritte, vierte, fünfte und sechste Zuerst setze ich eine Hintergrundfarbe für diesen Container, Punkt Containerhintergrund grau Ich habe diese Datei eingestellt, hier können Sie das Ergebnis sehen, und ich werde diesem Container auch ein W zuweisen. W, 700 Pixel. Außerdem werde ich diesem Container Spielraum geben. Rand, für oben werde ich 50 Pixel verwenden. Für Lp werde ich Null verwenden. Für den unteren Teil verwende ich Null und für F p werde ich 50 Pixel verwenden. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen, und jetzt werde ich verschiedene Farben für verschiedene Elemente angeben . Also werde ich einen Selektorpunkt für das erste Objekt erstellen. Außerdem werde ich einen Hintergrund für diesen Artikel festlegen. Wenn ich diese Datei eingestellt habe, können Sie das Ergebnis sehen, und jetzt werde ich dieses Element mehrmals duplizieren. Für Punkt zwei werde ich orange Farbe sagen. Für Punkt drei sage ich grüne Farbe. Oder Punkt vier, ich sage gelbe Farbe. Zu Punkt fünf sage ich blaue Farbe. Für Punkt sechs werde ich lila Farbe sagen. Wenn ich diese Datei einstelle, können Sie die Ergebnisse sehen. Larry kann alle Farben in unserem T sehen . Gehen wir zurück zum übergeordneten D, welche Klasse ist Container? Ich werde eine Eigenschaft verwenden, nämlich Display, und ich werde Display Grid verwenden Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt, da wir keine Zeilen und Spalten für dieses Raster erstellen. Zuerst werde ich Spalten erstellen , also werde ich die Rastervorlage „Spalte“ verwenden. Hier können wir angeben, wie viele Spalten wir haben möchten. Damit können wir die Spaltenbreiten angeben. Angenommen, ich möchte zwei Spalten, O erste Spalten, 200 Pixel Breite, und unsere zweiten Spalten, 250 Pixel Breite. Wenn ich diese Datei hier einstelle, können wir sehen, dass sie Unsere erste Spalte hat eine Breite von 200 Pixeln und unsere zweite Spalte eine Breite von 250 Pixeln. Hier können Sie in einer Zeile sehen, dass wir zwei Spalten erstellen. Angenommen, ich möchte die Stärke der ersten Spalte ändern , etwa 350 Pixel. Wenn ich diese Datei einstelle, können Sie die Spaltenbreite sehen. In ähnlicher Weise können wir die Höhe mithilfe einer anderen Eigenschaft festlegen . Lass es mich dir zeigen. Erstellen Sie staatliche Reihen. Hier können wir definieren, wie viele Zeilen wir wollen. Hier können Sie sehen, dass wir insgesamt drei Zeilen in unserem übergeordneten Container t haben . Für unsere erste Zeile möchte ich eine Höhe von 100 Pixeln festlegen. Wenn ich diese Datei speichere, siehst du hier das Ergebnis. Es gilt nur für unsere erste Reihe. Für unsere zweite Zeile möchte ich eine Höhe von 200 Pixeln festlegen. Für unsere dritte Zeile möchte ich eine Höhe von 100 Pixeln festlegen. Wenn ich die Datei speichere, kannst du hier das Ergebnis sehen. Wenn Sie feststellen, hat dies keinen Einfluss auf unsere Containerbreite, die 700 Pixel beträgt. Nicht nur das, wir können diesem d eine weitere Spalte hinzufügen . Dazu werde ich zunächst den Wert dieser ersten Spalte reduzieren . 150 Pixel. Für unsere dritte Spalte nehme ich wieder 150 Pixel. Noch einmal 150 Pixel. Wenn ich diese Datei einstelle, können wir hier das Ergebnis sehen. Jetzt erstellt es drei Spalten. Hier können wir sehen, dass für unsere erste Zeile die Höhe auf 100 Pixel und für unsere zweite Zeile Höhe auf 200 Pixel festgelegt wurde, und dass es in diesem Container keine dritte Zeile gibt. Wenn wir eine dritte Zeile in unserem Container hätten, würde sie eine Höhe von 100 Pixeln festlegen. Lass es mich dir zeigen. Ich möchte diesen Artikel noch einmal duplizieren. Ich habe diese Datei eingestellt, tut mir leid, wir müssen unseren Deep dublieren, nicht diesen Elector Wenn ich so tief dubliere und diese Datei setze, kannst du hier Hier seht ihr für unsere dritte Zeile, sie erzeugt eine Höhe von 100 Pixeln Weil wir für unsere dritte Zeile eine Höhe von 100 Pixeln erwähnt haben. Hier siehst du eine Leerstelle, und jetzt möchte ich diese Lücke mit unserer dritten Spalte füllen. Dafür müssen wir eine Eigenschaft verwenden, die automatisch ist. Wenn ich diese Datei einstelle, wie Sie hier sehen können, füllt sie den Bereich mit unserer letzten Spalte aus. Es wird den gesamten verbleibenden Platz mit unserer dritten Spalte füllen . Angenommen, ich möchte unsere zweite Spalte mit 100 Pixeln ändern . Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wenn ich Auto für unsere zweite Spaltenstärke verwende und wenn ich diesen Wert für unsere dritte Spaltenstärke und wenn ich diese Datei festlege, können Sie hier ein Ergebnis sehen. Jetzt können Sie sehen, dass unsere erste Spalte Gewicht von 150 Pixeln und unsere letzte Spalte ein Gewicht von 100 Pixeln hat. Und unser langweiliger Bereich wird mit der zweiten Spalte abgedeckt , weil wir den automatischen Wert für unsere zweite Spalte verwenden Lass mich dir eins zeigen. Wenn Sie den Firefox - oder Chrome-Browser verwenden, drücken Sie einfach E 12. Es ist die Option „Entwickler öffnen“ in Ihrem Browser. Wenn du den Kontinent tief markierst, siehst du hier eine Option namens Grit. Sie können auch die Eigenschaft „Körnung anzeigen“ sehen. Außerdem können Sie ein Kornsymbol in der Luft sehen. Es heißt Grit Editor. Wenn du darauf klickst, siehst du hier viele Optionen. Im Moment werde ich es nicht erklären. Ich werde alle Dinge später erklären, also schließe ich es. Aber wenn ich auf diese Rasteroption klicke, kannst du hier einige Linien sehen, und du kannst auch die Zeilennummern sehen, und wir nennen es Rasterlinien. Dies ist nur möglich, wenn Sie die Rastereigenschaft anzeigen verwenden. Hier können Sie sehen, dass wir Pixel verwenden, aber wir können auch Prozentsätze verwenden. Lass es mich dir zeigen. Angenommen, ich möchte zwei Spalten verwenden. Für die erste Spalte möchte ich 40% verwenden. Für unsere zweite Spalte möchte ich 30% verwenden. Wenn ich diese Datei einstelle, kannst du hier die DS sehen. Unsere erste Spalte deckt 40% der Fläche unserer gesamten Containerbreite ab. Und jetzt möchte ich die dritte Spalte verwenden, und für unsere dritte Spalte verwende ich Auto Win. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Für unsere erste Spalte sind es 40% , für die zweite Spalte 30% und für unsere dritte Spalte ebenfalls 30%. Weil unsere erste und zweite Spalte 70% ausmachen. Wenn ich von 100% auf -70% herabsetze, beträgt der verbleibende Wert 30% Deshalb dauert es 30%. Nicht nur, dass wir Pixel mit Prozentwerten verwenden können. Angenommen, ich möchte für unsere erste Spalte 100 Pixel verwenden Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Unsere erste Spalte ist 100 Pixel groß und unsere zweite Spalte nimmt 30% unserer Containerbreite ein und unsere dritte Spalte deckt den verbleibenden Platz ab. Nicht nur, dass es eine weitere Einheit gibt, nämlich Afer bedeutet Bruchteil Angenommen, ich habe 12 Spalten von einem Afer und eine andere ist ein A. Wenn ich diese Datei speichere, können Sie hier sehen, dass sie die Hälfte unseres Containers d. Unsere erste Spalte nimmt, erste Hälfte und unsere zweite Spalte nimmt oder zweite Wenn ich einen anderen Wert verwende und diese Datei speichere, können Sie hier sehen, wie sie insgesamt drei Spalten erzeugt, und alle Spalten haben eine ähnliche Breite, eine ähnliche Breite Es wird die Breite des Containers gleichmäßig aufgeteilt, die 700 beträgt. Wenn ich zwei als Wert für unsere dritte Spalte verwende und dann die Datei speichere, können wir hier sehen, dass unsere dritte Spalte zweimal so viel Platz einnimmt wie unsere erste Spalte und zweite Spalte. Hier können Sie sehen, dass wir Grids steuern können , ohne Float zu verwenden Als Nächstes werde ich eine andere Eigenschaft verwenden , nämlich Grid Gap Lass es mich dir zeigen. Ich werde 15 Pixel verwenden. Wenn ich diese Datei einstelle, können Sie hier sehen, dass zwischen Zeilen und Spalten ein gleicher Abstand besteht. Wenn ich auf diese Rasteroption klicke, kannst du sie sehen. Jetzt kannst du es deutlich sehen. Im nächsten Tutorial werde ich es Ihnen klar erklären, und es gibt eine weitere Einheit, die wir als Spaltenwert für die Rastervorlage verwenden können , nämlich Wiederholung. Lass es mich dir zeigen. Wiederholung ist im Grunde eine Funktion. Angenommen, Sie möchten zwei Spalten mit gleicher Breite. In unserem ersten Parameter müssen wir angeben, wie viele Spalten wir wollen. In unserem Fall zwei, und dann müssen Sie die Breitengröße übergeben, die 150 Pixel beträgt. Wenn ich diese Datei einstelle, können wir hier das Ergebnis sehen. Hier müssen wir den Breitenwert mehrmals eingeben. Wenn wir vier Spalten haben wollen, müssen wir hier nur vier eingeben. Wenn ich diese Datei speichere, kannst du hier das Ergebnis sehen. Es erzeugt vier Spalten mit derselben Breite. Im Moment werde ich zwei Spalten verwenden. Damit möchte ich eine pro Spalte verwenden. Ja, wir können es schaffen. Geben Sie ein f R ein. Wenn ich diese Datei speichere, können Sie hier das Ergebnis sehen. Zuerst erstellen wir zwei Spalten gleicher Größe, und dann wird der verbleibende Platz mit unserer dritten Spalte abgedeckt . In ähnlicher Weise können wir hier den Prozentwert und den Pixelwert verwenden . Lass es mich dir zeigen. Nehmen wir an, ich möchte eine 40% -ige Spalte. Wenn ich diese Datei speichere, können Sie hier das Ergebnis sehen. Ebenso können wir unsere Brucheinheit in unseren Regeln verwenden. Nicht nur das, wir können die Brucheinheit für unsere Regeln verwenden. Aber vorher lege ich eine Höhe für unseren übergeordneten Container fest . Höhe. 700 Pixel. Wenn ich diese Datei eingestellt habe, siehst du hier das Ergebnis Jetzt möchte ich zwei Reihen mit gleicher Höhe. Also werde ich die Refit-Funktion verwenden, zwei Reihen mit einer F-Höhe Wenn ich diese Datei einstelle, können Sie hier das Ergebnis sehen. Hier können Sie sehen, dass es gleichmäßig auf Zeilen aufgeteilt ist. Dieser Wert gilt nur für die ersten und zweiten Zeilen. Wenn ich drei verwende und dann die Datei einstelle, siehst du hier, dass alle drei Zeilen gleichmäßig aufgeteilt sind. Ihre Höhe ist gleich. Ebenso können wir hier den Pixelwert verwenden. Nehmen wir an, ich verwende für unsere erste Zeile 100 Pixel. Für unsere zweite Reihe werde ich 30% verwenden. Für unsere dritte Reihe werde ich eine AR-Einheit verwenden. Wenn ich diese Datei einstelle, können Sie dort das Ergebnis sehen. Ich hoffe, jetzt ist das Konzept für dich klar. Diese beiden Eigenschaften sind am wichtigsten, um eine Rasterstruktur zu erstellen. Unser erster Eigenschaftsname ist Grid-Template-Spalte, und unser zweiter Eigenschaftsname ist Grid-Template-Rolle. In unserem nächsten Tutorial werden wir verstehen, was Grid Gap ist. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 4. CSS-Grid-Gap-Tutorial: Schön, dass ihr wieder da seid In diesem Tutorial lernen wir eine neue Eigenschaft kennen, rote CSS-Grid, das heißt CSS Grid Gap. Wir haben insgesamt drei immobilienbezogene Rasterlücken. Unsere erste Eigenschaft ist die Rasterzeilenlücke, unsere zweite Eigenschaft ist die Rasterspaltenlücke und die letzte ist die Rasterlücke. Versuchen wir zu verstehen, wie die Eigenschaft „ Rasterabstand“ funktioniert. Hier können Sie eine Lücke zwischen Rasterelementen sehen, wir haben sie Rasterlücke genannt. Wenn es mit Row Is geliefert wird, dann nennen wir es Row Gap. Wenn es mit column wise kommt, dann haben wir es column gap genannt. Fangen wir mit der Praxis an und versuchen zu verstehen, wie es ist. Hier können Sie nebeneinander sehen, ich meinen Visa Studio Creator und meinen Browser mit der Light-Server-Erweiterung öffne und meinen Browser mit der Light-Server-Erweiterung und bereits ein EstEML-Dokument in meinem Verzeichnis erstellt habe Hier sehen Sie insgesamt zwei Rasterspalten mit einem E-Wert und insgesamt drei Zeilen in unserem Raster, 100 Pixel, 150 Pixel und 100 Zwischen diesen Elementen möchte ich eine Lücke setzen. Vielleicht ist die Zeile vielleicht spaltenweise. Zuerst möchte ich row is gap verwenden. Ich werde ein Eigenschaftsraster mit Zeilenabstand verwenden. Und ich möchte diesen Rollen einen Abstand von zehn Pixeln zuweisen. Lass mich dir zehn Pixel zeigen. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Erhöhen wir den Wert, 30 Pixel. Hier können Sie die Lücken zwischen den Rollen sehen. Sie können die Lücke beliebig vergrößern. Das ist ein Zeilenabstand. Wenn Sie den Abstand zwischen den Spalten angeben möchten, müssen Sie die Eigenschaft Rasterspaltenabstand verwenden. Lass es mich dir zeigen. Ich gebe Grid Column Gap ein. Ich werde einen Abstand von 20 Pixeln zwischen den Spalten verwenden. Wenn ich diese Datei speichere, wie sieht das Ergebnis aus? Hier können wir sehen, dass der Zeilenabstand 30 Pixel und der Spaltenabstand 20 Pixel beträgt. Nicht nur das, wir können bestimmte Eigenschaften für diese beiden Eigenschaften verwenden . Für diese müssen wir die Eigenschaft d gap verwenden. Lass mich dir Gap zeigen. Zuerst müssen wir den Zeilenwert und dann den Spaltenwert übergeben. Für die Zeile verwende ich 20 Pixel. Für die Spalte verwende ich 30 Pixel. Wenn wir die Eigenschaft d gap verwenden, müssen wir diese Eigenschaft nicht mehr verwenden. Ich werde es entfernen. Wenn ich diese Datei einstelle, können wir hier das Ergebnis sehen. Der Abstand zwischen den Zeilen beträgt 20 Pixel und der Abstand zwischen den Spalten beträgt 30 Pixel. Wenn ich den gleichen Wert für Zeilenabstand und Spaltenabstand verwende, 30 Pixel für Zeile und 30 Pixel für Spalte, und diese Datei speichere, können Sie hier das Ergebnis sehen. Jetzt möchte ich drei Spalten in unserem Container anzeigen. Ich möchte eingeben, Spalte C wiederholen. Wenn ich diese Datei speichere, können Sie hier das Ergebnis sehen. Außerdem können Sie diese ähnliche Lücke zwischen Rasterelementen sehen. Hier sehen Sie ein Leerzeichen , da wir drei verschiedene Zeilenseiten verwenden. Wenn ich diesen entferne, meine den letzten, und diese Datei setze, können Sie jetzt sehen, dass es keine Lücke gibt. Unsere erste Reihe ist 100 Pixel hoch und unsere zweite Reihe HT ist 150 Pixel hoch. Ich hoffe, Ihnen ist jetzt klar, was GID-Gap-Eigenschaft ist Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial 5. Positionierung von CSS-Rasterelementen: Ich bin wieder mit einem neuen Tutorial Reed Css Grid zurück. In diesem Tutorial werden wir lernen, wie Cs das Raster positionieren. Versuchen wir zu verstehen, was Rasterelemente sind. Was bedeutet die Position der Rasterelemente? Hier siehst du ein übergeordnetes Objekt in der Tiefe und wir haben es Grid-Container genannt. Ganz tief im Inneren des übergeordneten Containers haben wir ihn Grid-Elemente genannt. Nun stellt sich die Frage, was bedeutet Positionierung? Angenommen, Sie möchten das Element aus Raster 3 an die Stelle von PP verschieben. Außerdem beschließen Sie, Pi um eins an die dritte Stelle zu verschieben, so etwas in der Art, und wir nannten das Rasterpositionierung. Wie Sie sehen können, verschieben wir das dritte Objekt auf den fünften Platz. In ähnlicher Weise verschieben wir den fünften Artikel an den dritten Platz. Im Zusammenhang mit dieser Ausrichtung haben wir einige Sess-Eigenschaften. Lass es mich dir zeigen Wie Sie sehen können, haben wir Eigenschaften von Proto Seven Seses, wie Rasterzeilenanfang, Rasterzeilenende, Rasterzeile, Rasterspaltenanfang usw. Endlich haben wir eine verkürzte Eigenschaft namens Rasterfläche Lasst uns in die Gefäße zum Coator springen und versuchen zu verstehen, warum das so ist Hier siehst du, ich erstelle bereits ein Kostenvoranschlagsdokument und öffne meinen Browser und meine Kabeljauheizung Seite an Seite Wenn ich es Ihnen zeige, können Sie hier sehen, dass wir einen übergeordneten Container haben. In diesem übergeordneten Container haben wir insgesamt sechs tiefe. Ich meine sechs Rasterelemente. Wie Sie sehen können, ist die Farbe jedes Rasterelements anders. Zunächst verschiebe ich das erste Rasterelement an die sechste Stelle. Und in ähnlicher Weise werde ich die sechs Rasterelemente an die erste Stelle verschieben . Wie Sie sehen können, erstellen wir bereits unsere Selektoren. Punkt eins Punkt zwei, Punkt drei. Wie ich Ihnen bereits zu Beginn dieser Tutorial-Reihe gesagt habe, haben wir in unserer Konsole eine Browseroption, nämlich Rasterlinien. Lass es mich dir zeigen. Wählen Sie einfach Ihren Browser aus und drücken Sie pw me deb per mole. Ich werde dieses Panel unten in meinem Browser öffnen. Ich werde diese Option drücken. Hier siehst du eine Option in meinem Stiftcontainer, der ein Raster ist. Wenn ich darauf klicke, siehst du hier einige Linien. Jetzt können Sie die Nummern der Rasterlinien sehen. Sie können es zeilenweise sehen. Sie können es auch spaltenweise sehen. In diesem Tutorial werden wir verstehen, was der Anwendungsfall dieser Zeilen ist. Lassen Sie uns in unsere erste Artikelauswahl springen W ist Element eins Wie ich Ihnen bereits gesagt habe, werde ich diesen ersten Artikel an die sechste Position verschieben diesen ersten Artikel an die sechste Position Zuerst verwende ich eine Eigenschaft, nämlich Gier , Row Start Zuerst müssen wir dieses Rasterelement in die zweite Reihe verschieben. Wie Sie sehen können, ist dies die zweite Reihe. Ich werde hier zwei eingeben. Wenn ich diese Datei einstelle, können Sie jetzt sehen, wie unser Element der ersten Klasse in die zweite Zeile verschoben wird, und wir müssen auch die Endposition deklarieren. Dazu müssen wir eine weitere Sess-Eigenschaft verwenden, nämlich Rasterzeile n. Auch hier, wenn ich Ihnen meine Rasterlinien zeige, wenn ich Ihnen meine Rasterlinien zeige, können Sie sehen, oder die Position n ist drei Deshalb müssen wir drei bestehen. Wenn Sie die Grit Ron-Eigenschaft verwenden, kann es zu Problemen kommen wenn Sie auf die OF-Seite reagieren Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt Aber es ist eine gute Art , diese Eigenschaft zu nutzen. Jetzt müssen wir mit Spalten arbeiten. Wie Sie sehen können, müssen wir dieses Rasterelement an die dritte Position verschieben . Dafür verwende ich eine andere Cess-Eigenschaft , die dritte Rasterspalte. Hier werde ich drei setzen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wir haben unseren ersten gelesenen Artikel erfolgreich auf den sechsten Platz verschoben. Außerdem müssen wir die n-Position dieser Spalte deklarieren , also Spalte lesen. Wie Sie sehen können, endet unsere Zeile an vierter Stelle. Du musst vier bestehen. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt. Es ist nicht verpflichtend, aber aus Gründen der Reaktionsfähigkeit ist es sehr wichtig. Jetzt möchte ich diesen vierten Punkt an die erste Position verschieben. Dafür kopiere ich den Code und springe in die vierte Elementauswahl und übergebe den Code Unsere Startzeilen geben eins ein, und unsere letzte Zeile ist zwei In ähnlicher Weise, wie Sie sehen können, beginnt unsere Spalte mit eins und endet mit zwei. Um also Spalte Start eins und Spalte zwei einzugeben. Wenn ich diese Datei hineinlege, kannst du hier das Ergebnis sehen. Wir haben unseren vierten Container erfolgreich auf den ersten Platz gebracht. Aber das Wichtigste ist, wir unsere ewige Struktur nicht ändern Hier kannst du unsere ewige Struktur sehen. Mithilfe von CSS-Greet-Eigenschaften können wir ihre Positionen ändern, ohne ihre tatsächliche Struktur zu ändern Jetzt zeige ich Ihnen die Kurzform, all diese Eigenschaften Jetzt möchte ich das fünfte Objekt an die erste Stelle verschieben. Ich springe zur fünften Elementauswahl und verwende dann eine Rastereigenschaft für andere Fälle Wenn Sie eine Abkürzung für Zeile erstellen möchten, müssen Sie die Rasterzeileneigenschaft verwenden Lass es mich dir zeigen. Rasterreihe. Zuerst müssen wir die Position der Startzeile angeben , die eins ist, und dann müssen Sie s verwenden, und dann müssen Sie die Position der Endzeile angeben , die zwei ist. In ähnlicher Weise haben wir die Kurzform „Spalte“, also die Eigenschaft „Rasterspalte Lass es mich dir zeigen. Unsere Spalten beginnen mit Zeile Nummer eins und enden mit Zeile Nummer zwei. Wenn ich diese Datei abgelegt habe, können Sie hier sehen, wir unseren Gegenstand für die fünfte Klasse erfolgreich auf den ersten Platz gebracht haben. Aber was ist mit dem Gegenstand der vierten Klasse? Wir entfernen keinen Gegenstand der vierten Klasse aus diesem Behälter. Es existiert in erster Linie immer noch. Nur Punkt fünf, überschneide den vierten. Deshalb können wir den vierten nicht sehen. Nicht nur das, wir haben eine weitere Abkürzung für diese Immobilie Mit dieser Abkürzung können wir vier Werte gleichzeitig übergeben, nämlich die Rasterfläche die Lass es mich dir zeigen. Nehmen wir an, ich möchte das sechste Objekt an die zweite Stelle verschieben. Dazu müssen wir den Zeilenstartpunkt und den Spaltenstartpunkt angeben . Unser Zeilenstartpunkt ist eins und unser Spaltenstartpunkt ist zwei, und dann müssen wir den Zeilenendpunkt und den Spaltenendpunkt angeben . Unser Zeilenendpunkt ist zwei und unser Spaltenendpunkt ist drei. Wenn ich diese Datei einstelle, können Sie hier sehen, dass wir unsere sechs Container erfolgreich auf den zweiten Platz verschieben. Sie müssen nur eine CSS-Grid-Eigenschaft verwenden, nämlich den Rasterbereich. Sie müssen sich nur daran erinnern, dass Sie zuerst den Zeilenstartpunkt und dann den Spaltenstartpunkt angeben müssen. Als Nächstes müssen Sie den Endpunkt der Zeile und den Endpunkt der Spalte angeben. Ich hoffe, jetzt ist Ihnen klar , wie Zeilen und Spalten funktionieren. Es gibt viele Methoden, mit denen wir unsere Raster positionieren können. In meinen nächsten Videos werde ich dir alle beibringen. In unserem nächsten Tutorial werden wir lernen, wie wir unsere Rasterelemente überspannen können. Angenommen, Sie möchten Ihr drittes Element überspannen. Ich möchte nur diesen leeren Bereich mit diesem dritten Gegenstand füllen. Das heißt, es werden zwei, Spalte acht, benötigt. Ich erinnere mich an diese Methodenspanne. Seien Sie also gespannt auf unser nächstes Tutorial. Danke, dass du dir dieses Video angesehen hast. Wir sehen uns bald. 6. CSS-Rasterelemente übergreifend Tutorial: Schön euch wieder zu sehen Ich bin zurück mit einem neuen Tutorial zum Thema Cess Grid In diesem Tutorial werden wir Ces Grid Spanning lernen Aber bevor wir mit der Praxis beginnen, müssen wir verstehen, was Span bedeutet Vereinfachen wir es. Hier siehst du einen Grid-Container. In diesem Rastercontainer befinden sich sechs Elemente Wenn Sie feststellen, dass Sie sehen können, dass jedes D-Element w gleich ist, und jetzt möchte ich d1w erweitern Ich möchte Artikel Nummer eins auf zwei Artikel erweitern. In ähnlicher Weise möchte ich Punkt zwei, Zeile ist, in etwa so erweitern . Für Punkt eins verwenden wir Column Span. Für Element zwei verwenden wir den Zeilenabstand und andere Elemente, die automatisch an seiner eigenen Stelle angeordnet werden. Fangen wir mit dem Praktischen an und versuchen zu verstehen, wie es funktioniert. Hier können Sie sehen, wie ich Seite an Seite meine Seiten für den Splitter und meinen Browser öffne, indem ich Seite an Seite meine Seiten für den Splitter und meinen Browser öffne ich die Light-Servererweiterung verwende Wie Sie sehen können, haben wir insgesamt sechs Rasterelemente in unserem übergeordneten Container, und wir ordnen sie seriell Fangen wir mit den Rasterlinien an. Ich werde zwei drücken. Wenn ich auf diese Option klicke, können Sie die Rasterlinien sehen, und jetzt möchte ich unseren ersten Eintrag „Column Wiles“ umfassen und diese Spalte bis zu Zeile Nummer drei erweitern Ich werde Rasterspalte n drei eingeben. Sie wissen bereits, dass Artikel n unser erster Artikel ist. Wenn ich diese Datei speichere, siehst du hier das Ergebnis. Unser erstes Rasterelement wurde erfolgreich überspannt. Spalte eins. Wenn Sie das bemerken, können Sie sehen alle Rasterelemente automatisch ihre Position ändern. Sie können sehen, dass Objekt Nummer sechs nicht mehr verfügbar ist und wir für unser drittes Blatt keine Höhe angeben. Deshalb sieht es klein aus. Jetzt gebe ich die Höhe für diese dritte Zeichnung an, hundert Pixel. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Unsere erste Zeilenhöhe beträgt 150 Pixel und unsere zweite Zeilenhöhe ist 150 Fixel, aber unsere dritte Zeilenhöhe beträgt 100 Pixel Ich werde wieder meine Rasterlinien einschalten. Und jetzt möchte ich unseren zweiten Punkt zeilenweise erweitern, und ich möchte ihn von diesem Punkt bis zu diesem Punkt erweitern , das heißt vier. Dafür müssen wir mit diesen beiden Eigenschaften arbeiten. Ich werde diese Eigenschaften kopieren und hier einfügen. Ich werde den Endpunkt der großen Reihe ändern, der vier ist. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Jetzt sieht es aus wie eine Webseite. Das ist unser Header und das ist unsere Seitenleiste. Nicht nur das, wir können dafür die Short End-Eigenschaft verwenden. Lass mich dir die Lesezeile zeigen. Wenn ich diese beiden Eigenschaften auskommentiere und Eins, Schrägstrich, Vier eintippe und wenn ich diese Datei festlege, siehst du hier dasselbe Ergebnis. Es gibt keine Änderungen Ich hoffe, jetzt ist Ihnen klar, wie Schreibweisen funktionieren. Lass mich dir eins zeigen. Hier können Sie sehen, wir haben insgesamt drei Spalten mit einem F-Wert. In diesem Beispiel werde ich diese Immobilie kommentieren. Ich werde noch einmal die Rasterlinien einschalten. Hier können Sie sehen, dass wir insgesamt vier Spaltenlinien in unserer Struktur haben . Aber was ist passiert? Wenn wir hier fünf Werte übergeben, wenn ich diese Datei setze, wie Sie hier sehen können, erweitert sie unsere Spalte um den Standardwert. Jetzt haben wir insgesamt vier Spalten in unserem Container. Aber hier können Sie sehen, dass wir keine vier Spalten deklarieren. Wir deklarieren nur drei Spalten. Wir können unser Rasterelement über den Container hinaus erweitern. Dann fügt es das Rasterelement automatisch entsprechend dem Bruchwert hinzu. Dies ist jedoch nicht die bewährte Methode. Ich werde vier verwenden. Wenn ich diese Folie einlege, kannst du das Ergebnis sehen. Jetzt repariere ich den dritten Gegenstand in seiner absoluten Position. Dafür gebe ich in der Auswahl für das dritte Element Grid Row Außerdem werde ich die Rasterlinien einschalten. Unser drittes Element beginnt bei R Nummer zwei und endet mit zwei Zeilen Nummer drei, und die nächste Eigenschaft O ist die Rasterspalte. Außerdem beginnt es bei Spalte Nummer zwei und endet bei Spalte Nummer drei. Wenn ich diese Datei einstelle, können Sie sehen, dass es keine Änderungen gibt. Dies ist die absolute Position des dritten Elements. Jetzt kann ich dieses Raster nicht von dieser Stelle aus verschieben, und jetzt möchte ich die zweite Spalte bis zur dritten Zeile erweitern . Dafür verwende ich die Eigenschaft der Rasterspalte. Und unsere Spalte beginnt in Zeile Nummer eins und endet bei Zeile Nummer drei. Wenn ich diese Datei einstelle, können Sie dort ein anderes Ergebnis sehen. Weil wir unseren dritten Dip bereits an dieser Position platzieren, unser zweites Rasterelement seinen Platz nicht einnehmen. Dann wird es automatisch verkleinert. Aber wenn Sie es bemerken, können Sie sehen wir nur die Eigenschaften von Rasterspalten verwenden Wir verwenden keine Rasterzeileneigenschaften. Wenn ich die Rasterzeileneigenschaft verwende, zeige ich es Ihnen. Reihe, und versuche, dieses Objekt an diese Stelle zu verschieben. Lass es mich dir zeigen. Aber zuerst werde ich die rote Linie einschalten. Unsere Reihe beginnt Zeile Nummer zwei und endet bis Zeile Nummer drei. Wenn ich diese Datei speichere, können Sie jetzt ein anderes Ergebnis sehen. Jetzt überschneiden sie sich gegenseitig. Wenn Sie das See-Element vollständig sehen möchten, müssen Sie die D-Index-Eigenschaft verwenden. Lass es mich dir zeigen. Ich gebe den Namen der Immobilie ein. Ein Index. Standardmäßig ist er mit Null ausgestattet. Geben Sie also eins ein. Wenn ich diese Datei eingestellt habe, kannst du jetzt das zweite Element mit komplett sehen. Unser drittes Element existiert immer noch hinter dem zweiten Element, und jetzt zeige ich Ihnen den anderen Wert, den wir für Spanning verwenden, nämlich Span Lass es mich dir zeigen. Geben Sie Summe ein, Spanne, und ich möchte unser erstes Element auf bis zu vier Spalten, Span, Leerzeichen vier, ausdehnen. Wenn ich diese Datei einstelle, haben wir leider keine vier Spalten in unserem Container. Deshalb erweitert es unsere Spalte und erzeugt eine neue Rasterlinie. Dafür müssen wir Span Three verwenden. Wenn ich diese Datei setze, kehren wir jetzt zu unserem alten Ergebnis zurück. Wenn ich Ihnen die Rasterlinien zeige, können wir hier insgesamt vier Linien sehen. Dieser Wert funktioniert mit Rasterelementnummern, und dieser Wert funktioniert mit Rasterliniennummern. Dies ist der Hauptunterschied zwischen zwei Werten, und wir können ihn auch beliebig verteilen. Lass es mich dir zeigen. Span T. Wenn ich diese Datei einstelle, erstrecken wir uns jetzt über unseren ersten Container, Zeile ist ebenfalls spaltenweise. Da wir die ZD-Dex-Eigenschaft für unseren zweiten Artikel verwenden , deckt unser erster Artikel den zweiten Artikel nicht ab Ich weiß, dass es ein bisschen kompliziert ist. Aber ich versuche es einfach zu erklären. Nicht nur, dass wir diesen Wert mit diesem anderen Wert verwenden können . Lass es mich dir zeigen. Spanne zwei. Wenn ich diese Datei einstelle, wie können Sie das Ergebnis sehen. Im Moment brauche ich es nicht. Also um es rückgängig zu machen. Außerdem werde ich den Endwert der Rasterzeile ändern. Zwei. Noch einmal werde ich die Rasterlinien einschalten. Angenommen, wir haben viele Spalten in unserem Container und ich möchte das rote Rasterelement vom Anfang bis zum Ende dieses Containers erweitern das rote Rasterelement . Aber ich weiß nicht, wie viele Spaltenzeilen wir haben. Dafür können wir Minuspunkte verwenden. Hier siehst du eine Zeilennummer minus eins. Denken Sie daran, dass unsere letzte Zeilennummer immer mit minus eins beginnt. Wir können hier das Minus v verwenden. Lass es mich dir zeigen. Wenn ich minus eins tippe und diese Datei einstelle, siehst du hier, dass es keine Änderungen gibt. Ich hoffe, jetzt ist dir klar, wie Spannings sind. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial 7. CSS-Gitterlinien-Benennung-Tutorial: Hallo Leute, schön, dass ihr wieder da seid. In dieser Arial werden wir lernen, wie man CSS-Rasterlinien benennt. In unserem vorherigen Tutorial haben wir Rasterlinien verwendet, um unsere Rasterelemente zu überspannen Aber in dieser Studie werden wir lernen, wie wir einen Zeilennamen zuweisen können, wie können wir auch den Zeilennamen verwenden? lernen, wie wir einen Zeilennamen zuweisen können, Lassen Sie mich das vereinfachen Dies ist unser Header-Element und das ist unser Seitenleistenelement. Um dieses Seitenleistenelement zu erstellen, müssen wir die Eigenschaften Grid Ra und Grid Column Property verwenden In der Eigenschaft grid ra müssen wir zuerst den Startpunkt der Linie und dann den Endpunkt der Linie übergeben In diesem Tutorial werden wir jedoch keine Zeilennummern verwenden. Wir werden unseren eigenen Wertnamen erstellen. Wie Sie sehen können, verwende ich für den Startpunkt die Seitenleiste und für den Endpunkt die Seitenleiste n. Lassen Sie uns mit dem Praktischen beginnen und sehen, Seitenleiste n. Lassen Sie uns mit dem Praktischen beginnen wie es ist. Hier können Sie sehen, Seite an Seite, dass ich mein Benutzerstudio Coraor und meinen Browser mit der Lp-Servererweiterung öffne Coraor und meinen Browser mit Ich habe bereits ein ähnliches Dokument für dieses Beispiel erstellt. Hier siehst du ein Web-Layout, das ich anhand von Noten erstelle Hier sehen Sie eine Kopfzeile, ein Manöver für verschiedene Boxen und eine Seitenware und zuletzt eine Hier seht ihr den Container und das ganze Innere dieses Containers Ich erstelle dieses Layout mit Spanning. Lass uns in den Container Deep Selector springen. Hier können Sie sehen, dass wir insgesamt drei Rasterspalten mit einem A-Wert haben drei Rasterspalten mit einem A-Wert Sie können auch sehen, dass wir insgesamt Fib-Reihen mit unterschiedlichen Größen haben insgesamt Fib-Reihen mit unterschiedlichen Größen Für den Header verwende ich eine Höhe von 150 Pixeln. Für Manöver verwende ich eine Höhe von 50 Pixeln und für unsere dritte Zeile verwende ich wiederum eine Höhe von 150 Pixeln. Für die Fußzeile verwende ich wieder eine Höhe von 50 Fixel Hier kannst du sehen, dass ich meinen Header von Anfang bis Ende von eins bis minus eins überspanne Anfang bis Ende von eins bis minus eins Hier können Sie sehen, dass wir dafür den Rasterlinien-Wert verwenden. Ich werde meine Rasterlinien im Entwicklermodus einschalten. Und Sie können die Zeilennummern sehen. Dies ist keine sehr komplexe Vorlage, aber manchmal müssen wir uns schwierigen Vorlagen oder einer sehr komplexen Vorlage stellen. In diesem Fall ist es sehr schwierig, sich diese Zahlen zu merken, und es kann zu sehr großen Problemen führen. Um dieses Problem zu lösen, weisen wir diesen Linien einen Namen zu und nennen diesen Vorgang Grid Line Naming. Schauen wir uns also an, wie es funktioniert. Zuerst beginne ich mit Regeln, und wir müssen diesen Zeilennamen diese Werte zuweisen. Für die erste Notenzeile werde ich einen Namen verwenden , der Header Start lautet. Lass es mich dir zeigen. Zuerst werde ich quadratische Äsen verwenden. Statt dem Quadrat *** werde ich unserer ersten Zeile einen Namen zuweisen , Header Start. Sie müssen sich daran erinnern, dass Sie kein Tempo zwischen zwei Wörtern vorgeben können . Und ich werde Rap einschalten. Sonst kannst du meine Zeilen nicht sehen. Sie können hohe Stifte, Unterstriche oder ein anderes Zeichen Wenn ich mit diesem Header beginne, müssen wir auch diesen Header beenden, und ich möchte diesen Header in Raum Nummer zwei beenden Ich möchte wieder quadratische Verse verwenden. Bei den quadratischen Versen gebe ich Header End Header, End ein. Wenn ich diese Datei einstelle, können wir hier sehen, dass es keine Änderungen gibt. Jetzt zeige ich Ihnen, wie wir diese Namen in unserem Wert verwenden können? In unserer Gridro-Eigenschaft werde ich Header Start eingeben, weil dies unser Ausgangspunkt ist Für unseren Endpunkt werde ich den Endwert der Kopfzeile verwenden. Wenn ich diese Datei speichere, können Sie hier sehen, dass es keine Änderungen gibt. Unsere Namen funktionieren einwandfrei. Lass uns in den Menübereich springen. Lassen Sie uns einen Ausgangspunkt für das Menü erstellen. Dafür müssen wir keine weitere quadratische Basis verwenden. Ich möchte nur ein Leerzeichen zwischen dem Ende der Kopfzeile und dem Startpunkt des Menüs verwenden . Startpunkt für das Menü verwende ich Menu Start. Ich werde den Startnamen des Menüs verwenden. Starten und um dieses Menü zu beenden, verwende ich nach 50 Pixeln den Menüendnamen. Ende des Menüs. Und ich werde diese Namen in unseren Grid-Eigenschaften verwenden . Lass es mich dir zeigen. Also werde ich den Startnamen des Menüs kopieren und zwei mit diesem Namen unterdrücken Für den Endwert unseres Menüs verwende ich menu n name Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt. Es hat sehr perfekt funktioniert. Ebenso können Sie Namen für alle Regeln verwenden. Diese Methode zur Benennung von Zeilen ist sehr hilfreich, wenn wir mit komplexen Layouts arbeiten, und jetzt werde ich unsere Spalten benennen. Hier können Sie sehen, dass wir aus drei Spalten bestehen. Aber wenn Sie es bemerken, können Sie sehen, wir hier einen Wiederholungswert verwenden, und ich verwende einen als Wert für drei Spalten Wie können wir Wiederholungswerten einen Namen zuweisen? Es gibt zwei Methoden, mit denen Sie Ihren Spalten Namen zuweisen können . Entweder geben Sie dreimal ein F ein und jedes Mal , wenn Sie diese Klammern verwenden. Andernfalls können wir diesem Wiederholungswert einen Namen zuweisen . Lass es mich dir zeigen. Vor einem F für Wert verwende ich einen Namen , der Start heißt. Nach einem F-Wert gebe ich call nd ein. Sie können einen beliebigen Namen eingeben. Aber es gibt ein Problem. Es wird Cal Start verwenden und N dreimal aufrufen. Zuerst wird es Call Start hier verwenden und dann wird es Called End hier verwenden. Auch hier wird es Anrufstart verwenden, und dann wird es hier Anruf-Ende verwenden und es geht weiter. Wie können wir es richtig verwenden? Dazu müssen wir zuerst Cool Start eingeben. Und dann müssen wir zuweisen, von wo aus unsere Spalten beginnen. Unsere Spalten beginnen bei eins, geben Sie also eins ein. Als Endpunkt verwende ich Call End, Call End. Weil ich bis zu drei Spalten habe, werde ich drei Haare verwenden. Sie müssen sich die Zeilennummer hier nicht merken. Sie müssen beachten, wie viele Spalten Sie verwenden möchten. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt . Es gibt kein Problem. Es hat perfekt funktioniert. Jetzt möchte ich unseren Header auf bis zu zwei Spalten aufteilen. Ich möchte zwei Erben verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Es verwendet einen zweispaltigen Wert für das Header-Element. Ich möchte zu meiner alten Position zurückkehren. Einige, um drei zu benutzen. Wir können denselben Wert für unsere Menüspalten verwenden. Lass es mich dir zeigen. Einige , um den Wert zu kopieren, und ich werde ihn durch diesen ersetzen. Da unser Menüelement dieselbe Menge an Spaltenfläche einnimmt , können wir diesen Wert verwenden. Wenn ich diese Datei speichere, können Sie sehen, dass es keine Änderungen gibt. Auf diese Weise können Sie Ihren Leitungen einen beliebigen Namen zuweisen und ihn mehrfach verwenden. Ich hoffe, das Konzept der Benennung von Gitternetzlinien ist für Sie klar. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial 8. CSS-Rasterflächenbenennung-Tutorial: Schön, euch wieder zu sehen. Ich bin zurück mit einem Tutorial zum CSS-Grid In diesem Tutorial lernen wir den Namen des CSS-Rasterbereichs kennen. In unserem vorherigen Tutorial erfahren wir mehr über den Namen der Rasterlinie In diesem Tutorial lernen wir jedoch den Rasterbereich Nam kennen. Wir verwenden diese Methode, um unsere Rasterelemente zu positionieren. Mal sehen, welche Art von Eigenschaften wir haben, die wir für die Positionierung verwenden können. Unsere erste Eigenschaft sind Rastervorlagenbereiche und unsere zweite Eigenschaft ist die Rasterfläche. Fangen wir mit der Praxis an und versuchen zu verstehen, wie es funktioniert. Hier können Sie in unserem vorherigen Tutorial sehen, dass wir mithilfe von Rastereigenschaften ein grundlegendes Layout erstellen und hier Namen für Rasterlinien zuweisen. Mithilfe dieser Namen positionieren wir unser Objekt und überschneiden unsere Objekte. Jetzt erstelle ich dieselbe Vorlage, ohne die Eigenschaften der Rasterzeile und der Rasterspalteneigenschaft zu verwenden. Dafür müssen wir keine Zeilennamen verwenden. Hier kannst du sehen, ich habe eine weitere stabile Datei, Grid Atmel, und ich werde diese Vorlage verwenden Zuerst teilen wir dieses Raster in drei Spalten mit einem Wert auf, und wir haben bereits Fib-Zeilen für die Kopfzeile für das Menü, für Boxen und für die Fußzeile Jetzt werde ich jedem Rasterelement einen anderen Namen zuweisen jedem Rasterelement Dafür verwende ich die Rasterflächeneigenschaft. Innerhalb dieses Rasterbereichs können Sie einen beliebigen Namen annehmen. Ich werde dafür denselben Namen verwenden, nämlich Header. Und dafür müssen wir keine umgekehrten Codes verwenden. In ähnlicher Weise werde ich dieselbe Eigenschaft für jedes Rasterelement verwenden dieselbe Eigenschaft für jedes Rasterelement Für das Menü verwende ich den gleichen Namen Menu. Für Box werde ich Box One verwenden. Für Box zwei werde ich Box zwei verwenden. Für Box drei werde ich Box drei verwenden. In ähnlicher Weise werde ich für Box vier Box vier verwenden. Für die Seitenleiste werde ich denselben Namen verwenden , nämlich Sidebar Für Foter werde ich Poter verwenden. Wenn ich diese Datei speichere, siehst du hier , ist alles verschwunden Weil wir keine Positionierung verwenden , sind Artikel weg. In unserer Elternabteilung werde ich eine neue Immobilie nutzen. Lass es mich dir zeigen und unser Eigenschaftsname ist ein toller Vorlagenbereich Tolle Vorlagenbereiche. In diesen Rastervorlagenbereichen werde ich Doppelcodes verwenden. Lass mich dir eine Sache zeigen. Ich gehe zurück zu meiner alten Akte. Hier kannst du mein vorheriges Layout sehen. Wenn ich die Gleichtaste drücke und die Rasterlinien aktiviere, siehst du hier drei Spalten in unserer Struktur, und unser Header-Bereich verwendet dafür drei Spalten. Ich bin also zurück zu meinem neuen Layout, und hier werde ich diesen Header-Namen dreimal verwenden. Lass es mich dir zeigen. Ich soll den Namen kopieren und ihn hier einfügen. Header, Header und Header. Für drei Spalten verwende ich diesen Namen dreimal. Wenn ich diese Datei sage, können Sie hier das Ergebnis sehen. Aber falls Sie das bemerken, lässt sie eine Leerstelle übrig, weil sie sechs Zeilen in unserer Begrüßungsstruktur erwartet Hier verwenden wir nur eine Zeile. Noch einmal, wenn ich euch mein altes Layout zeige, hier seht ihr unser Menü, ebenfalls dreispaltig. In den Doppelcodes werde ich dreimal den Menünamen verwenden. Wenn ich diese Datei speichere und dir mein Layout zeige, kannst du hier das Ergebnis sehen. Ich bin wieder bei meinem alten Layout. Hier kannst du sehen. In unserer ersten Spalte verwenden wir Box One. In unserer zweiten Spalte verwenden wir Feld zwei und in unserer dritten Spalte verwenden wir die Seitenleiste. Ich werde diese Leitung manipulieren. Für unsere erste Kolumne werde ich den Namen Box One verwenden. Für unsere zweite Spalte werde ich den Namen von Feld zwei verwenden. Für unsere dritte Spalte werde ich den Namen der Seitenleiste verwenden Wir verwenden diese Spaltennamen für unsere dritte Zeile. Ich werde mir noch einmal diese Zeile holen. Hier können Sie sehen, unsere vierte Reihe, beginnen mit Feld drei, dann kommen Feld vier und dann wieder Seitenleiste Ich gebe Feld drei, Feld vier ein und komme dann zur Seitenleiste In unserer letzten Zeile, hier können Sie sehen, verwenden wir drei Spalten für unsere Fußzeile Ich werde diesen Fußnamen dreimal verwenden. F doppelter TER, Fußzeile, Fußzeile und Fußzeile. Und Semikolon für in dieser Zeile. Wenn ich diese Datei gespeichert habe und Ihnen mein Layout zeige, können Sie hier sehen, dass wir unser altes Layout erfolgreich erstellt haben, ohne die Eigenschaften Rasterzeilen und Rasterspalten zu verwenden Dies ist die zweite Methode, mit der wir unsere Rasterelemente positionieren können. Dafür müssen wir nur zwei Eigenschaften verwenden. Unsere erste Eigenschaft ist die Rasterfläche und unsere zweite Eigenschaft sind Raster-Tablet-Bereiche. Diese Art der Positionierungstechnik ist für kleine Projekte sehr nützlich. Wenn Ihr Layout nicht komplex ist, können Sie diesen Prozess verwenden. Wenn Ihr Projekt jedoch komplexer und älter ist, empfehle ich, diesen Prozess nicht zu verwenden. Wie Sie hier sehen können, verwenden wir für jede Zeile drei Spaltennamen. Wenn ich eine der Spalten entferne, beliebige Zeile, so entferne ich das Menü Wenn ich diese Datei einstelle, können wir hier sehen, dass alles weg ist. Da wir drei Spalten verwenden , müssen wir deshalb drei Spaltennamen übergeben. Wenn ich diese Datei noch einmal einstelle , siehst du, jetzt sieht sie perfekt aus. Und jetzt nehmen wir an, Sie möchten zwei Spalten für den Menübereich verwenden. In diesem Fall müssen Sie Punkthaare weitergeben. Wenn ich diese Datei einstelle, funktioniert es jetzt. Wenn Sie den Menüpunkt nur in der zweiten Spalte verwenden möchten , müssen Sie in diesem Fall nur einen weiteren Punkt vor dem Menüpunkt Menüpunkt einfügen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wir können unser Rasterelement ausrichten und unser Rasterelement einfach anhand von Punkten positionieren. Sie können diesen Punkt in der Mitte dieser beiden Spalten jedoch nicht verwenden . Lass es mich dir zeigen. Wenn ich die Kopfzeile von dieser Stelle entferne und einen Punkt verwende und diese Datei setze, kann das dein Layout zerstören. Ich werde diesen Vorgang noch einmal wiederholen , so wie er funktioniert. Zuerst müssen Sie für jedes Rasterelement einen Eigenschaftsnamen als Rasterbereich verwenden für jedes Rasterelement einen Eigenschaftsnamen als Rasterbereich und dann müssen Sie einen Namen zuweisen. Sie können dafür einen beliebigen Namen verwenden. Dann müssen Sie in der Auswahl des übergeordneten Containers eine Eigenschaft verwenden, bei der es sich um Rastervorlagenbereiche handelt Dann müssen Sie sich merken, wie viele Spalten Sie dieser Rasterstruktur zuweisen Gemäß meinem Layout, Sie hier sehen können, verwende ich drei Spalten. In jeder Zeile müssen wir drei U übergeben, und hier können Sie sehen, dass wir auch unsere Seitenleistenzeile überspannen Deshalb verwende ich diesen Namen für die Seitenleiste in Zeile Nummer drei und Zeile Nummer Ich hoffe, du verstehst jetzt, was Grit Area Naming ist. Vielen Dank, dass Sie sich diese Videos und bleiben Sie gespannt auf unsere nächste Tour 9. CSS-Grid MinMax-Funktion Tutorial: Hey, schön dich wieder zu sehen. Ich bin wieder mit einem neuen Tutorial zum Thema Cess Grit In diesem Tutorial lernen wir die MinMax-Funktion von Cess Grid Mit dieser Funktion können wir Höhe von Rosen und Spalten dynamisch ändern Lass uns damit beginnen. In diesem Tutorial lernen wir zwei weitere Werte ohne Minmax Der erste ist Max Content und der zweite ist Men Content Mal sehen, wie wir Größe und Gewicht dynamisch ändern können . Hier können Sie nebeneinander sehen, ich meinen Visto Cortor und meinen Browser mit der Lp-Servererweiterung öffne meinen Browser mit der Lp-Servererweiterung Und ich erstelle bereits ein stabiles Dokument. Wie Sie in meinem übergeordneten Container sehen können, haben wir acht verschiedene Rasterverkäufe, und wir deklarieren vier Spalten für unsere Rasterwaagen mit einem F-Wert Wir haben auch zwei Zeilen mit einer Höhe von 175 Pixeln. Fangen wir mit dem Praktischen an. Fangen wir mit dem Praktischen an. Wie Sie in meinem ersten Rasterelement sehen können, gibt es zuerst einen Textnamen. Ich werde weitere Texte in dieses Rasterelement einfügen. Luram, 20 Jahre alt. Es werden 20 Wörter zu diesem Rasterelement hinzugefügt. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Lassen Sie mich einige Wörter reduzieren, und dann werde ich diese Datei einstellen. Hier können Sie sehen, dass es unsere Linien nach diesem Rasterelement aufschlüsselt. Aber was ist passiert? Wenn ich den maximalen Inhaltswert für unsere erste Spalte verwende, verwenden wir ihn. Ich werde den maximalen Inhaltswert für unsere erste Spalte verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier seht ihr, dass es für diesen Absatz keinen Zeilenumbruch und er auch aus dem Container mit Größe überläuft Wenn wir diesen Wert verwenden, wird er unsere Zeilen nicht unterbrechen Es wird den gesamten Absatz in einer Zeile drucken. Es ist nicht sehr nützlich für unsere echten Projekte. Ich werde aus diesem Absatz einige Welten herausnehmen. Dann werde ich diese Datei speichern. Lassen Sie uns noch ein paar Wörter reduzieren. Jetzt sieht es perfekt aus. Jetzt werde ich unserem vierten Inhalt etwas mehr Text hinzufügen. Ich bin zehn, und ich werde diese Datei sagen, und dann werde ich unseren nächsten Wert für diese Spalte verwenden, nämlich Männer enthalten. Wenn ich diese Datei einstelle, kannst du hier das Ergebnis sehen. Es ändert dynamisch das achte entsprechend dem größten Wort dieses Satzes. Außerdem werde ich diesem Artikel mehr Text hinzufügen. Lassen Sie uns mehr Text hinzufügen. Bin acht. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sich unser Text mit dem Rasterelement überschneidet. Um dieses Problem zu lösen, können wir unserer Zeile einen Mindestinhaltswert hinzufügen . Lass es mich dir zeigen. Ich werde den Wert 170 Pixel entfernen und hier den Inhaltswert Man eingeben. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie die große Objekthöhe entsprechend dem Textbereich festlegt . Angenommen, ich möchte unserem siebten Artikel 51 Absatz hinzufügen. Ich werde zum siebten Punkt springen und Lum, 50 eingeben Wenn ich diese Datei einstelle, können Sie hier sehen, hier können Sie sehen, dass sie, je nach Textgröße, Größe je nach Textgröße, Größe und Gewicht geändert wird eine Gemäß diesem Text wird eine Mindestgröße und mindestens acht Körpergrößen benötigt. Deshalb ist dieser Vueme der Hauptinhalt. Und jetzt möchte ich die Mindesthöhe unserer Rolle festlegen. Also werde ich einige oder aus diesem Text entfernen. Dann werde ich diese Datei einrichten. Jetzt verwende ich die Minmax-Funktion , um eine feste Höhe festzulegen Lass es mich dir zeigen. Ich werde hier die Mn Mx-Funktion verwenden. MinMax. Setzen Sie diese Klammern ein, und hier müssen wir die beiden Werte übergeben Für die Mindestgröße von Pro und für die maximale Größe von Pro. Angenommen, unsere minimale Zeilenhöhe beträgt 175 Pixel. Für das Maximum verwende ich die Inhaltseigenschaften von men. Weil ich die Höhe entsprechend dieser Inhaltsgröße ändern möchte . Wenn unser Inhalt eine Höhe von mehr als 170 Pixeln hat. Wenn ich diese Datei speichere, können Sie hier standardmäßig sehen, unsere Zeile eine Höhe von 170 Pixeln hat. Aber wie Sie in unserer ersten Zeile sehen können, benötigt sie eine Höhe von mehr als 170 Pixeln. Sei es die Inhaltsgröße, die mehr als 170 Pixel benötigt. Für unseren maximalen Wert verwenden wir Hauptinhalte. Deshalb kann es so viel Höhe nehmen, wie es will. Die Min Max-Funktion ist für unsere Zeilen sehr nützlich. Hier legen wir den Mindestwert für unsere Artikelhöhe fest. Wenn unser Inhalt jedoch mehr Höhe annimmt, können wir den Hauptinhaltswert als Maximalwert verwenden . Aber was ist passiert? Wenn ich eine maximale Höhe von 200 Pixeln einstelle? Lass es mich dir zeigen. Wenn ich diese Datei einstelle , können Sie sehen, unsere zweite Zeile standardmäßig 175 Pixel hoch ist. Aber unsere erste Zeile erstreckt sich bis zu 200 Pixel, und dann fließt unser Inhalt über dieses Element. Aus diesem Grund bezeichnen wir die Verwendung von Hauptinhalt als maximale Größe. Hauptinhalt. Jetzt kann es den gesamten Inhalt unserer Zeile enthalten, und jetzt werde ich die MinMax-Funktion als Spaltenwert verwenden . Lass es uns benutzen Für unsere erste Spalte werde ich die MinMax-Funktion verwenden Und ich werde eine Mindestbreite für diese Spalte festlegen, die 150 Pixel beträgt Außerdem nehme ich 200 Pixel für die maximale Breite. Hier können Sie sehen, dass wir bereits die maximale Containerbreite festgelegt haben, die 700 Pixel beträgt, aber ich werde an dieser Stelle einen Prozentwert von 80% verwenden , um unsere Webseite responsiver zu machen. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Lassen Sie uns unserer ersten Spalte mehr Inhalt hinzufügen. Ähm, sechs. Hier können Sie sehen, dass unsere erste Spalte maximale Breite von 200 Pixeln hat. Wenn ich die maximale Breite auf 300 Pixel erhöhe und dann diese Datei festlege, können Sie jetzt die Änderungen sehen. Standardmäßig benötigt sie eine Breite von 150 Pixeln und kann sich auf bis zu 300 Pixel erstrecken. Danach werden unsere Linien aufgeschlüsselt, und jetzt werde ich 200 Pixel für unsere Mindestbreite verwenden. Wenn ich meine Entwickleroption aktiviere und diesen Inhalt auswähle. Hier können Sie sehen, dass die maximale Breite dieses Inhalts 300 Pixel beträgt. Wenn ich versuche, es responsiv zu machen, und dann dieses Element auswähle, können Sie hier sehen, dass die Mindestbreite dieses Elements 200 Pixel beträgt. Weil wir bereits eine Mindestgröße für diese Spalte festgelegt haben. Lassen Sie mich es Ihnen auch zeigen, wenn wir unser Fenster skalieren. Wählen Sie dann dieses Element aus. Sie können sehen, dass es nicht um mehr als 300 Pixel erweitert werden kann. Ich hoffe, dir ist jetzt ein bisschen klar, wie es funktioniert. Wenn ich einen Prozentwert in unserer Maximalgröße verwende, zeige ich es Ihnen. 60%. Stellen Sie dann diese Datei ein, jetzt können Sie ein anderes Ergebnis sehen. Es wird 60% der Breite dieses Containers einnehmen. Wir können den Prozentwert, den E-Wert, den Pixelwert usw. verwenden. Aber wenn ich die Browsergröße reduziere, wird es bei einer Breite von 200 Pixeln aufhören Wir können unsere erste Spalte nicht um mehr als 200 Pixel verkleinern. Ich hoffe, jetzt ist klar wie Hauptwert und Maximalwert funktionieren. Danke, dass du dir dieses Video angesehen hast und bleib dran für unser nächstes Tutorial. 10. CSS-Grid-Implicit-und Explicit-Grid-Tutorial: Schön euch zu sehen, ich bin wieder mit einem Nutririal zurück, und in diesem Sural werden wir implizites Grid und explizites Grid lernen implizites Grid und explizites Grid lernen Mal sehen, was das ist? Hier können Sie nebeneinander sehen, wie ich mein Visuo Studio Coreor und meinen Browser mit der PSEral-Erweiterung öffne meinen Browser mit Wie Sie in meinem übergeordneten Container sehen können, haben wir Zuerst würde ich sagen , innerhalb der Höhe. Zuerst verwende ich den Spaltenwert der Rastervorlage. Greed-Vorlagenspalten, und ich werde zwei Spalten mit einem E-Wert erstellen Dafür verwende ich den Wiederholungswert. Wiederhole. Zwei Spalten mit einem E-Wert. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Außerdem werde ich Zeilenhöhe sagen. Dafür werde ich die Wurzeleigenschaften großer gemäßigter Temperaturen verwenden. Aber ich werde sagen, drei Reihen hoch von diesen vier Reihen. Ich werde den Wiederholungswert erneut verwenden. Wiederhole drei Zeilen mit einem Wert von 100 Pixeln. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Außerdem werde ich für eine Lücke zwischen diesen Zellen sorgen. Also tippen, lesen, Gap-Eigenschaft. 20 Pixel. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier können Sie sehen, wir haben gerade zwei Spaltengrößen und drei Zeilengrößen definiert . Aber wir haben insgesamt acht Zellen in dieser Struktur. Wir gestalten unser siebtes Rasterelement und unser achtes Rasterelement nicht . Angenommen, wir extrahieren die Daten dynamisch vom Server und ich möchte diese Daten in unserer siebten und achten Spalte anzeigen . Dafür müssen wir die Höhe einstellen. Wir haben die Höhe jedoch bereits mithilfe der Zeileneigenschaft der Rastervorlage definiert . Was sind diese Spalten? Wie können wir die Höhe der Spalten festlegen ? Lass mich dir etwas zeigen. Wenn ich p drücke und dir meine Entwickler-Toolbar zeige und auf dieses Rastersymbol klicke. Hier seht ihr einige Rasterlinien. Wie Sie sehen können, haben wir o und zwei Spalten formatiert. Wir nennen diese Struktur explizite Gier , weil wir diesen Bereich explizit anhand dieser beiden Eigenschaften definieren und diese, die wir nicht definiert haben, und wir nannten sie implizite Um dieses implizite Raster zu gestalten, haben wir einige neue Eigenschaften eingeführt Lass es uns sehen. Hier können Sie sehen, dass wir insgesamt drei eigenschaftsbezogene implizite Raster haben Unser erstes ist Grid Autos, O das zweite ist Grit Auto Columns und unser letztes ist Grid Auto Fangen wir mit der Praxis an und versuchen zu verstehen, wie es funktioniert Nach einer Netzlücke werde ich unsere neue Eigenschaft verwenden, nämlich Grid Auto Ose. Manche Typen von Grid-Auto-Roben. Hier können wir unsere implizite Höhe der Rasterzeile definieren. Für unser implizites Element werde ich eine Höhe von 50 Pixeln definieren Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass die Höhe des impliziten Rasterelements 50 Pixel beträgt Wenn wir diesem Container weitere Zellen hinzufügen, möchte ich Ihnen einige zeigen, um diese Zeile zweimal zu duplizieren und diese Datei festzulegen Jetzt können Sie sehen, dass die Höhe für diese Rasterelemente automatisch auf 50 Pixel festgelegt wird. Vorerst werde ich diese Spalten löschen. Ich brauche es nicht und stelle diese Datei ein. Hier können Sie sehen, wenn wir eine neue Zelle hinzufügen, wird die Zeile hinzugefügt. Aber jetzt möchte ich spaltenweise neue Zellen hinzufügen. Dafür müssen wir einen anderen Wert verwenden, nämlich Grid Auto Flow, Soil Type, Greed, Auto Flow Es gibt zwei Arten von Werten. Zeile und Spalte. Standardmäßig wird mit Zeilen gearbeitet. Aber hier werde ich die Spalte verwenden. Wenn ich diese Datei sage, können Sie jetzt das Ergebnis sehen. Weil wir in unserem expliziten Raster bereits drei definiert haben. Dann, nach drei, werden alle Verkaufsartikelspalten hinzugefügt. Wie Sie sehen können, definiert Harry keine Spaltengröße für dieses Rasterelement. Entsprechend dieser Größe ist es Spur acht, und jetzt möchte ich es unserem impliziten Raster zuweisen Dafür müssen wir eine Eigenschaft verwenden , nämlich Grite Auto Columns Und hier gebe ich einen Wert von 0,5 f für unsere implizite Note Wenn ich diese Datei einstelle, können Sie hier das Ergebnis sehen. Unsere explizite Rasterspalte nimmt einen F-Wert an, und unsere implizite Rasterspalte nimmt einen F-Wert Wenn ich diesem Container weitere Spalten hinzufüge, zeige ich es Ihnen und lege dann diese Datei fest Jetzt können Sie sehen, dass entsprechend diesem Rasterelement auch ein Wert von 0,5 angenommen wird. Dies ist unser implizites Raster und unsere explizite Note. Ich hoffe, jetzt ist es für dich klar. Danke, dass du dir dieses Video . Wir freuen uns auf unser nächstes Tutorial. 11. CSS-Rasterelemente-Ausrichtung: Hallo Leute, schön, dass ihr wieder da seid. In diesem Tutorial lernen wir Ausrichtung von CSS-Rasterelementen kennen. In unserem vorherigen Video erfahren wir, wie wir Layouts mithilfe von CSS-Rasterelementen erstellen und wie wir diese Elemente positionieren können. In diesem Tutorial werden wir jedoch etwas über horizontale und vertikale Ausrichtung lernen . Wir haben insgesamt sechs eigenschaftsbezogene CSS-Rasterausrichtungen. Objekt ausrichten, Objekt ausrichten, Objekt platzieren, Selbst ausrichten, Selbst ausrichten und Selbst platzieren. Fangen wir mit der Praxis an und versuchen zu verstehen, wie es funktioniert. Hier können Sie Seite an Seite sehen, ich meinen ESOS-Tough-Codaor und meinen Browser mit der Lp-Servererweiterung öffne meinen Browser mit der Lp-Servererweiterung Ich habe bereits ein STE-ML-Dokument mit dem Namen Index Dot STL erstellt. Hier können Sie sehen, dass wir insgesamt zehn Rasterelemente haben. Unsere ersten sechs Rasterelemente sind explizite Rasterelemente und unsere letzten vier Rasterelemente sind implizite Rasterelemente Hier können Sie sehen, dass unser explizites Rasterelement HT 100 Pixel und unser implizites Rasterelement HT 50 Pixel beträgt Jetzt möchte ich mein fünftes Rasterelement überspannen, und zwar zeilenweise Dazu springe ich in die fünfte Elementauswahl und verwende hier die Eigenschaft Sess, die Rasterzeile Hier werde ich dieses Element auf bis zu zwei Zeilen verteilen, tippe , span und dann übergebe ich Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier sehen Sie unser Zinngitter-Objekt, und ich möchte dieses rote Objekt spaltenweise aufteilen. Ich werde in den Intent-Ten-Selektor springen und hier die Eigenschaft Sess verwenden, bei der es sich um eine Rasterspalte handelt Ich gebe Grid, Column ein und möchte das Ganze auf zwei Spalten aufteilen Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. H steht für Span Item, und hier ist Span Item spaltenweise. Lassen Sie uns mit der Ausrichtung beginnen. Zuerst werde ich mich mit der vertikalen Ausrichtung befassen. Dafür müssen wir Align item und Align Self Property verwenden . Diese Eigenschaften haben vier Werte. Lass es mich dir zeigen. Die erste ist Start, Ende, Mitte und Dehnung. Wenn wir den Startwert verwenden, wird unser Inhalt, also der Anfang dieses Containers, an dieser Stelle platziert. Wenn wir den Wert n verwenden, wird unser Inhalt an dieser Stelle platziert. Wenn wir center verwenden, wird unser Inhalt im Mittelpunkt des Rasterelements platziert , und Stretch ist unser Standardwert. Ich bin wieder bei meinem Visual Studio-Codator und springe jetzt in den übergeordneten Container Zuerst verwende ich einen Sass-Wert, der Elemente ausrichten heißt Also, um Align items einzugeben. Ich werde unseren ersten Wert verwenden und unser erster Wert ist Mittelpunkt. Wenn ich diese Datei speichere, können Sie hier sehen, wie sie unser Inhaltscenter ausrichtet. Und das ist unser Prozess der vertikalen Ausrichtung. Wenn ich dir meine Rasterlinien zeige, kannst du sie hier deutlich sehen. Wie Sie sehen können, ist dies unser Rasterelement, und dies ist der Inhalt dieses Rasterelements. Wie Sie sehen können, wird unser Inhalt in die Mitte dieses Elements verschoben , da wir die Option Elemente zentrieren verwenden Aber was ist mit unserem fünften Artikel passiert ? Gemäß dieser Zeile richtet es unseren Inhalt aus, Ende dieses Rasterelements, aber das ist es nicht. Weil wir unseren Gegenstand in der fünften Klasse abdecken. Deshalb werden zwei Gegenstände verwendet. Je nach Artikel zentriert es den Inhalt. Außerdem können Sie dieselbe Ausrichtung für unsere impliziten Rasterelemente sehen für unsere impliziten Rasterelemente Jetzt verwende ich Endwert, irgendeinen Typ, en D. Wenn ich diese Datei einstelle, können Sie jetzt die Ausrichtung sehen H, Sie können sehen, wie es unseren Inhalt ausrichtet, das Ende dieses Elements. Lassen Sie mich Ihnen das auch zeigen, wenn wir den Startwert verwenden. Und dann stelle diese Datei ein, du kannst die Ausrichtung sehen. Hier können Sie den Aligner-Inhalt und den Anfang dieses Elements sehen. Unser letzter Wert für das Align-Element ist Stretch. Lass es mich dir zeigen. Wenn ich diesen Wert verwende und diese Datei festlege, handelt es sich um eine Standardpositionierung für die Ausrichtung. Es ist nicht sehr wichtig. Es ist ein Standardwert. Vorerst werde ich den Mittelwert verwenden. Jetzt werde ich über Align Self sprechen. Was ist Align Self? Hier können Sie sehen, dass der gesamte Artikelinhalt Align Center ist. Jetzt beschließe ich, unseren Artikel der dritten Klasse anders auszurichten. Ich möchte sagen, dass ich den Align-Endwert für dieses dritte Element verwenden möchte . Ich werde in die dritte Elementauswahl springen. Für diese Art der Ausrichtung müssen wir align self property verwenden Irgendein Typ, align self, und hier werde ich den Endwert verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wenn ich meine Rasterlinien aktiviere, können Sie hier sehen, der gesamte Inhalt in der Mitte ausgerichtet ist, aber unser drittes Rasterelement am Ende ausgerichtet ist. Wir können diese Immobilie nur für den Einzelverkauf nutzen, nicht für den gesamten Container. Jetzt ist es für dich klar. Wenn wir dafür die Ausrichtung all dieser Elemente anwenden möchten, müssen wir die Eigenschaft Aligned item verwenden. Wenn wir dafür einzelne Artikel beantragen möchten, müssen wir Aligned Sale Property verwenden. Jetzt werde ich über die horizontale Ausrichtung sprechen. Für die horizontale Ausrichtung müssen wir zwei Eigenschaften verwenden ify item und justify self Es ist unserem vorherigen ähnlich. Wir müssen dafür denselben Wert verwenden. Start, Ende, Mitte und Dehnung. Fangen wir mit dem Praktischen an. Wieder einmal werde ich von ISO Studio Correator unterstützt. Ich werde in den übergeordneten Container springen. Jetzt möchte ich unseren Inhalt horizontal mittig ausrichten. Dafür müssen wir eine Eigenschaft verwenden, nämlich justify item. Und unser Wert steht im Mittelpunkt. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Wenn ich meine Rasterlinien einschalte, kannst du es deutlich sehen. Es hat unseren Inhalt horizontal zentriert. In ähnlicher Weise können Sie jetzt das Ergebnis sehen, wenn ich einen anderen Wert verwende und dann diese Datei und dann diese Datei festlege. Jetzt können Sie das Inhaltsende dieses Rasterelements sehen. In ähnlicher Weise haben wir einen anderen Wert, nämlich Start. Wenn ich diese Datei einstelle, kennen Sie das Ergebnis. Es richtet unseren Inhalt horizontal aus, Beginn dieses BT-Elements. Wenn Sie Ihren Inhalt auf die linke Seite verschieben möchten , müssen Sie Start verwenden. Wenn Sie Ihren Inhalt auf die rechte Seite verschieben möchten , müssen Sie Ende verwenden. Wie Sie wissen, ist Stress unser Standardwert, daher werde ich ihn hier nicht erklären. Jetzt werde ich über berechtigtes Eigeneigentum sprechen. Angenommen, Sie haben Ihr erstes Objekt horizontal zentriert. Dafür müssen wir berechtigtes Eigeneigentum verwenden. Lass es mich dir zeigen. Hier werde ich berechtigtes Eigeneigentum verwenden. Ich werde Center Value verwenden. Wenn ich diese Datei speichere, können Sie das Ergebnis sehen. Wenn ich meine Rasterlinien aktiviere, können Sie es deutlich sehen. Wenn Sie Ihre Inhalte individuell ausrichten müssen, können Sie Immobilien mit berechtigtem Verkauf verwenden. In ähnlicher Weise haben Sie dafür insgesamt drei Werte. Mitte, Anfang und Ende. Jetzt möchte ich über zwei neue Immobilien sprechen. Artikel platzieren und Verkauf platzieren. Artikel platzieren ist ein kurzes Ende, Artikel ausrichten und Artikel ausrichten. Wenn Sie diesen Wert in einer Zeile verwenden möchten , können Sie ihn verwenden. In dieser Eigenschaft müssen Sie zuerst Einheit an Pus setzen, den Elementwert ausrichten und dann den Elementwert durch Pus ausrichten, und dazwischen müssen Sie ein Leerzeichen angeben In ähnlicher Weise haben wir die Möglichkeit, Immobilien zu verkaufen. Dies gilt für einzelne Rasterelemente. Zuerst Einheit zu Pus, Align den Schalenwert, und dann Einheit zu Pus rechtfertigen den Sollwert. Lassen Sie uns in der Praxis sehen, wie es funktioniert. In einer Sekunde schwört Ivaci dem Schöpfer. Vorerst werde ich diese beiden Zeilen auskommentieren. Zunächst verwende ich die Eigenschaft Place Item. Also werde ich Gegenstände binden. Wie Sie wissen, müssen wir zuerst den Artikelwert übergeben und dann müssen Sie den Artikelwert pz begründen Unser erster Wert ist Mittelpunkt. Und unser zweites Tief ist Stern. Jetzt werde ich diese Datei einrichten. Wenn ich diese Datei einstelle, können Sie hier das gleiche Ergebnis sehen. Es gibt keine Änderungen. Sie können diesen Wert auf diese oder jene Weise verwenden. Es liegt ganz bei dir. Schauen wir uns als Nächstes an, wie Place Cell Value funktioniert. Wie Sie wissen, ist es individuelle Arbeit. In unserem zweiten Punkt werde ich diese Eigenschaft verwenden. Platziere dich selbst. Zuerst müssen wir den Zellenwert ausrichten und dann müssen Sie den ausgerichteten Zellenwert mit dem Pluszeichen hinzufügen. Ich möchte die Mitte angeben, und ich habe den Wert der Zelle als Mittelpunkt angegeben. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Es ist horizontal und vertikal zentriert oder inhaltlich. Ich hoffe, jetzt ist dir klar , wie Place Self und Place Items funktionieren. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 12. CSS-Rasterspuren-Ausrichtung: Hallo Leute, schön, dass ihr wieder da seid. In diesem Tutorial erfahren wir mehr über die Ausrichtung der Rasterspuren in CS. Für die Ausrichtung unseres Gleises haben wir insgesamt drei Eigenschaften „Inhalt ausrichten“, „ Inhalt ausrichten“ und „Inhalt platzieren “ ist eine verkürzte Version von „Inhalt ausrichten“ und „Inhaltseigenschaft und „Inhaltseigenschaft Versuchen wir zu verstehen, was Grid Item Track ist. Hier können Sie sehen, dass ich Seite an Seite meine Dateien mit der Lip Server-Erweiterung für Ihren Coortor und meinen Browser öffne und bereits ein STL-Dokument mit dem Namen Index Dot Lip Server-Erweiterung für Ihren Coortor und meinen Browser STML erstelle Hier werde ich dieselbe Rasterstruktur verwenden, die ich in meinem vorherigen Tutorial verwendet habe Hier können Sie sehen , wie zehn Rasterelemente eingefügt wurden. Wie Sie sehen können, erstrecken wir uns über unsere fünften Rasterelementzeilen und auch über unsere zehn Rasterelementspalten. Zuerst werde ich die Spalte reduzieren. Lass es mich dir zeigen. Ich reduziere einen E-Wert und tippe 150 Pixel ein. Wenn ich diese Datei einstelle, können Sie die Ausrichtung sehen, und ich werde auch die Containerhöhe erhöhen. Also werde ich die Höheneigenschaft verwenden. Höhe 750 Pixel. Wenn ich diese Datei einstelle, können Sie diesen Bereich sehen. Jetzt zeige ich Ihnen, wie wir Align Content und Justify Content verwenden können . Aber zuerst müssen wir verstehen, was berechtigter Inhalt ist. Wir verwenden ausgerichteten Inhalt für die horizontale Ausrichtung und haben insgesamt sieben Werte, die sich auf einen ausgerichteten Inhalt beziehen : Anfang, Ende, Mitte, Dehnung, Abstand um ihn herum, Abstand dazwischen und Abstand gleichmäßig. Unsere letzten drei Werte verwenden wir für Inhaltseigenschaften. Lass mich dir zeigen, wie es getragen wird. Ich bin wieder bei meinem Visual Studio-Code-Editor. Zuerst werde ich meine Rasterlinien einschalten, also werde ich EP til loben, und dann klicke ich auf Raster und wie Sie die Rasterlinien sehen können Jetzt verwende ich den Wert justify content. Zuerst verwende ich Center Value. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier können Sie alle Rasterelemente zusammen sehen Gehen Sie zur Mitte dieses Containers. Die Eigenschaft „Justified Item“ wird verwendet. Wir können unseren Inhalt innerhalb dieser Artikel zentrieren. Mithilfe der Eigenschaft „Justified Content können wir unsere Rasterelemente innerhalb des Containers ausrichten. Mit ausgerichtetem Inhalt können wir die gesamte Spur verschieben. In ähnlicher Weise haben wir einen anderen Wert, nämlich end. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Horizontal verschiebt es unsere Rasterelemente, das Ende dieses Containers und Anfang ist ein Standardmenü. Lass es mich dir zeigen Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt werde ich über unsere drei neuen Werte sprechen. Unser erster Wert ist der Abstand dazwischen. Also werde ich hier ein Leerzeichen zwischen eingeben. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wenn wir Leerzeichen zwischen Werten verwenden, geben Sie den verbleibenden Abstand zwischen unseren Rasterelementen an. Wie Sie sehen können, werden unsere Rasterelemente n in n aufgeteilt . Aber wenn Sie drei Spalten haben, lassen Sie mich Ihnen das zeigen, um hier drei zu übergeben. Und dann stelle diese Datei ein, hier siehst du das Ergebnis. Wie Sie sehen können, hat sie unsere zweite Spalte in die Mitte gestellt und unser Leerzeichen in zwei P aufgeteilt. Im Moment verwende ich zwei Spalten. Unser nächster Wert ist Leerzeichen um uns herum. Lass es mich dir zeigen. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Wenn wir diesen Wert verwenden, stellt er, wie Sie sehen können, zuerst ein Leerzeichen bereit, dann unser Rasterelement, und dann können Sie zweimal die gleiche Größe des Leerzeichens sehen. Dann noch einmal unsere Spalte und ein blinder Raum. Sie können links und rechts das gleiche Leerzeichen sehen. Außerdem können Sie nach der ersten Spalte den gleichen Abstand sehen . In ähnlicher Weise können Sie dieses Leerzeichen vor der zweiten Spalte sehen . Sie können sehen, je mehr Platz in der Mitte vorhanden ist, und unser nächster Wert ist der gleichmäßige Abstand. Also, um Leerzeichen gleichmäßig einzugeben. Wenn ich diese Datei einstelle, können Sie hier sehen dass sie dem Leerzeichen um den Wert ziemlich ähnlich ist. Aber es gibt einen grundlegenden Unterschied. Der Hauptunterschied besteht darin, dass Sie zwischen unseren großartigen Artikeln den gleichen Abstand sehen können . Wenn diese Leerraumgröße eins a ist, können Sie vor und hinter der Spalte dieselbe Menge an Platz sehen . Dies ist unser berechtigtes Inhaltseigentum. Wir verwenden es grundsätzlich für die horizontale Ausrichtung, und diese Eigenschaft funktioniert mit Grid-Tricks. Lassen Sie uns über die Ausrichtung des Inhaltswerts sprechen. Wir verwenden die Eigenschaft align content für die vertikale Ausrichtung. Wie Sie sehen können, gibt es für diese Eigenschaft insgesamt sieben Werte: Start, Ende, Mittelpunkt, Dehnung, Abstand um ihn herum, Abstand dazwischen und Abstand gleichmäßig. Wir kennen diese vier Werte bereits. Aber in diesem Artikel lernen wir den Raum um den Raum dazwischen und den gleichmäßigen Abstand Kehren wir zum Praktischen zurück. Hier können Sie sehen, dass die Höhe unseres Rastercontainers 750 Pixel beträgt. Ich werde diesen Eigenschaftsnamen eingeben, Inhalt ausrichten“ lautet, unser erster Wert ist center. Wenn ich diese Datei einstelle, können Sie hier das Ergebnis sehen. Wenn ich meinen Entwicklermodus aktiviere, können Sie ihn jetzt deutlich sehen. Wie Sie sehen können, hat es unseren Inhalt vertikal zentriert. Wenn ich den Endwert verwende und dann die Datei festlege, können Sie jetzt sehen, dass unsere Rasterstruktur an das Ende dieses Inhalts gesetzt wird. Wie Sie wissen, ist Start unser Standardwert. Aber jetzt verwende ich einen Wert-Namensraum dazwischen. Also tippe, Leerzeichen dazwischen. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Hier können Sie sehen, wie es unseren Artikel der ersten Klasse und unseren Artikel der letzten Klasse aneinander reiht. Hier können Sie die Leerzeichen zwischen allen Klasseneinträgen sehen. Dies ist der Anwendungsfall von Leerzeichen zwischen Werten. Lassen Sie uns zum nächsten Wert springen, nämlich dem Leerzeichen. Geben Sie also ein, Leerzeichen. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Dieser Wert gibt den Platz an, oben im Inhalt und unten im Inhalt. Nehmen wir an, er bietet zehn Pixel über dem oberen Rand dieses Rasterelements, und er wird auch einen Abstand von zehn Pixeln am unteren Rand dieses Elements bereitstellen von zehn Pixeln am unteren Rand dieses Elements und dann den Lückenbereich erreichen Auch hier wird über diesem dritten Element ein Abstand von zehn Pixeln angezeigt Auf diese Weise ist es Arbeit. Unser letzter Wert ist Space Even. Also um den Raum gleichmäßig zu verknüpfen. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie oben und unten auf diesem Element die gleiche Menge an Speicherplatz bietet . Dies ist der Anwendungsfall dieser Werte. Lass mich dir eine Sache zeigen. Hier können Sie sehen, dass wir unsere Kolumne 102 mal umspannen. Ich werde die Eigenschaft „Rasterspalte“ aus Punkt zehn entfernen . Und jetzt werde ich Punkt sieben behandeln. Also um es hier einzufügen. Wenn ich diese Datei speichere, siehst du hier eine Lücke. Hier siehst du ungefüllten Speicherplatz. Wenn Sie mit einer komplexen Rasterstruktur arbeiten, sind solche Probleme manchmal Wenn Sie diese Art von Problem lösen möchten, haben wir eine weitere Eigenschaft, nämlich den automatischen Netzfluss. Lass es mich dir zeigen. Also tippe, Grid Auto Flow. Wie Sie wissen, haben wir zwei Arten von Flow eingerichtet: zeilenweise und spaltenweise. Ich werde Row is verwenden. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt. Aber wenn ich damit einen anderen Wert verwende, lass es mich dir zeigen. Ich werde einen neuen Wert verwenden, nämlich Dens. Wenn ich diese Datei einstelle, sehen Sie hier, wird unser achtes Rasterelement in das leere Feld eingefügt. Wenn wir diesen Wert verwenden, wird das Leerzeichen nicht aufgefüllt Ich hoffe, jetzt ist Ihnen klar, was Grid Tracking ist Bitte bleib dran für unser nächstes Tutorial. Danke, dass du dir dieses Video angesehen hast. 13. CSS-Raster – Auto-Füllung und Auto-Fit: Hallo, der Typ freut sich , dich wieder zu sehen. In diesem Artikel werden wir das automatische Feld und die automatische Anpassung der Eigenschaften erlernen Mithilfe dieser Eigenschaften können wir die Rasterbreite steuern. Lassen Sie uns mit der Praxis beginnen und sehen, wie es funktioniert. Hier können Sie nebeneinander sehen, wie ich meine ISOs für einen Code oder meinen Browser mit der Psaver-Erweiterung öffne und bereits ein Estel-Dokument erstellt habe Hier sehen Sie einen Container, und innerhalb des Containers befinden sich insgesamt vier Rasterelemente Wie Sie sehen können, hat unser Container 700 Pixel und wir verwenden die Grit-Eigenschaft Und jetzt werde ich sagen, dass diese Gegenstände in der Höhe sind. Im Moment möchte ich zwei Spalten mit einem F-Wert verwenden. Ich werde die Spalteneigenschaft Grit Template verwenden und ich werde den Wiederholungswert verwenden Wiederhole zwei mit einem F-Wert. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Außerdem werde ich unserer Reihe Höhe verleihen. Ich werde die Spaltenzeileneigenschaft der Rastervorlage verwenden. Ich werde wieder den Wiederholungswert verwenden. Zwei Zeilen mit einer Höhe von 150 Pixeln. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Angenommen, ich möchte keinen Bruchwert verwenden. Ich gebe 100 Pixel ein. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Jetzt ist unsere Spalte 100 Pixel groß. Damit möchte ich drei Spalten in unserem Zimmer anzeigen. Wenn ich diese Datei eingestellt habe, kannst du das Ergebnis sehen, und jetzt möchte ich unseren vierten Gig-Item an dieser Stelle anpassen . Dafür müssen wir zwei Werte verwenden Autofill und Autofill Lass es mich dir zeigen. An dieser Stelle werde ich Auto Fill eingeben. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Unser viertes Gig-Item wird automatisch auf das dritte Gig-Item umgestellt . Wenn ich den Wert auto ft verwende, zeige ich Ihnen, ob Sie diese Datei akzeptieren. Wie Sie sehen können, gibt es keine Änderungen, aber es gibt einen grundlegenden Unterschied. Wenn ich den Wert autofit verwende, wird dadurch eine zusätzliche Spur erstellt Lass es mich dir zeigen. Geben Sie also noch einmal Auto Fill ein. Wenn ich meine Entwickler-Toolbar einschalte und auf dieses Rastersymbol klicke. Hier können Sie sehen, dass Platz für drei Rasterelemente ist , weil unser Container v 700 Pixel groß ist und wir unser Rasterelement auf 100 Pixel setzen. Deshalb haben wir Platz für drei Rasterelemente. Wenn ich jedoch den Wert für die automatische Anpassung verwende, zeige ich es Ihnen und lege dann diese Datei und aktiviere dann meine Rasterlinien. Hier können Sie sehen, dass es keine zusätzlichen Spurlinien erzeugt. Es erstellt die Spur entsprechend den Rasterelementen. Angenommen, ich möchte unser viertes Spaltenende dieses Containers verschieben . Ich werde den Endwert der Rasterspalte verwenden. Greed, Spalte n, und ich setze die Position minus eins. Wenn ich diese Datei einstelle, können wir hier sehen, dass es keine Änderungen gibt. Weil die Eigenschaft Auto Feet keine zusätzliche Spur erzeugt. Aber wenn ich die Autofill-Eigenschaft verwende, lasse ich es dir zeigen und dann diese Datei einrichten Jetzt können Sie das Ergebnis sehen. Wenn ich auf den Rasterlinien renne, kannst du es jetzt deutlich sehen. Da die Eigenschaft zum automatischen Ausfüllen eine zusätzliche Spalte erzeugt , können wir unser Objekt der vierten Klasse an das Ende dieses Containers verschieben unser Objekt der vierten Klasse an das Ende dieses Containers Dies ist der Hauptunterschied zwischen dem automatischen Feld und dem automatischen Fußwert, und jetzt werde ich die Funktion Min Max für unsere Spalte verwenden. Ich werde diesen entfernen und diese Datei einrichten. Zuerst werde ich Autofüße binden und dann werde ich die Minmax-Funktion verwenden Ich möchte die Mindestbreite des Containers 150 Pixel und die maximale Breite auf einen E-Wert Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Aber was ist passiert? Wenn ich die Containerbreite reduziere , gebe ich 70% Containerbreite ein. Wenn ich diese Datei einstelle, können Sie hier sehen, dass unser Artikel für die vierte Klasse kleiner wird. Wenn ich Ihnen meinen Computerbereich zeige, können Sie hier sehen, unsere Containerbreite jetzt 546 Pixel beträgt und wir unsere minimale Artikelbreite auf 150 Pixel festgelegt haben Wenn wir 150 Pixel mit vier multiplizieren, ergibt das 600 Pixel Wie Sie bereits wissen, liegt unsere Containerbreite unter 600 Pixeln , weshalb unser Artikel der vierten Klasse kleiner Wenn ich die Breite des Containers erhöhe, zeige ich es Ihnen. Jetzt können Sie sehen, dass es unseren Gegenstand der vierten Klasse in unserer ersten Reihe platziert hat. Wenn ich Ihnen meine Containerbreite zeige, können Sie hier sehen, dass sie über 600 Pixel liegt. Deshalb passt es in diese Reihe. Und wenn ich Ihnen meine Rasterelementbreite zeige , können Sie hier sehen, unsere Rasterelementbreite 167 Pixel beträgt Wir können unsere Rasterelementbreite nicht unter 150 Pixel reduzieren . Wenn wir versuchen, die Breite unseres Rasterelements gewaltsam zu reduzieren, möchte ich Ihnen zeigen, wie Sie hier sehen können, dass dadurch unser Rasterelement in der zweiten Zeile verkleinert Wenn wir versuchen, weiter zu reduzieren, können Sie hier sehen, auch unser drittes Rasterelement in der zweiten Zeile verkleinert wird, weil wir die Breite des Rasterelements nicht unter die 150 Pixel reduzieren können Breite des Rasterelements nicht unter die Ohne Media Query zu verwenden, sondern nur den Wert für die automatische Anpassung verwenden, gestalten wir unseren Container perfekt responsiv In ähnlicher Weise können Sie hier alle Rasterelemente in einer einzigen Zeile sehen, wenn ich die Browserbreite erhöhe. Wenn Sie feststellen, dass Sie sehen können, wird dadurch auch die Breite des Elements erhöht. Jetzt beträgt die Artikelbreite 245 Pixel. Wenn Sie das gesamte Rasterelement in einer einzigen Zeile anzeigen möchten, sollten Sie eine Mindestcontainerbreite von 600 Pixeln haben. Wenn ich die Browserbreite zu stark verringere und die Containerbreite um einen Prozentsatz erhöhe , sind das etwa 85%, und ich werde auch die Mindestbreite erhöhen, also werde ich sie auf 300 Pixel erhöhen. Wenn ich diese Datei eingestellt habe, können Sie jetzt insgesamt vier Zeilen sehen. Jetzt sieht es so aus, als ob es total ansprechbar ist. Wie Sie sehen können, haben wir die Höhe für zwei Zeilen festgelegt , eine Höhe von 150 Pixeln. Ich hoffe, jetzt ist das Konzept für O klar, was ein automatischer Feldwert und ein automatischer Anpassungswert sind. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 14. CSS-Grid-Fit-Inhalts-Tutorial: Hallo Leute, wir sehen uns wieder. In diesem Tutorial lernen wir ein neues Sess-Raster kennen, das sich auf Eigenschaften bezieht : Fit Content Mal sehen, wie wir es praktisch nutzen können. Hier können Sie sehen, dass ich Seite an Seite meinen Isoto Codaor und meinen Browser mit der Lip Server-Erweiterung öffne und meinen Browser mit der Lip Server-Erweiterung bereits ein STML-Dokument mit dem Namen Index Dot STML erstelle bereits ein STML-Dokument mit dem Namen Index Dot STML erstelle. Hier können Sie sehen, dass wir im übergeordneten Container insgesamt sechs Rasterelemente haben. Im Grunde funktioniert die Eigenschaft fit content wie die Eigenschaft Max W. Lassen Sie uns diese Eigenschaft verwenden. Also werde ich den vorherigen entfernen. Ich nehme an, ich möchte zwei Spalten mit passendem Inhalt anzeigen. Also gebe ich fit content und in die Klammern und sage dann 200 Pixel maximale Breite für unsere erste Spalte In ähnlicher Weise verwende ich für unsere zweite Spalte die Eigenschaft fit content Für unsere zweite Spalte verwende ich maximal 400 Pixel. Wenn ich diese Datei speichere, können Sie hier das Ergebnis sehen. Hier siehst du für die erste Spalte, wir nehmen 200 Pixel Breite. Für die zweite Spalte nehmen wir eine Breite von 400 Pixeln. Wenn Sie jedoch feststellen, können Sie sehen unser Artikel E der Inhaltsgröße entspricht. Nehmen wir eine weitere Spalte mit einem F-Wert. Manche geben ein F ein. Wenn ich diese Datei einstelle, kannst du das Ergebnis sehen. Wenn wir den Wert „Inhalt anpassen“ festlegen, können wir unsere Spalte nicht um mehr als 200 Pixel erweitern . Ebenso können wir unsere zweite Spalte nicht um mehr als 400 Pixel erweitern . Fügen wir unserem ersten Artikel einige Inhalte hinzu. Im ersten Element werde ich ähm, 30 eingeben. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Wenn ich meine Rasterlinien einschalte und dir meine Verkaufsbreite zeige, kannst du hier sehen, wie sich unser erster Rasterartikel auf bis zu 200 Pixel erstreckt. Wenn wir die Eigenschaft „Inhalt anpassen“ verwenden, können wir das Bild nicht um mehr als 200 Pixel erweitern. Wenn ich unserem zweiten Rasterelement mehr Inhalt hinzufüge, zeige ich es Ihnen und stelle dann die Datei Hier können Sie das Ergebnis sehen. Wenn ich Ihnen meine Zellengröße zeige, können Sie hier sehen, dass sie sich auf bis zu 400 Pixel erstreckt, nicht mehr als 400 Pixel. Lassen Sie uns die maximale Breite dieser Körnungszelle mithilfe der Eigenschaft „Inhalt anpassen Für unsere dritte Spalte verwenden wir den Bruchwert Es kann seine Größe je nach Inhalt ändern. Grundsätzlich ist diese Technik für Bildergalerien sehr nützlich. Sie können auch feststellen, dass wir nicht den gesamten Inhalt dieses Artikels sehen können . Dafür können wir die Minmax-Funktion in unseren Rollen verwenden . Lass es mich dir zeigen Also, um diesen zu entfernen, und ich werde sagen, Min Max. Statt der Klammern können wir hier Mindesthöhe für unser Rasterelement festlegen Ich möchte eine Mindesthöhe von 200 Pixeln festlegen. Dann, wenn Sie die Rasterzellenhöhe entsprechend dem Inhalt erweitern möchten. Dafür können Sie die Hauptinhaltsfunktion verwenden. Lass mich dir I N Content zeigen. Wenn ich diese Datei eingestellt habe, kannst du hier das Ergebnis sehen . Jetzt sieht es perfekt aus. haben wir etwas über die Eigenschaften des Hauptinhalts gelernt In unseren vorherigen Tutorials haben wir etwas über die Eigenschaften des Hauptinhalts gelernt. Ich hoffe, Sie verstehen jetzt, was der Anwendungsfall von Fit Content Property ist. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 15. CSS-Rasterreihenfolgeeigenschaften-Tutorial: Hallo Leute, schön, dass ihr wieder da seid. In diesem Tutorial lernen wir eine neue Eigenschaft zur Positionierung von Griditems kennen, nämlich die Wassereigenschaft nämlich die Wassereigenschaft Mal sehen, wie wir diese Eigenschaft nutzen können. Wie Sie sehen können, öffne ich nebeneinander mein Video in Cortor und meinem Browser mit der Lp-Servererweiterung und erstelle bereits ein eSTIML-Dokument erstelle bereits ein eSTIML-Dokument dem Namen index dot Hier können Sie in meinem übergeordneten Container sehen, dass wir insgesamt sechs Rasterelemente haben Mithilfe der Wassereigenschaften können wir die Position der Rasterzellen ändern. Angenommen, Sie möchten die erste Rasterzelle an die sechste Position verschieben . Dafür können Sie Wasserflächen nutzen. In unseren vorherigen Materialien haben wir etwas über Positionierung gelernt Aber in diesem Artikel werden wir unsere Zellen anhand der Wassereigenschaften positionieren Angenommen, ich möchte das Objekt um eins in sechs Positionen verschieben. Dazu springe ich in das Objekt oder den Selektor und verwende die Eigenschaft Wasser Wasser. Hier werde ich einen Wert übergeben. Wenn ich diese Datei hier einstelle, können Sie sehen, dass sie unseren Inhalt automatisch in die Ust-Position verschiebt. Die Bewässerung beginnt aus entgegengesetzter Richtung. Deshalb ist es zu Staub geworden. Ähnlich ist es, wenn ich den Wert Null verwende und dann die Datei einstelle, Sie hier sehen können, dass es keine Veränderungen im Wasser gibt. Null ist der Standardwert dieser Eigenschaft. Aber wenn ich Wasser zwei gebe und dann die Datei setze, hier siehst du, sie ist auch an die erste Stelle gekommen , weil es kein Wasser gibt Angenommen, ich möchte jetzt unseren zweiten Gegenstand in das erste Wasser verschieben . Dafür springe ich in die Artikelauswahl und gebe Water Property ein. Wasser eins. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Also, das ist unser Wasser, eine Position. Nehmen wir an, ich möchte das vierte Objekt an die dritte Position verschieben . Lassen Sie uns in den vierten Selektor springen und ich gebe Water Three Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Das ist unsere Position Wasser eins, und das ist unsere Position Wasser zwei, und das ist unsere Position drei. Zuerst gießen wir unseren Gegenstand eins an zweiter Stelle. Kommen wir zur zweiten Position, und dann gießen wir unseren zweiten Gegenstand an der ersten Position. Kommen wir zur ersten Position. Dann gießen wir unseren vierten Gegenstand an dritter Stelle und Sie können das Ergebnis sehen. Es ist auf die dritte Position gekommen. Wie Sie sehen können, arbeiten wir nicht mit dem dritten Element, fünften Element und dem sechsten Element. Es wurde gemeldet. Nehmen wir nun an, Sie möchten das dritte Objekt hinter das vierte Objekt verschieben . Ich werde wieder Wassergrundstücke nutzen. Wasser, und ich werde vier Werte übergeben. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt können Sie sehen, dass unser dritter Artikel auf die sechste Position kam , weil wir vier Werte verwenden Unsere erste Wasserposition ist also diese, und dies ist unsere zweite Wasserposition, und dies ist unsere dritte Wasserposition, und dies ist unsere vierte Wasserposition. Jetzt ist es quadratisch für dich, so ist es Arbeit. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 16. Verschachtelte Raster: Hallo Leute, schön, dass ihr wieder da seid. In diesem Tutorial werden wir etwas über verschachtelte Körner lernen Versuchen wir zu verstehen, was ein verschachteltes Gitter ist. Hier sehen Sie einen Rastercontainer, und in diesem Rastercontainer haben wir insgesamt sechs Rasterzellen Jetzt beschließen Sie, weitere Rasterzellen in diese Rasterzelle einzufügen . Dann müssen Sie diese Rasterzelle in einen Rastercontainer umwandeln , und dann können Sie weitere Rasterzellen in diesem Container hinzufügen , ungefähr so. Wir nennen dieses ganze System verschachtelte Gitter. Mit Nested G Grid können wir eine übergeordnete Grid-Zelle in einen Grid-Container umwandeln eine übergeordnete Grid-Zelle in einen Grid-Container Lassen Sie uns mit dem Praktischen beginnen und sehen, wie wir es erstellen können. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Sto Codaor und meinen Browser mit der Lp-Servererweiterung und erstelle bereits ein eSTL-Dokument mit dem Namen Index Dot STML dem Namen Index Wie Sie in meinem übergeordneten Container sehen können, habe ich vier Rasterzellen, und jetzt möchte ich innerhalb der vierten Rasterzelle weitere Rasterzellen hinzufügen innerhalb der vierten Rasterzelle weitere Rasterzellen Dazu müssen wir die Display-Grid-Eigenschaft für Element vier verwenden . Im vierten Elementselektor werde ich die Display-Eigenschaft verwenden Raster anzeigen. Jetzt wird unsere Zelle in einen Grid-Container umgewandelt. Jetzt können wir weitere Rasterzellen in diesen Container einfügen . Lass es mich dir zeigen. Ich werde diesen Text entfernen und innerhalb dieses D werde ich vier weitere D D Punkt unter einem erstellen, und ich werde diese Zeile dreimal duplizieren. Außerdem werde ich ihren Klassennamen nummerieren. Unter zwei, unter drei und unter vier. Innerhalb dieser Rasterlinien werde ich A, B, C und Großbuchstaben D eingeben B, C und Großbuchstaben . Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen Wie Sie sehen können, erstellen wir vier Rasterzellen innerhalb des vierten Containers Jetzt werde ich es unseren Verkäufen zuordnen. Für diese verwende ich die Spalteneigenschaft der Rastervorlage. Greed-Vorlagenspalten, und ich möchte zwei Spalten mit einem F-Wert zuweisen, eine, wenn R, eine F. Wenn ich diese Datei festlege, können Sie das Ergebnis sehen Lassen Sie uns eine Hintergrundfarbe für diese Tiefe festlegen. Andernfalls wird es nicht sichtbar sein. Ich wähle Punkt vier aus, innerhalb von Punkt vier wähle ich alle Tiefen aus Dann im CSS-Hintergrund. Lesen. Wenn ich diese Datei speichere, können Sie das Ergebnis sehen. Wie Sie sehen können, gibt es keine Lücke zwischen diesen Zellen, daher verwende ich die Eigenschaft Grid Gap. Leselücke, zehn Pixel. Wenn ich diese Datei speichere, können Sie jetzt die Zellen deutlich sehen. Wie Sie in einem übergeordneten Rastercontainer sehen können, müssen wir vier Zellen teilen, und dann konvertieren wir unsere vierte Rasterzelle in einen Rastercontainer. In diesem Container haben wir auch vier Rasterzellen. Wir nennen diesen Prozess Nested Grid. dies in einem Rasterelement verwenden, können wir weitere Rasterelemente einfügen Sie können auch mehr Rasterelemente in dieses Unterraster einfügen . Angenommen, Sie möchten vier weitere Rasterelemente in diese Zelle A einfügen vier weitere Rasterelemente in diese Zelle A Dann müssen Sie erneut dieses ähnliche Verfahren anwenden. Zunächst müssen Sie das Eigenschaftenraster anzeigen für diesen Verkauf verwenden , und dann können Sie weitere Rasterelemente in dieser Zelle hinzufügen. Wenn ich Ihnen meine Entwickler-Werkzeugleiste zeige, können Sie hier innerhalb dieses Rasters sehen, dass wir eine andere Rasterstruktur haben, und Sie können die Rasterlinien dieser Rasterstruktur sehen. Wenn ich Ihnen meinen Layout-Bereich zeige, hier können Sie in Rasterüberlagerungen sehen, dass wir insgesamt zwei Rastersysteme haben Unser Haupt-Container-Rastersystem und als nächstes unser Overlay-Grid-Elementsystem Sie können Ihre Rasterlinien nach Ihrer Wahl ein- und ausschalten Ihre Rasterlinien nach Ihrer Wahl Danke, dass du dir dieses Video angesehen hast. Ich hoffe, jetzt ist Ihnen klar, was Nested Grid ist. Seien Sie gespannt auf unser nächstes Tutorial. 17. Tutorial Überlappende Rasterelemente: Schön, dass ihr wieder da seid, das ist unser letztes Tutorial zum Thema Sess-Grid In diesem Tutorial werden wir lernen, was überlappende Rasterelemente Gehen wir weiter und versuchen wir zu verstehen, was das ist? Hier sehen Sie einen Grid-Container. In diesem Rastercontainer befinden sich insgesamt drei Rasterelemente. Wie Sie sehen können, überlappen sich die Elemente gegenseitig, und wir haben es überlappende Rasterelemente genannt, und jetzt möchten Sie, dass eines zuerst grün ist , oder so ähnlich Schauen wir uns an, wie wir die überlappenden Rasterelemente erstellen können. Damit werden wir lernen, wie wir das Stapelwasser der Rasterelemente ändern können Stapelreihenfolge bedeutet einen Index. Lasst uns das Praktische studieren und versuchen zu verstehen, wie es funktioniert Hier können Sie nebeneinander sehen, ich meinen Result Studio Codeor und meinen Browser mit der Life Sero-Erweiterung öffne meinen Browser mit der Life Sero-Erweiterung und bereits ein eSML-Dokument mit dem Namen Index Dot EstEML erstelle dem Namen Index Wie Sie sehen können, erstelle ich bereits eine Rasterstruktur, und diese Rasterstruktur enthält drei Rasterelemente Wie Sie sehen können, ist unser Container 400 Pixel groß und unsere Spalte ist 200 Pixel groß, und auch unsere Zeile T ist 200 Pixel groß. Versuchen wir, die Rasterelemente zu überlappen. Zuerst möchte ich unser rotes Rasterelement überspannen. Ich möchte es auf bis zu zwei Spalten aufteilen. Dafür verwende ich die Eigenschaft Grid Column. Eins, aus Spalte eins, zwei, Spanne zwei. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wir decken unseren Artikel in zwei Spalten ab. Außerdem werde ich dieses Element zeilenweise mit zwei Spalten aufteilen. Lass es mich dir zeigen. Ich werde Klassenreiheneigenschaften verwenden, Klassenzeile. Ab Reihe eins, Spanne zwei, Reihe zwei. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt umfasst unser erstes Element bis zu zwei Spalten und zwei Räume, und unser zweites und drittes Element sind unsere impliziten Rasterelemente Jetzt werde ich all diesen Rasterelementen eine maximale Breite zuweisen all diesen Rasterelementen Wie Sie wissen, verwenden wir dieses Element plus all diese Rasterelemente. Ich werde die Eigenschaft Max Width verwenden. Also, um Mx mit 200 Pixeln einzugeben. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt werde ich unsere erste Zelle vertikal ausrichten. Etwas zum Tippen, Ausrichten siehe Stern. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wenn ich Ihnen meine Rasterlinien zeige, können Sie sehen, wie sie die gesamte Fläche einnehmen. Da wir Align Self Property verwenden , sieht es aus diesem Grund auch kleiner aus. Wenn ich diese Eigenschaft auskommentiere und diese Datei festlege, kannst du das Ergebnis sehen. Aber um überlappende Rasterelemente zu erstellen, wer es braucht. Ich werde den Kommentar rückgängig machen und diese Datei einrichten, und jetzt möchte ich unser zweites Objekt in die Mitte dieser Seite verschieben Objekt in die Mitte dieser Seite Dafür werde ich dieselben Eigenschaften für Punkt zwei verwenden. Wenn ich den Code einfüge und die Datei hier einstelle, können Sie sehen, dass sie sich mit unserem Element der ersten Klasse überschneidet. Aber ich möchte es einmischen. Ich werde Align self property, Align self center verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wir richten unseren Artikel in der Mitte dieses Containers vertikal aus. Jetzt werde ich dieses Rasterelement horizontal zentrieren. Dafür werde ich Self Property, Ify Self Center, verwenden und rechtfertigen Self Property, Ify Self Center, Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Für unseren Artikel der dritten Klasse werde ich SEM-Eigentum verwenden. Aber ich möchte unser Ende dieses Containers ausrichten. Ich werde Align Self End verwenden. Und begründen Sie auch self n. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Ich brauche diese orange Hintergrundfarbe nicht, also werde ich sie entfernen. Jetzt nehmen alle Begrüßungsgegenstände dieselbe Fläche ein. Wir richten die Elemente einfach aus, beginnen, zentrieren und enden Die Größe und Position der Spalten sind jedoch identisch. Jetzt füge ich allen Elementen etwas Text hinzu. In Punkt eins werde ich Lam 15 binden. Es wird ein Zeichen mit 15 Wörtern hinzufügen. Es kann unserem Artikel einen Absatz mit 15 Wörtern hinzufügen, und ich werde den Absatz kopieren und ihn in unseren zweiten Artikel einfügen. Auch in unserem dritten Artikel. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hey, wir müssen mehr Charakter hinzufügen, um diesen Gegenstand zu überladen. Ich werde dieses Zeichen noch einmal einfügen. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie sich gegenseitig überlappen. Jetzt werde ich Ihnen zeigen, wie wir das Stapelwasser dieses Artikels ändern können ? Um das Stapelwasser zu ändern, müssen wir unsere alte Eigenschaft verwenden, nämlich den Z-Index. Jetzt möchte ich den ersten Punkt in den Vordergrund rücken. Dafür verwende ich die Z-Index-Eigenschaft. Ich möchte den Z-Index eins verknüpfen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Sie können sehen, dass es an der Spitze stand, und jetzt möchte ich das orangefarbene Objekt an die Spitze bringen. Dafür müssen wir den zweiten Wert des Z-Indexes verwenden. Ich werde Z-Index zwei verknüpfen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt ist für Sie klar, wie wir die Überlappungsbereiche kontrollieren können . Lassen Sie uns nun sehen, ob ich die gesamte Ausrichtung dieses Containers entferne . Und dann stelle die Datei ein, du kannst das Ergebnis sehen. Jetzt sind alle Rasterelemente immer noch an derselben Stelle vorhanden. Und jetzt möchte ich unser grünes Rasterelement für diese anzeigen Wir müssen erneut den Z-Indexwert verwenden. Z-Index drei. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Ich hoffe, jetzt bestehen klare Zweifel an Überschneidungen. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unsere nächste Aufgabe. 18. Was ist Flexbox: Hallo Leute, schön, dass ihr wieder da seid. Dies ist das Einführungsvideo von CSX Flexbox. Versuchen wir zu verstehen, was Flexbox ist. Im Grunde ist Flexbox ein neues Modul in CSS Three. Es macht die Ausrichtung in verschiedenen Richtungen und in verschiedenen Gewässern sehr viel einfacher in verschiedenen Richtungen und in verschiedenen Gewässern Es gibt Containern die Möglichkeit, Elemente zu erweitern und zu verkleinern, um den gesamten verfügbaren Platz optimal zu nutzen Dies ist der beste Weg, um den gesamten verfügbaren Speicherplatz zu nutzen. Unser nächster Punkt ist, dass das CSS-Flexbox-Layout das Float-Layout ersetzt Ähnlich wie das Grid-Layout kann es auch das Float-Layout ersetzen Das hat uns die Arbeit sehr erleichtert. Mit Textbox können Sie sehr einfach ein eindimensionales Layout erstellen sehr einfach ein eindimensionales Layout CSS Grad ist nicht eindimensional, sondern zweidimensional, aber Css Flexbox ist eindimensional Sie können Zeilenhöhe und Spaltenbreite nicht zusammen behandeln. Sie können jeweils nur eine Dimension bearbeiten. Zeile, andernfalls Spalte. Angenommen, das ist unser Hauptcontainer. In diesem übergeordneten Container haben wir vier Untertiefen. Wir nennen den Container Flex-Container, und wenn Sie ihn Flexbox erstellen möchten, müssen Sie die Display-Eigenschaft verwenden Flex anzeigen. In unserem übergeordneten Container müssen wir diese Eigenschaft verwenden und sie dann in einen Flex-Container umwandeln. Alle Elemente im Flex-Container, jetzt sind sie Flex-Elemente. Wie ich Ihnen bereits sagte, funktionieren Flexbox eindimensional. Zeilen ansonsten spaltenweise. Wenn wir von Zeilen sprechen, bedeutet das horizontaler Weg. Dafür nennen wir die Achse Hauptachse. Andernfalls können Sie es Zeile nennen. Wenn ich von vertikaler Dimension spreche, dann nennen wir das Querachse. Andernfalls können Sie es Spalten nennen. Sehen wir uns eine kleine Demonstration an, wie wir eine Flexbox verwenden können. Hier können Sie sehen, dass ich Seite an Seite meine ISO, also Coreor und meinen Browser mit der Live Server-Erweiterung öffne , und ich erstelle bereits ein eSTIML-Dokument dem Namen index dot estel. Wie Sie sehen können, gibt es eine übergeordnete Tiefe, die Klassen als gibt es eine übergeordnete Tiefe, In diesem übergeordneten Container befinden sich insgesamt vier Elemente Wie Sie sehen können, verwenden wir für all das verschiedene Klassen. Punkt eins, Punkt zwei, Punkt drei und Punkt vier. Ich habe bereits eine Hintergrundfarbe für alle Subdeps festgelegt. Wie Sie sehen können, ist unser übergeordneter Container 600. Außerdem habe ich eine Hintergrundfarbe, einen Rand und einen Rahmen für diesen übergeordneten Container festgelegt . Wenn ich es nun zu einem flexiblen Container für diese machen möchte, müssen wir die Display-Eigenschaft verwenden. Display, und ich werde den Flex-Wert verwenden. Wie Sie sehen können, haben wir insgesamt vier Zeilen in unserem übergeordneten Container. Wenn ich diese Datei einstelle, werden, wie Sie sehen, automatisch alle Elemente in einer Zeile gespeichert. Jetzt ist es ein bisschen klar für dich. Wenn wir unseren übergeordneten Container in eine Flexbox umwandeln, wird der Artikel in unserem Container in einer Zeile angezeigt. In unserem kommenden Tutorial werden wir einige neue Eigenschaften kennenlernen. Sehen wir uns die Eigenschaften an. Insgesamt 12 Eigenschaften, die Sie mit Flexbox verwenden können. Flex Direction, Flex Wrap, Flex Flow, Flex Grow, Flex Shrink, Flex Basics, Flex, Justify Content, Alignment, Align Self, Atlast Water Für die Ausrichtung verwenden wir diese Eigenschaft, und wir erfahren bereits in unserem Grid-Kapitel mehr darüber In unserem kommenden Video werde ich alle Eigenschaften behandeln. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 19. CSS Flexbox Flex-Richtung: Schön, dass ihr wieder da seid, Leute. In dieser Studie werden wir lernen, was Flex-Direction-Eigenschaft ist. Sehen wir uns die Werte dieser Eigenschaft an. Wie Sie sehen können, haben wir vier Trotal-Werte , die sich auf die CSS-Flexrichtung, die Zeilenumkehrung, die Spaltenumkehrung und die Spaltenumkehrung beziehen Zeilenumkehrung, die Spaltenumkehrung und die Spaltenumkehrung Und row ist unser Dif-Wert in dieser Eigenschaft. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie es funktioniert. Hier können Sie nebeneinander sehen, ich mein Visuo so Corator und meinen Browser mit der Life Server-Erweiterung öffne und meinen Browser mit der Life Server-Erweiterung bereits ein Estim-Dokument mit dem Namen Index Dot eSML erstelle dem Namen Wie Sie in meinem Dokument sehen können, gibt es einen Container. In diesem Container befinden sich insgesamt vier Flex-Artikel. Wie Sie sehen können, haben wir unsere Container-Flexbox bereits umgebaut. Sie wissen bereits, dass, wenn wir die Flex-Eigenschaft verwenden, unsere Artikel in einer einzigen Zeile zusammengefasst werden. In diesem Tutorial werden wir über die Flex-Richtungseigenschaft sprechen . Diese Eigenschaft bezieht sich auf den Container, nicht auf die Elemente. Ich werde sie verwenden, um Eigenschaften anzuzeigen, und ich werde Flex Direction eingeben. Unser erster Wert ist Zeile. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt. Wie ich dir gesagt habe, ist Zeile der Standardwert. Wenn Sie ihn verwenden, hat dies keine Auswirkungen auf Ihre Struktur. Standardmäßig folgt die Reihe der Runde in die richtige Richtung. Aber wenn ich den umgekehrten Zeilenwert verwende, zeige ich es Ihnen und stelle dann die Datei Jetzt können Sie das Ergebnis sehen. Hier können Sie sehen, dass die Reihenfolge unseres Artikels umgekehrt ist. Jetzt ist die Richtung nach rechts. Dies ist der Anwendungsfall für den umgekehrten Zeilenwert, und unser nächster Wert ist Spalte. Lass es mich dir zeigen. Ich gebe Spalte ein. Dieser Wert funktioniert vertikal. Wenn ich diese Datei speichere, können Sie das Ergebnis sehen. Im Grunde folgt es dem Wasser von oben nach unten. Wie Sie sehen können, erste, zweite, dritte vier. Wenn Sie es von unten nach oben anordnen möchten, müssen Sie einen anderen Wert verwenden, nämlich die umgekehrte Spalte. Wenn ich diese Datei speichere, können Sie das Ergebnis sehen. Hier können Sie sehen, dass unser erster Artikel ganz unten gelandet ist, dann der zweite und dann der dritte, und unser letzter Artikel hat die oberste Position erreicht. Es geht im Grunde darum, die Richtung von unten nach oben zu ändern. Wenn ich nur den Spaltenwert verwende, ist die Richtung von oben nach unten. Dies ist die Eigenschaft „ Flex-Richtung“. Wie ich dir bereits gesagt habe, ist es eindimensionales Arbeiten. Manchmal wird zeilenweise gearbeitet, andernfalls spaltenweise, und Sie können Zeile und Spalte nicht zusammen bearbeiten. Ich hoffe, jetzt ist Ihnen die Eigenschaft Flex-Richtung klar. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 20. CSS Flex Wrap und Flex Flow-Tutorial: Schön, dass ihr wieder da seid, Leute. Ich bin zurück mit einer Flexbox zum Thema Tutorial In diesem Tutorial werden wir lernen, was Flex AP und Flex Flow Diese beiden neuen Eigenschaften sind in unserer Flexbox sehr wichtig Lassen Sie uns ohne weitere Diskussion mit der Praxis beginnen. Wie Sie sehen können, öffne ich Seite an Seite meinen Viso Studio Correor und meinen Browser mit der Live Server-Erweiterung und erstelle bereits ein EstEML-Dokument mit dem Namen Index dot esTeml und meinen Browser mit der Live Server-Erweiterung und erstelle bereits ein EstEML-Dokument mit dem Namen Index dot esTeml. Harry, du kannst in unserem Container sehen, wir haben insgesamt vier Flex-Artikel und unser Container ist größer als Flex-Artikel und unser Container Wenn ich das Flex-Objekt in diesem Feld erhöhe, andernfalls, wenn ich die Breite des Containers verringere , werden Artikel in diesen Container überflogen Lass es mich dir zeigen. Ich habe bereits sechs weitere Flex-Elemente erstellt, und ich werde diese Deep-Tags auskommentieren , ich werde diese Datei sagen Jetzt können Sie sehen, dass wir insgesamt zehn Flex-Artikel in unserem Container haben zehn Flex-Artikel in unserem Container Jetzt werde ich die Breite des Containers reduzieren. Verwendung der Breiteneigenschaft. Also werde ich w 400 Pixel eingeben. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Hier können Sie sehen, dass Flex-Artikel diesen Container überflogen wurden In ähnlicher Weise können Sie dieses Ergebnis sehen, wenn ich die Höheneigenschaft verwende und die Höhe um 200 Pixel erhöhe und diese Datei festlege Aber wenn ich die Flex-Richtung ändere, lass mich dir die Flex-Richtung zeigen. Spalte und dann die Datei festlegen. Jetzt können Sie erneut sehen, Flex-Elemente in diesen Container überflogen wurden Um dieses Problem zu lösen, haben wir eine weitere flexible Eigenschaft, nämlich nämlich Im Grunde hat Flex AP drei Werte. Nein ap Rap und p reverse. Kein EP ist unser Standardwert. Ob Sie ihn verwenden oder nicht, es wird zu einem Überfluss an Daten führen. Mal sehen, wie es funktioniert. Dafür verwende ich die Flex-Richtungszeile und lege außerdem die Breite dieses Containers fest , W 400 Pixel. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Und jetzt werde ich die Flex-Rap-Eigenschaft verwenden. Flex Rap. verwende ich keinen Wert. Wenn ich diese Datei festlege, können Sie hier sehen, dass es keine Änderungen gibt , da dies der Standardwert dieser Eigenschaft ist. Es wird sich also nicht auf die Flex-Elemente auswirken. Wenn Sie es umschließen möchten, müssen Sie den Wert p verwenden. Lass es mich dir zeigen. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Jetzt können Sie unseren Container mit 400 Pixeln aus Stahl sehen, aber er hüllt unseren Flex-Artikel perfekt in diesen Behälter ein. Wie Sie sehen können, kommt es automatisch zur nächsten Zeile. Lassen Sie uns einen gewissen Spielraum zwischen diesem Flex-Artikel haben. Ich gebe Margin Five Pixel ein. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt ist es für Sie klar, wenn Daten aus der ersten Zeile überlaufen, dann kommen sie automatisch in die nächste Zeile Dann kommen Bedürfnisse automatisch in die nächste Zeile. Aber wenn ich die Flex-Richtung, die Spalte ändere und auch die Höheneigenschaft verwenden möchte. Höhe, 200 Pixel. Ich werde die Eigenschaft Breite auskommentieren. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Und Sie können sehen, dass sie in senkrechtem Wasser steht, an erster, zweiter, dritter, vierter, fünfter, sechster, siebener, achter, 19. Stelle. Ich hoffe, jetzt ist dir klar wie Gegenstände in senkrechtem Wasser platziert werden. Jetzt verwende ich den nächsten Wert dieser Eigenschaft, nämlich ap reverse. Ich werde ap reverse binden. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie nur die Wader-Elemente umkehrt, und jetzt fängt es von der rechten Seite an und endet es auf der P-Seite Wenn ich die Flex-Richtung ändere, zeilenweise, und st, welcher von diesem Container, und gebe die Höhe aus und lege diese Datei fest Wie Sie sehen können, beginnen unsere Artikel in der zweiten Zeile dieses Containers Erster, zweiter, dritter, vierter, fünfter, sechs, sieben, acht, 910. Im Grunde verwenden wir die Rap-Eigenschaft, um Overflow-Theta zu kontrollieren. Ich hoffe, du hast verstanden, worum es geht. Unsere nächste Immobilie ist Flex Flow. Was ist Flex Flow? Es ist eine verkürzte Eigenschaft von Flex Rap und Flex Direction. Mit einer Eigenschaft können Sie beide Eigenschaften steuern, und wir können sie in einer Zeile verwenden. Ich werde die Flex-Flow-Eigenschaft verwenden. Flachs fließt. Hier müssen wir zuerst den Wert für die Flex-Richtung und dann den Flex-P-Wert angeben Zuerst ist unser Flex-Richtungswert Spalte und unser Flex-P-Wert ist Ra. Und ich werde diese beiden Eigenschaften auskommentieren, und ich muss auch mit Eigenschaft auskommentieren , weil wir den Spaltenwert verwenden. Ich werde die Höheneigenschaft auskommentieren. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie perfekt funktioniert. Wenn ich hier keinen Wert verwende und diese Datei einstelle. Jetzt können Sie sehen, dass unsere Flex-Artikel diesen Container überflogen sind Im Grunde ist Flex Flow ein Liner mit den beiden Eigenschaften Flex Direction und Flex AP Ich hoffe, jetzt sind die Konzepte für Sie klar. Was sind Flex ap und Flex Flow. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 21. CSS Flexbox Justify Content-Tutorial: Hallo, ich bin wieder mit einer neuen Flexbox zum Thema Tutorial zurück , und in diesen beiden werden wir lernen, die Eigenschaft des Centers zu rechtfertigen Lass uns zurück zum Conguo-Laden gehen. Im Grunde verwenden wir die Eigenschaft justify content für die horizontale Ausrichtung Diese Eigenschaft hat insgesamt sechs Werte. Lass es mich dir zeigen. Unser erster Wert ist Flex Start. Es ist auch ein Standardwert. Dann kommt Flex N, Mittelpunkt, Abstand, Abstand zwischen, Abstand gleichmäßig. Es ist unserer Grid-Eigenschaft justify content sehr ähnlich , und wir haben bereits in unserem Grid-Abschnitt davon erfahren. Lassen Sie uns mit der Praxis beginnen und sehen, wie es funktioniert. Wie Sie sehen können, öffne ich Seite an Seite meine So-Studio-Farbe und meinen Browser mit der Lp-Servererweiterung Im übergeordneten Container haben wir vier Flex-Elemente, und jetzt werde ich es anhand der Eigenschaft „Justified Content“ ausrichten es anhand Soundtyp, Inhalt rechtfertigen Zunächst verwende ich den Wert Center Value Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wie Sie sehen können, verschiebt es das gesamte Flex-Objekt in die Mitte dieses Containers. Als Nächstes verwende ich den Flex-Endwert. Flexibles Ende. Wenn ich diese Datei einstelle, wird, wie Sie sehen können, das gesamte Flex-Element in der rechten Ecke dieses Containers entfernt, und Flextir ist ein Standardwert dieser Eigenschaft Wenn ich diese Eigenschaft verwende, zeige ich Ihnen diese Datei und Wie Sie sehen können, handelt es sich um einen Standardwert. Wenn ich einen Flex-Wert verwende oder nicht, wird dieses Ergebnis zurückgegeben. Unser nächster Wert ist das Leerzeichen dazwischen. Also Krawatte, Raum dazwischen. Wenn ich diese Datei einstelle, verschiebt sie, wie Sie sehen können , unser erstes und letztes Element von einem Ende zum anderen in diesem Container. Wenn ich den Rand entferne, ist es jetzt für Sie klarer. Außerdem werde ich die Polsterung entfernen. Jetzt können Sie das Ergebnis sehen und es wird der gesamte Abstand zwischen diesen Elementen hinzugefügt Dieser Raum wurde gleichmäßig auf feste Elemente aufgeteilt. Oder der nächste Wert ist Space Around. Lass es mich dir zeigen. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie an erster und letzter Stelle für dieses Element den gleichen Platz bietet. Und zwischen diesen Elementen bietet sie doppelten Abstand. Wie Sie sehen können, bietet es vor dem ersten Element und nach dem ersten Element den gleichen Abstand . In ähnlicher Weise wird vor dem zweiten Element und nach dem zweiten Element der gleiche Abstand bereitgestellt . Das ist der Grund, warum die Lücke zwischen den Elementen diese erste Lücke bildet, und unsere letzte fünf ist gleichmäßiger Abstand. Wenn ich das verwende, lege ich diese Datei fest, wie Sie sehen können, bietet sie eine ähnliche Lücke zwischen Flex-Elementen. Ich hoffe, Ihnen ist jetzt klar, wie wir unsere Flex-Elemente horizontal ausrichten können. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 22. CSS Flexbox Elemente ausrichten: Lo Augen, schön dich wieder zu sehen. Ich bin wieder einmal mit einem neuen Tutorial gekommen , das sich auf CSS Flexbox bezieht In diesem Tutorial lernen wir die Elementeigenschaft Align lernen Wir verwenden die Elementeigenschaft Align für die vertikale Ausrichtung. Wir haben insgesamt fünf wertbezogene Eigenschaften, die sich auf das Ausrichten von Elementen beziehen. Flextrt, Flex End, Center, Stress und Baseline. Wenn wir den Flextat-Wert verwenden, wird mein Flex-Objekt oben auf diesem Container platziert mein Flex-Objekt oben Wenn wir den Wert flex n verwenden, wird mein Flex-Objekt am Ende dieses Containers platziert Wenn Sie es vertikal mittig ausrichten möchten, können Sie in diesem Fall den Wert center verwenden, und Stretch ist unser Standardwert. Der Basiswert ist jedoch ein anderer. Fangen wir mit dem praktischen C an, wie es aussieht. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio Cortor und meinen Browser mit der IPSE-Erweiterung Wie Sie sehen können, haben Sie bereits einen Kontinent geschaffen und innerhalb dieses Kontinents haben wir vier flexible Elemente im Portal Wie Sie sehen können, verwenden wir die Display-Flex-Eigenschaft. Mit dieser Eigenschaft können wir unseren Container in einen Flex-Container umwandeln . Ich werde diese Eigenschaft verwenden, nämlich align item, Align items. Unser erster Wert ist Stretch. Wenn ich diese Datei einstelle, wie Sie hier sehen können, gibt es keine Änderungen, da es sich um einen Standardwert handelt. Wir arbeiten mit vertikaler Ausrichtung, daher müssen wir die Höhe des Containers auf 500 Pixel erhöhen . Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Standardmäßig verwendet Align Item den Streckwert. Jetzt verwende ich den ersten Wert, nämlich Flex Start. Wenn ich diese Datei einstelle, wie Sie sehen können, die vertikale Ausrichtung dieses Elements jetzt befindet sich die vertikale Ausrichtung dieses Elements jetzt oben im Container. Ähnlich verhält es sich, wenn ich den Flex-Endwert verwende und diese Datei festlege, wie Sie sehen können, alle Elemente am unteren Rand dieses Containers ausgerichtet. Wenn Sie dieses Element in der Mitte dieses Containers ausrichten möchten , können Sie den Mittelwert verwenden. Richten Sie das Objekt in der Mitte aus, Sie können das Ergebnis sehen. Es richtet die gesamte Flexmitte dieses Containers aus. Fügen wir unserem dritten Artikel etwas mehr Höhe hinzu. Ich werde die Höheneigenschaft in unserem dritten Artikel verwenden. Höhe, 50 Pixel. Wenn ich diese Datei einstelle, wie Sie sehen können, beträgt die Höhe unseres dritten Elements jetzt 50 Pixel, und jetzt werde ich über das Basiskonzept sprechen. Wenn ich den Flex-Endwert, das Flex-Ende, verwende und diese Datei festlege, dann sehen Sie, wie Sie sehen können, dass die Elemente am Basiswert enden. Aber wenn ich den Startwert verwende und diese Datei festlege, endet die Basislinie jetzt ganz oben. Jetzt werde ich über unseren letzten Wert sprechen , den Basiswert. Aber zuerst werde ich die Schriftgröße des dritten Elements erhöhen . Schriftgröße. Ich möchte die Schriftgrößeneigenschaft verwenden. Schriftgröße, 34 Pixel. Jetzt werde ich auch die Schriftgröße des zweiten Elements reduzieren. Ich werde wieder den Wert für die Schriftgröße verwenden und dafür zehn Fixel verwenden Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt können Sie sehen, dass die Ausrichtung der Textgrundlinie anders ist. Jetzt möchte ich diesen Text an derselben Grundlinie ausrichten. Dafür müssen wir die Basiseigenschaft verwenden. Lass es mich dir zeigen. Elemente ausrichten, ich verwende den Basiswert. Basislinie. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt hat der gesamte Text dieselbe Grundlinie. Wenn Sie die horizontale Ausrichtung verwenden möchten , können Sie das verwenden. Sie müssen nur die Eigenschaft justify content verwenden. Lass es uns benutzen. Begründen Sie das Inhaltszentrum. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Sie können auch die Flex-Richtung ändern. Wie Sie wissen, ist unsere Flex-Richtung standardmäßig falsch. Lassen Sie uns die Flex-Richtung ändern. Flex-Richtung. Ich werde den Spaltenwert verwenden. Wenn ich diese Datei einstelle, wie Sie sehen können, funktioniert unsere lenitd-Eigenschaft jetzt horizontal und nicht Wenn ich die Flex N-Eigenschaft verwende und diese Datei festlege, ist sie, wie Sie sehen, horizontal ausgerichtet Weil wir die X-Achsenrichtung und die Y-Achsenrichtung mithilfe der Flex-Richtungseigenschaft ändern . Folgen wir nun der gegenüberliegenden Querachse. Das ist es für dieses Tutorial. Ich hoffe, jetzt ist Ihnen das Konzept klar, was Align-Item-Eigenschaft ist. Vielen Dank, dass Sie sich dieses Video angesehen haben, freuen Sie sich auf unser nächstes Tutorial. 23. CSS Flexbox Inhalte ausrichten: Hallo, Augen auf CO zurück. In dieser Studie werden wir uns Inhaltseigenschaft Css Align vertraut In unserem vorherigen Tutorial haben wir uns mit der Elementeigenschaft Aline befasst Diese Eigenschaft wird auch für die vertikale Ausrichtung verwendet. Wie Sie sehen können, haben wir eine Menge verschiedener wertbezogener Alan-Inhaltseigenschaften. Flexstart, Flex N, Mittelpunkt, Dehnung, Grundlinie, Abstand rundum, Abstand dazwischen und Abstand gleichmäßig. In unserem vorherigen Tutorial haben wir uns mit dem Ausrichten von Elementen befasst. Beide Eigenschaften werden für denselben Zweck verwendet, aber es gibt einen Unterschied zwischen diesen Eigenschaften. Element ausrichten, das für die Ausrichtung einzelner Zeilen verwendet wird, aber den Inhalt ausrichten, der für die Ausrichtung mehrerer Zeilen verwendet wird. Angenommen, Ihr Inhalt wird nicht in einer einzigen Rolle behandelt. Ich habe eingepackt und komme zur nächsten Rolle. Dann müssen wir Allied Content Property verwenden. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie es funktioniert. Wie Sie sehen können, öffne ich Seite an Seite meine Visa für den Coretor und meinen Browser mit der Light-Server-Erweiterung Wie Sie sehen können, habe ich bereits ein eSTEML-Dokument mit dem Namen Index Dot eTML erstellt eSTEML-Dokument mit dem Namen Index Dot eTML Hier können Sie in meinem übergeordneten Container sehen, dass wir insgesamt zehn Flex-Elemente haben Zuerst werde ich diesem Container etwas zuweisen. Nach der Höhe gebe ich V ein , das 450 Pixeln entspricht. Wie Sie sehen können, sind unsere Daten in diesen Container überflogen. In diesem Fall müssen wir die Flex-Wrap-Eigenschaft verwenden, also jemanden, der Flex Rap eingibt Und ich werde den Rap-Wert verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. In unseren vorherigen Materialien haben wir uns mit den Eigenschaften von Flex-Raps befasst. Jetzt können Sie sehen, dass die Artikel überflutet sind und wie Sie sehen können, sind unsere Artikel Lassen Sie uns unsere Eigenschaft align content verwenden. Geben Sie irgendwie Align contain ein. Unser erster Wert ist Stretch. Wenn ich diese Datei einstelle, gibt es, wie Sie sehen können , keine Änderungen, da Stretch unser Standardwert ist. Aber wenn ich den Flexed-Wert verwende und diese Datei festlege. Jetzt können Sie sehen, dass es sich vertikal nach oben bewegt. Ähnlich, wenn ich Flex und Value verwende und diese Datei einstelle. Jetzt werden Elemente vertikal bewegt. Ähnlich ist es, wenn ich den Mittelwert verwende, dann stelle ich die Datei ein. Jetzt befinden sich alle Elemente in der Mitte dieses Containers. Unsere nächste Immobilie ist Space Between. Binden Sie also den Raum dazwischen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Dieser Wert wird den gesamten Raum zwischen zwei Zeilen ausfüllen. Wenn ich Leerzeichen um den Wert herum verwende, zeige ich es dir und lege dann diese Datei fest. Hier können Sie sehen, welcher Platz auch immer wir oben in der Zeile haben, er wird sich zwischen dieser Zeile verdoppeln und dann gleich viel Platz unten in der letzten Zeile stehen. Dann kommt unser nächster Wert , der Abstand gleichmäßig, irgendein Typ, Gleichmäßiger Abstand ist . Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie den gleichen Abstand zwischen den Zeilen hinzufügt. Diese Eigenschaft funktioniert nur , wenn wir mehrere Zeilen haben. Wenn ich ein Flex-Objekt aus diesem Container entferne, zeige ich es dir und lege dann diese Datei fest. Hier können Sie sehen, dass alle Elemente eher vertikal zentriert sind. Jetzt wird diese Eigenschaft nicht richtig funktionieren. Wenn ich einen anderen Wert verwende, etwas Leerzeichen dazwischen, und dann diese Datei einstelle, Sie hier sehen können, funktioniert das nicht. Diese Eigenschaft funktioniert genau , wenn wir mehrere Zeilen haben. Andernfalls wird es nicht funktionieren. Wenn wir eine einzelne Zeile haben, müssen wir in diesem Fall die Allen-Artikeleigenschaft verwenden. Ich hoffe, jetzt ist Ihnen klar was Alan Gon Den Eigentum ist. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 24. CSS Flexbox Self ausrichten: Hallo Leute, Tsu Back. In diesem Tutorial lernen wir CSS Ex Box, Align Sale Property, Diese Eigenschaft wird auch für die vertikale Ausrichtung verwendet, ähnlich der Eigenschaft Align Item. Wie Sie sehen können, haben wir für diese Eigenschaft einige ähnliche Werte. Wir haben nur einen neuen Wert für diese Eigenschaft, nämlich auto. Dann kommen Flex Start, Flex End, Center, Stretch und Baseline. Nun stellt sich die Frage, was ist der Unterschied zwischen Align Item Property und Allen Sale Property? Das Eigentum von Allie wird hauptsächlich für einzelne Artikel verwendet. Angenommen, Sie möchten einzelne Flex-Artikel vertikal ausrichten. In diesem Fall müssen Sie diese Eigenschaft verwenden. Wie Sie auf diesem Bild sehen können, verbleibt ein Flex-Objekt, also alle Flexelemente, die an den oberen Rand des Containers gelangt an den oberen Rand des Containers Denn für diese spezielle Zelle verwenden wir die Eigenschaft Align Cell Aus diesem Grund waren wir in der Lage, zu differenzieren. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie es funktioniert hat. Hier können Sie sehen, dass ich Seite an Seite meinen Visto Correor und meinen Browser mit der LPServer-Erweiterung öffne meinen Browser mit Ich werde meine vorherige Esemal-Datei für dieses Beispiel verwenden Esemal-Datei Wie Sie in unserem Flex-Container sehen können, haben wir insgesamt fünf Flex-Artikel Wie Sie sehen können, sind Artikel standardmäßig gestreckt. Zuerst möchte ich alle Elemente am oberen Rand des Containers ausrichten . Ich werde die Eigenschaft Align Item verwenden. Artikel flexibel am Anfang ausrichten. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt verwende ich die Eigenschaft „Zelle ausrichten“, da ich jetzt eine einzelne Zelle ausrichten möchte. Angenommen, ich möchte das Ende der Zelle Nummer drei dieses Containers verschieben . Dann müssen wir in den Selektor für das dritte Element springen und diese Eigenschaft Zelle ausrichten verwenden Und ich werde Flex End Value, Flex End verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wir haben erfolgreich ein einzelnes Zellenende dieses Containers verschoben . Denken Sie daran, dass diese Eigenschaft für die vertikale Ausrichtung verwendet wird. Lassen Sie uns die Mitte der zweiten Zelle dieses Containers verschieben. Dafür springe ich erneut in den Selektor Nummer zwei und gebe Ansell property Und siehe Zentrum. Wenn ich diese Datei speichere, können Sie das Ergebnis sehen. Lassen Sie uns über unsere neue Immobilie sprechen, die Auto ist. Wenn ich in unserem zweiten Element den automatischen Wert verwende und dann diese Datei hier speichere, können Sie sehen, dass sie wieder in der Gruppe ist. Dieser Wert bezieht sich nun auf den Ausrichtungswert des übergeordneten Containers. Lassen Sie uns die Ausrichtung des übergeordneten Containers ändern. Richten Sie die Artikel mittig aus. Wenn ich diese Datei einstelle, folgt unser automatischer Wert, wie Sie sehen können , automatisch dieser Ausrichtung. Wenn wir Align Self Auto verwenden, dann ist das relativ einfach mit dem Wert für ausgerichtete Objekte. Der IOU-Mittelwert verhält sich ebenfalls wie der A-Mittelwert. IO Ue Flex und Value, also verhalten sich auch wie A Flex und Value Sie müssen sich daran erinnern, dass Allan Sal Property nur mit Flexbox-Verkäufen funktioniert, nicht mit dem Flexbox-Container Ich hoffe, jetzt ist für Sie klar, was Eigentum von Allenal ist und was der Nachteil dieser Immobilie ist? Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial 25. CSS Flexbox Bestell-Tutorial: Hallo, Leute. Schön , dich wieder zu sehen. In diesem Tutorial werden wir etwas über Wassereigenschaften lernen. Diese Eigenschaft funktioniert genauso wie im Grid. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie es funktioniert. Und Sie können sehen, dass ich Seite an Seite meinen Viso StoCor und meinen Browser mit der L Lifesaver-Erweiterung öffne meinen Browser mit der L Ich habe bereits ein eSTIML-Dokument mit dem Namen Index do ATML erstellt. Wie Sie sehen können, haben wir anstelle des Flex-Containers insgesamt sechs Flex-Elemente Wenn Sie sich daran erinnern, Wassereigenschaften verwendet zu haben, können wir die Position der Zellen ändern. Angenommen, Sie möchten die vierte Zelle an die zweite Position verschieben . In diesem Fall müssen wir Wassergrundstücke nutzen. Also springe ich in die Artikelauswahl für Punkt fünf und gebe Wasser ein Zuerst übergebe ich den Wert Null. Das ist der Standardwert. Wenn ich diese Datei auf H setze, können Sie sehen, dass sich ihr Wasser nicht verändert hat. Aber wenn ich minus eins übergebe, lass es mich dir zeigen und diese Datei einstellen. Jetzt kannst du sehen, jetzt kannst du sehen, wie unser fünfter Gegenstand in diesem Wasser den ersten Platz belegt. Standardmäßig ist der Wassereigenschaftswert aller Zellen Null. Wasser beginnt bei einem Minuswert. Für Punkt fünf verwenden wir einen Minuswert. Deshalb stand es an erster Stelle. Das ist minus eins. Außerdem werde ich minus eins an fünfter Stelle eingeben . Minus eins. Ebenso möchte ich bei unserem dritten Artikel minus zwei Wasser minus zwei weitergeben. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie in unserem Wasser an erster Stelle steht. B minus zwei ist kleiner als Null und minus eins. Deshalb stand es an erster Stelle. Wie ich dir bereits sagte, stand der Wert der Lust an erster Stelle. Ich möchte minus zwei auf dem dritten Platz minus zwei unentschieden haben. Erst minus zwei, dann kommt minus eins, dann Null, Null, Null und Null. Aber wenn ich einen Wert in der Nummer eins übergebe, zeige ich Ihnen Wasser eins und lege dann diese Datei fest. Sie können sehen, dass es auf die rechte Seite gelangt ist , weil eins größer als der Minuswert und der Nullwert ist. Deshalb ist es auf Null gestiegen. Ich werde hier plus eins bestehen. Sein Zug hat zwei mehr an Wert verloren. Wenn ich in unserem vierten Artikel Wasser zwei weitergebe, lass mich dir Wasser zwei zeigen. Wenn ich diese Akte eingesperrt habe, wie Sie sehen, ist sie jetzt bis auf den letzten Platz. Weil plus zwei größer ist als Null und eins. Wenn ich diese Datei einstelle, ist es jetzt für dich klar. Jetzt können Sie klar verstehen, wie das Wasser ist. Wir setzen in Punkt zwei und Punkt sechs kein Wasser ein. Bis zum Herbst ist der Wassergehalt dieser Gegenstände gleich Null. Ich hoffe, du verstehst jetzt die Bewässerung. Jetzt stellt sich die Frage, wo nutzen wir das Grundstück Wasser? Wenn Sie Ihre Website responsiv gestalten möchten, dann ist Wasser die wichtigste Eigenschaft. In DextView möchten Sie diesem Wasser folgen. In der mobilen Ansicht möchten Sie jedoch Element vier an die erste Stelle verschieben In diesem Fall sind Wassergrundstücke sehr nützlich. Ich hoffe, du hast verstanden, worum es geht. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 26. CSS Flexbox Flex Grow-Tutorial: Hallo Leute, schön, dass ihr wieder da seid. Ich bin wieder mit einem neuen Tutorial gekommen. In diesem Tutorial lernen wir eine neue Eigenschaft kennen, nämlich Flex. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie es funktioniert. Wie Sie sehen können, öffne ich Seite an Seite meine Isle Sto Cotter und meinen Browser mit der Lip Seal-Erweiterung, und ich erstelle bereits ein eSML-Dokument mit dem Namen Index doot esTeml dem Namen Index doot Wie Sie in unserem übergeordneten Container sehen können, haben wir Lassen Sie uns unser neues Eigentum nutzen. Grundsätzlich funktioniert die Flex-Gruppeneigenschaft nicht mit Containern. Ich arbeite mit Flex-Elementen. Wie Sie sehen können, gibt es die gemeinsamen Klassennamenelemente für alle Flex-Elemente. Ich werde in die Artikelauswahl springen. Und ich werde unsere neue Immobilie nutzen, nämlich Flex Grow Flex Grow. Hier müssen wir einen numerischen Wert übergeben. Wenn ich Null übergebe und dann diese Datei festlege, gibt es, wie Sie sehen können, keine Änderungen. Wenn ich hier einen Wert übergebe, also einen eintippen und dann diese Datei einstellen, können Sie hier sehen, alle Leerzeichen gleichmäßig auf das Flex-Element aufgeteilt sind. Ich hoffe, jetzt ist Ihnen klar, wie Flexdro-Immobilien funktionieren. Wenn ich hier zwei übergebe und dann diese Datei einstelle, gibt es , wie Sie sehen können, keine Änderungen Wenn ich dieses Tempo gleichmäßig aufgeteilt habe, all diese flexiblen Gegenstände. Deshalb wird es nicht funktionieren. Ich bin wieder in meiner alten Position. Eins, und ich werde diese Datei einrichten. Jetzt möchte ich den Artikel auf acht erhöhen. Ja, wir können es schaffen. Zuerst müssen wir den Artikel einzeln auswählen und dann müssen wir diese Eigenschaft verwenden. Flex Grow, und hier werde ich zwei bestehen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Sie können hier sehen, dass es sich jetzt im Vergleich zu anderen Verkäufen verdoppelt hat. Ähnlich ist es, wenn ich drei übergebe und dann diese Datei festlege, ist ihre Größe jetzt im Vergleich zu allen anderen dreimal so groß. In ähnlicher Weise werde ich dieselbe Eigenschaft in unserem vierten Punkt verwenden . Ich werde tippen, Flachs anbauen und das Gras auf bis zu viermal erweitern Ich möchte hier vier bestehen. Wenn ich diese Datei einstelle, können Sie den Unterschied sehen. Wenn ich den Rand zwischen den Kabeln entferne, ist es jetzt klarer für dich Ohne Punkt zwei und vier sind alle Ces eins Für Element zwei beträgt der Eigenschaftswert der Gruppe Les drei, und für Element vier ist die Gruppeneigenschaft von Kles gleich vier. Diese Eigenschaft funktionierte nur für das Flex-Element. Im Grunde verwenden wir diese Eigenschaft, wenn wir für alle Verkäufe die gleiche Breite angeben müssen. Ich hoffe, jetzt ist Ihnen klar , was Flex-Gruppeneigentum ist. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 27. CSS Flexbox Flex-Basis-Tutorial: Hallo, ich bin wieder zurück mit einer CSS-Flexbox, die sich auf Immobilien bezieht In diesem Tutorial werden wir lernen, was Flex-Basis ist. Diese Eigenschaft ist Max mit Eigentum ziemlich ähnlich. Im Grunde behandelt es das Flex-Element wd. Mal sehen, wie wir es praktisch nutzen können. Wie Sie sehen können, öffne ich Seite an Seite meine ISO für Cooror und meinen Browser mit der Life Server-Erweiterung und erstelle bereits ein STL-Dokument mit dem Namen Index Dot STML Wie Sie im Flex-Container sehen können, haben wir insgesamt sechs Flex-Elemente haben wir insgesamt Wie Sie sehen können, verwenden wir Display Property, Flex, und wir verwenden auch Flex RAP. Wir haben die Flex Rap-Eigenschaft verwendet, denn wenn das Objekt überflogen ist, ist es heruntergekommen Deshalb verwenden wir Flex RAP. Für jedes Flex-Objekt legen wir eine gemeinsame Breite fest. Wie Sie sehen können, wächst Flex um eins. Wir haben in unserem vorherigen Tutorial mehr über diese Eigenschaft erfahren. Deshalb alle Artikel, die den gleichen Platz beanspruchen. Lassen Sie uns die Eigenschaft Flex Bases verwenden. In der ersten Auswahl werde ich Flex Bases eingeben Und hier gebe ich 250 Pixel mehrfach durch. Wenn ich diese Datei einstelle, wie Sie sehen können, ist unser erstes Flex-Element wi jetzt 250 Pixel groß. Jetzt funktioniert es wie bei der maximalen Breite. Lassen Sie uns die Entwickler-Toolbar einschalten. , beträgt die Breite unseres ersten Elements 250 Pixel, wenn ich dieses DP Wie Sie sehen, beträgt die Breite unseres ersten Elements 250 Pixel, wenn ich dieses DP aufhebe. Aber ohne unseren ersten Gegenstand nehmen alle Tiefen gleich viel Platz Aber wenn ich versuche, den Browser zu verkleinern , lass es mich dir zeigen Wie Sie sehen können, wird sich dies nicht auf die Breite dieses ersten Elements auswirken Wenn wir die Browserbreite reduzieren, wie Sie sehen, schrumpft sie jetzt Weil diese Eigenschaft wie eine maximale Breite funktioniert. Wir können die Breite dieses Elements auf unter 250 Pixel reduzieren , aber wir können die Breite dieses Elements nicht um mehr als 250 Pixel erhöhen. Jetzt werde ich die Flex-Basiseigenschaft verwenden, für diesen ganzen Artikel. Ich werde diese Zeile auskommentieren und Flexbasen mit 100 Pixeln verknüpfen. Wenn ich diese Datei einstelle, werde ich zunächst die Breite meines Browserfensters erhöhen. Jetzt können Sie sehen, dass unser erster Artikel 250 Pixel breit ist. Aber ohne unseren ersten Artikel beträgt Breite jedes Elements 100 Pixel Wenn ich versuche, den Browser ein wenig zu vergrößern, zeige ich Ihnen, wie Sie sehen können, Punkt fünf in die rechte Ecke verschoben Denn ohne das erste Element versuchen alle Elemente, eine Breite von 100 Pixeln beizubehalten, und sie versuchen auch, den Speicherplatz dieses Browsers zu füllen. Versuchen wir nun, die Browserbreite zu reduzieren und zu sehen, was passiert ist. Wenn ich versuche, die Browserbreite zu reduzieren, werden, wie Sie sehen, die meisten Artikel die zweite Zeile verschoben, da wir die Flexer-Eigenschaft verwenden Andernfalls werden sie in diesen Container überlaufen. Aber wenn ich es reduziere, etwas mehr , wie Sie sehen können, gibt es keinen Platz für zwei Elemente in einer einzigen Reihe Deshalb schrumpfen sie. Aber wie Sie sehen können, reduzieren wir den Artikel nur in eine Richtung. Aber nach dem ersten Element sind alle Objektbreiten immer noch 100 Pixel groß, dem ersten Element sind alle Objektbreiten immer noch 100 Pixel weil sie Platz haben, um sich bis zu ihrer vollen Breite auszudehnen Aber wenn ich es immer weiter reduziere, wie Sie sehen können, reduzieren alle Elemente ihre Breite Ich hoffe, jetzt ist es für dich klar, dieser Eigenschaft funktioniert es wie mit einem Max. Nicht nur das, diese Eigenschaft funktionierte auch wie eine Mindestbreite. Lass es mich dir zeigen. Wenn ich diese Zeile auskommentiere und wir die Flex-Grow-Eigenschaft für all dieses Element verwenden und diese Datei einrichten, werden, wie Sie sehen, alle Elemente in eine Zeile gebracht. Wir verwenden die Lex Bass-Eigenschaft nur für Element eins. Wenn es eins bleibt, verwenden wir die Flex Grow-Eigenschaft, und der Wert O Flex Grow ist eins. Wie ich Ihnen bereits sagte, hat es auch wie eine Eigenschaft mit der Mindestbreite funktioniert . Lass es mich dir zeigen. Ich versuche, die Breite des Containers zu reduzieren, wie Sie sehen können. Dies wirkt sich auf die gesamte Breite dieses Artikels ohne Artikel eins aus. Wenn ich versuche, sie weiter zu reduzieren, wird sich das, wie Sie sehen, nicht auf Punkt eins auswirken. Ohne Element eins reduzieren alle Elemente ihre Breite. Wenn wir versuchen, es weiter zu reduzieren, wie Sie sehen können, werden unsere letzten Artikel in die zweite Reihe geliefert. Aber unser erster Artikel behält immer noch die gleiche Breite bei, 250 Pixel. Wenn wir die Eigenschaft Flex Bases mit Flex Grow verwenden, gibt es eine Mindestbreite. Aber wenn wir nur die Flex-Basiseigenschaft verwenden, dann verhält sie sich wie ein Maximum mit. Nicht nur das, hier können wir auch den Prozentwert verwenden. Angenommen, ich möchte 50%, 50% verwenden. Wenn ich diese Datei einstelle, funktioniert sie, wie Sie sehen, immer noch einwandfrei. Erhöhen wir den Prozentwert auf 90%. Wenn ich diese Datei einstelle, ist dir jetzt klar, wie es funktioniert. Jetzt nimmt unser erster Artikel jedes Mal 90% der Breite dieses Browsers ein. Es liegt also an Ihnen, welchen Wert Sie verwenden werden. Ich hoffe, jetzt ist Ihnen klar, was Flex-Basiseigenschaft ist. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 28. CSS Flexbox Flex Shrink Tutorial: Willkommen zurück, Leute. In diesem Pterio werden wir lernen, was Flex Store ist Lass uns auf den Computerbildschirm springen und sehen, was das ist. Hier können Sie nebeneinander sehen, ich meinen Visotrio Correor mit der Lib Server-Erweiterung geöffnet habe und bereits ein STL-Dokument mit dem Namen Index Dot STML erstellt habe Und er kann C für verschiedene Flex-Elemente verwenden, eins, zwei, drei, vier Das ist unser Flex-Container. Wenn ich dir Heric C zeige, verwenden wir Distant Flex In unserer gemeinsamen Klasse verwende ich Flexro Property, Flexro, one. Deshalb sind die Breiten gleichmäßig verteilt. Aber in diesem Tutorial werden wir eine neue Eigenschaft lernen, nämlich flex strnk, also fangen wir damit an Schnell, ich werde die Flexro-Eigenschaft entfernen und wi wi, 200 Pixel einstellen Wenn ich diese Datei einstelle und die Größe meines Browsers mit ändere, können Sie das Ergebnis sehen Hier können Sie sehen, dass unser Container größer als die Artikel ist. Wie Sie sehen können, haben alle Artikel 200 Pixel. Jetzt möchte ich diese Flex-String-Eigenschaft in unserem ersten Artikel verwenden . Aber zuerst möchte ich Ihnen sagen, was Flex Sing bedeutet . Im Grunde verwenden wir die Flexing-Eigenschaft, um unser Flex-Element responsiv zu gestalten Wenn Sie Ihre Artikel schrumpfbar machen möchten, müssen Sie diese Eigenschaft verwenden Hier können Sie sehen, wie der Artikel verkleinert wird. Lassen Sie mich das Konzept klarstellen. In unserem ersten Artikel werde ich diese Eigenschaft verwenden, Flex Shrink Einer ist der Standardwert. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt. Aber wenn ich den Wert Null verwende und dann diese Datei setze, kannst du jetzt sehen, hey, ich habe ein bisschen Cinemta gemacht Wir müssen diese Eigenschaft innerhalb des ersten Elements verwenden , nicht in allen Elementen Ich möchte diese Eigenschaft in unseren ersten Artikel verschieben. Wenn ich diese Datei eingestellt habe, können Sie hier sehen, Element eins diese Form nicht verändert hat. Jetzt ist unser erster Artikel nicht schrumpfbar. Jetzt wurde die feste Breite von 200 Pixeln beibehalten. Wenn ich die Browserbreite erhöhe, können Sie das Ergebnis sehen. ich ein anderes Flex-Objekt auf die maximale Größe verkleinere Lassen Sie mich Ihnen zeigen, wie Sie sehen können, wie unser anderes Flex-Objekt aus diesem Container überflogen wurde, wenn ich ein anderes Flex-Objekt Wie Sie sehen können, ist unser erster Artikel nicht geschrumpft, weil wir den Flexing-Wert Null verwenden Jetzt ist es für Sie klar, dass wir beim Schrumpfen Null und einen Wert verwenden können Wenn wir einen Wert verwenden und dann diese Datei festlegen, können Sie jetzt das Ergebnis sehen Hier kannst du sehen, jetzt verkleinern wir unseren Artikel. Wenn Sie die Verkleinerung ausschalten möchten, müssen Sie den Wert Null verwenden Jetzt werde ich dir etwas anderes zeigen. Du weißt schon, wenn ich den Wert Null verwende, können wir den Psychiater ausschalten. Wenn wir jedoch einen Wert verwenden, können wir unsere Flex-Elemente verkleinern Jetzt können wir ohne Null oder Eins verschiedene Werte verwenden Lass es mich dir zeigen. Wenn ich zwei Haare verwende, stelle ich diese Datei ein, Sie können das Ergebnis sehen. Es verkleinert unseren ersten Artikel im Vergleich zu anderen Artikeln. Wenn ich drei Werte verwende und dann diese Datei festlege, können Sie auch hier sehen, dass unser Element eins verkleinert wird Wenn wir nicht den Wert Null verwenden, unser Objekt immer verkleinert Und jetzt zeige ich dir die zweite Methode. Wie können wir diese String-Eigenschaft anders verwenden? Dafür werde ich zuerst den Gegenstand Flügel entfernen. Dann habe ich diese Datei eingerichtet. Außerdem werde ich den Zeichenkettenwert eins verwenden. Und jetzt werde ich die Flex-Basiseigenschaft verwenden. Flex-Basis. Flexible Basis 200 Pixel. Flex-Basis bedeutet dynamisch w. Jetzt können Sie sehen, wir nicht auf das gesamte Objekt eine Breite anwenden können. Wir wenden W in unserem ersten Element an, indem wir die Flex-Basiseigenschaft verwenden. Wenn ich nun diese Datei speichere und versuche, die Browserbreite zu reduzieren, wie Sie sehen können, wenn dieser Bereich vorbei ist, und wenn ich versuche, ihn zu reduzieren, können Sie sehen, dass und wenn ich versuche, ihn zu reduzieren, unser erster Eintrag ebenfalls kleiner wird Nun stellt sich die Frage, warum verkleinern , weil wir einen Wert verwenden Aber wenn ich den Wert Null verwende, akzeptiere diese Datei. Jetzt können Sie sehen, dass unsere Artikel aus diesem Container überflogen wurden Aber wenn ich zwei Werte übergebe und dann diese Datei festlege, wie Sie sehen, funktioniert das nicht Wenn ich Wert eins verwende und diese Datei festlege, können Sie sehen, dass es keine Änderungen gibt. Bei dieser Methode werden unsere anderen Werte nicht funktionieren. Wenn Sie den verbleibenden Speicherplatz abdecken möchten, können Sie in diesem Fall Flex Grove Vue verwenden. Lass es mich dir zeigen. In unserem vierten Punkt werde ich Flex Grove Vue verwenden. Flachs wächst. Erstens, ich lege den Boden, wie Sie sehen können, unser Punkt vier deckt das gesamte Leerzeichen ab. Wenn ich die Browserbreite reduziere, können Sie sehen, dass unser Punkt vier automatisch verkleinert wird Bei einer Verkleinerung wirkt es sich jetzt auf Element eins aus. Ich hoffe, an diesem Punkt ist es für Sie klar. Und jetzt werde ich die Breite für diesen Container festlegen. Wie Sie sehen können, verwenden wir diesen Container keine Breite. Ich werde jetzt Container w setzen. Hier werde ich die BREITE W auf 600 Pixel binden. Wenn ich diese Datei einstelle und die Breite meines Browsers erhöhe, können Sie jetzt sehen, jetzt können Sie sehen, dass unsere Containergröße fest ist, und jetzt werde ich die Containerbreite reduzieren. Ich werde 300 Pixel verwenden. Wenn ich diese Datei einstelle, können Sie sehen, dass sie alle Elemente verkleinert. Auch der erste Punkt. Ich schrumpfe den Container mit etwas Witz runter, irgendwas auf 50 Pixel, und dann setze ich diese Datei Hier kannst du sehen, dass es auch funktioniert. Weil wir hier einen Wert verwenden. FlexSN eins Aber wenn ich den Wert Null verwende und dann diese Datei setze, können Sie ein anderes Ergebnis sehen Hier können Sie sehen, dass andere Artikel aus diesem Container überflogen wurden Ich hoffe, jetzt ist Ihnen klar , was Flex Shrink Property ist Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial 29. CSS Flexbox mit Margin-Auto-Tutorial: Heute werden wir in diesem Tutorial lernen, was Auto Margin in Flexbox ist Lassen Sie uns auf den Computerbildschirm springen und sehen, wie man arbeitet. Hier können Sie Seite für Seite sehen, ich öffne meinen Visa Sudo-Codaor und meinen Browser mit der Live-Server-Erweiterung und erstelle bereits einen Estil-Dokumentnamen mit Indexpunkten Wie Sie in meinem Browser sehen können, gibt es In diesem übergeordneten Container haben wir ein D-Objekt. Dies ist unser Flex-Container, und das ist unser Flex-Artikel. Jetzt zeige ich Ihnen, wie wir mit Margin Auto Value unterschiedliche Ergebnisse erzielen können . In unserem Artikel werde ich Margin eingeben. Margin und ich werde Auto V verwenden . Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier sieht man die horizontale und vertikale Linienmitte. Aber der Sinus ist der Grund, weil in diesem Container viel Freiraum ist. Deshalb ist es eine Linie in der Mitte. Jetzt verwende ich Margin Left Auto Margin Let. Wenn ich diese Datei einstelle, wie Sie hier sehen können, können Sie sehen, dass sie automatisch an die rechte Seite dieses Containers versendet wird. O Artikel verlässt das Feld auf der linken Seite und versendet auf die rechte Seite. Wenn ich Margin Top Auto Top verwende, dann lege ich diese Datei fest. Jetzt können Sie sehen, dass sie von oben nach unten kommt , weil sie oben freien Speicherplatz hat. Damit werde ich Margin Late Property verwenden. Margin spät. Ich werde wieder Auto Vu verwenden. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, wie unser Flex-Objekt in der rechten unteren Ecke dieses Containers geformt ist. Ich hoffe, Sie können jetzt verstehen, wie wir mit Auto Vu eine andere Ausrichtung erreichen können . Lassen Sie mich Ihnen ein anderes Beispiel zeigen. Angenommen, wir haben einen Container. In diesem Container haben wir insgesamt vier Flex-Artikel. Hier sehen Sie die Artikel, Artikel eins, Artikel zwei, Artikel drei und Punkt vier. Ich sage eine andere Hintergrundfarbe für diese Artikel. Jetzt verwende ich unser Margin Auto Vu. Ich werde es in unserem zweiten Element Margin verwenden , rechts Auto. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hier können Sie sehen, wie unser Artikel 2 den gesamten verfügbaren Platz innerhalb des Containers einnimmt , einen Nutzungsspielraum bietet und Artikel drei und Artikel vier auf die rechte Seite dieses Containers verschiebt . Wenn ich die Eigenschaft margin lept verwende, zeige ich Ihnen ebenfalls den Rand p und lege dann diese Datei fest Nun können Sie sehen, dass bei diesem Punkt die gesamte Leertaste zur Verfügung gestellt wird. Wenn ich dieselbe Eigenschaft aus Element eins verwende, werde ich diese Eigenschaft ausschneiden und hier einfügen. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie den gesamten Speicherplatz vor Element eins einräumt und das gesamte Element nach rechts von diesem Container verschiebt. Wenn Sie mit der responsiven Website arbeiten, können Sie diesen Baum verwenden, um Ihr Flex-Element auszurichten. Ich hoffe, jetzt ist es für Sie klar, wie wir mithilfe von Auto Value ein anderes Layout in der Flexbox erstellen können. Vielen Dank, dass Sie sich diese Tutorial-Statue für unser nächstes Tutorial angesehen haben. 30. CSS Flexbox verschachteltes Flex-Tutorial: Hallo, das ist das letzte Tutorial zur Flexbox-Eigenschaft. In unserem entsprechenden Tutorial werden wir einige reale Projekte behandeln In diesem Tutorial werden wir lernen, was Nested Flex ist Lassen Sie uns auf den Computerbildschirm springen und sehen, wie es funktioniert. Wie Sie sehen können, gibt es einen Behälter und in diesem Behälter befinden sich drei D-Gegenstände Wenn wir unseren übergeordneten Container in einen Flex-Container umwandeln, dann nennen wir das De-Flex-Element Wenn wir jedoch die Display-Flex-Eigenschaft in einem bestimmten Element verwenden, wäre es in diesem Fall ein verschachtelter Flex-Container Dies sind auch Flex-Elemente in diesem Container. Lassen Sie uns also mit dem Praktischen beginnen und sehen, wie wir es nutzen können. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio-Code oder meinen Browser mit der Light-Server-Erweiterung und erstelle bereits einen Indexpunkt für den Namen eines Sable-Dokuments unter Hier sehen Sie ein übergeordnetes Objekt plus einen Container. In diesen Container haben wir alle vier Flexbox-Artikel gelegt. Wie Sie in unserer Container-Klasse sehen können, verwenden wir die Display-Eigenschaft Flex Zuerst werde ich die Richtung der Flex-Elemente ändern . Hier werde ich die Flex-Richtungseigenschaft verwenden. Flex-Richtung. Ich werde Column verwenden. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wir haben für zwei unserer Artikel bereits eine Höhe von hundert Pixeln festgelegt. Jetzt füge ich drei weitere tief in unseren zweiten Artikel ein. Hier werde ich insgesamt drei weitere hinzufügen. Zuerst werde ich ein d mit der Sub-Item-Klasse erstellen. Artikel der Klasse S. Außerdem werde ich einen anderen Klassennamen S Punkt eins für unser erstes D verwenden Klassennamen S Punkt eins für unser . Dann werde ich diese Zeile insgesamt zweimal duplizieren. Also werde ich den geformten alten Abwärtspfeil loben. Unterpunkt zwei und Unterpunkt drei. Wie Sie sehen können, habe ich einen Unterpunkt mit einem gemeinsamen Klassennamen festgelegt, und wir sagen auch, dass für jedes Element ein anderer Klassenname angegeben wird. Dann füge ich dieses dem ein, ich gebe A, B und Großbuchstaben C ein. Wenn ich diese Datei setze ich gebe A, , wie Sie sehen, hat sie unsere Artikel zurückgegeben Ich werde jetzt unser zweites Flexbox-Objekt in einen Flexbox-Container umwandeln unser zweites Flexbox-Objekt in einen Flexbox-Container Hier verwende ich die Anzeige von Eigenschaftsnamen. Flachs anzeigen. Wenn ich diese Datei einstelle, ordnet sie, wie Sie sehen , standardmäßig unseren Artikel in einer einzigen Rolle Lassen Sie uns nun eine Hintergrundfarbe für unsere Artikel angeben. dafür Punkt zwei, mehr als Sinus , unseren Klassennamen an , der ein Unterelement ist. Dann werde ich in den Schnitten Hintergrundfarbe sagen Hintergrund y. Außerdem werde ich eine Textfarbe sagen Farbe, Schwarz. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Und jetzt möchte ich unser verschachteltes Flex-Objekt gleichmäßig in diesem Container aufteilen unser verschachteltes Flex-Objekt gleichmäßig in diesem Container Dafür werde ich einen Eigenschaftsnamen Plex Grow verwenden. Flex-Gruppe. Plex, trinkst Wein. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Lassen Sie mich bei unseren Artikeln eine Marge einräumen, die Sie einstufen können. Rand ein Pixel. Wenn ich diese Datei einstelle, können Sie die sehen. Wie Sie sehen können, haben wir einen übergeordneten Flex-Container. In diesem übergeordneten Flex-Contin haben wir vier Flex-Elemente von Protal, und wir konvertieren unser zweites Flex-Element in einen verschachtelten Flex-Container, und innerhalb des verschachtelten Flex-Contin platzieren wir die drei Flex-Elemente von Protal, A, B und C. Ich hoffe, jetzt ist es für Sie klar, wie wir Es ist nicht sehr schwierig. Es ist ein sehr einfacher Prozess. Vielen Dank, dass Sie sich dieses Video haben. Freuen Sie sich auf unser nächstes Tutorial. 31. So erstellen Sie ein Dropdown-Navigationsmenü mit Flexbox: Hallo Kerl, schön dich wieder zu sehen. Willkommen zu unserer ersten projektbezogenen CSS-Flexbox. In diesem Projekt werden wir ein Dropdown-Navigationsmenü mithilfe der CSS-Flexbox-Eigenschaft erstellen Dropdown-Navigationsmenü mithilfe der CSS-Flexbox-Eigenschaft Wie Sie sehen können, wird nach dem Hoberm-Servicebereich Drop-down-Menü geöffnet Wenn dann auch ein Abschnitt zur Webentwicklung folgt , öffnen Sie einen weiteren Drop-down-Bereich, einen S PHP- und einen Java-Strep S PHP- und einen Java-Strep Mal sehen, wie wir diesen erstellen können. Wie Sie sehen können, befinden wir uns endlich in meinem Visa Studio-Code-Editor. Außerdem bin ich in meinem aktuellen Arbeitsverzeichnis. diesem Verzeichnis haben wir zwei Dateien, in der Des Dot Stable-Datei und der Style Dot Sess-Datei, und wir haben einen Ordnernamen Image, und in diesem Ordner haben wir ein Bild, Nature Dot JPG Und hier können Sie in meinem Kostenvoranschlag sehen, wir unsere Dissertationsdatei, Style Dot Sess, bereits verlinkt Zuerst werde ich den Abschnitt Stable abschließen . Innerhalb des Body-Tags nehme ich zuerst ein tiefes Tag, einen B-Punkt, und ich nehme einen Klassennamen, und unser Klassenname ist Menu AA. Bereich unterstreichen. In diesem Dip-Tag nehme ich zuerst das UL-Tag Wie Sie wissen, sollte das UL-Tag nicht für Watvögel verwendet werden. Für Menüelemente benötigen wir ein LI-Tag, L. Innerhalb des LI-Tags werde ich das NCA-Tag hinzufügen. Antwort: Wir müssen es auf keine Seite umleiten Deshalb werde ich das H-Textzeichen verwenden. Dann gebe ich den Namen unseres ersten Menüelements ein. Mein erster Menüname ist. Dann muss ich machen, dass wir diese Zeile bekommen. Und unser nächster Menüpunkt ist oben. Und unser dritter Menüpunkt sind Dienstleistungen. Also, ich entferne die oben genannten Dienste und Dienste vom Typ Hem. Und unser vierter Menüpunkt ist Portfolio. Er gibt Portfolio ein. Und unser letzter Menüpunkt heißt Kontaktkontakt. Dies ist unser Hauptmenübereich, und jetzt müssen wir eine Drop-down-Option für Dienste erstellen . Im LI-Tag nehme ich ein weiteres UL-Tag. Außerdem werde ich diesem UL-Tag eine Klasse zuweisen. Claus, lass einen fallen. Unterstreiche eins Auch für Dropdowneinträge müssen wir das LI-Tag L taggen . Außerdem müssen wir Tag und Gut Tag A hinzufügen , und ich möchte es auf keine Seite weiterleiten Deshalb verwende ich das Has-Tag. Welche Art von Dienstleistungen wir anbieten, wir bieten Logodesign, Webdesign und Webentwicklung. Hm-Typ, Logodesign, Logodesign. Dann werde ich diese Zeile duplizieren. Unser nächster Service ist Webdesign. Ihr Schriftdesign und alle Dienstleistungen, Webentwicklung. In diesem Servicebereich haben wir insgesamt drei weitere Unterbereiche Jetzt möchte ich drei weitere Menüelemente im Bereich Webentwicklung hinzufügen im Bereich Webentwicklung Im LI-Tag nehme ich wieder das UL-Tag U L. Außerdem werde ich einen Klassennamen A zuweisen. Klassen-Dropdown zwei. Unterstreichen Sie zwei Auch hier nehme ich im EL-Tag A, dann unseren Anker-Tag, und ich möchte ihn nicht umleiten Ich und ich wollen es nicht umleiten. Deshalb verwende ich das H-Tag. Innerhalb der Webentwicklungsdienste arbeiten wir mit Python, PHP und Java Squat Erstens ist Python unser erstes Hauptprodukt. Dann werde ich diese Zeile replizieren und unser zweiter Menüpunkt ist PHP und unser dritter Menüpunkt ist Java SQ Wenn wir diese Datei einrichten und Ihnen meinen Browser zeigen. Jetzt kannst du sehen, wie es ist. Ohne CSS sieht unser Menü so aus. Aber hier seht ihr die klare Struktur unseres Menüs. Innerhalb des Dienstleistungsbereichs haben wir drei weitere Bereiche. Im Bereich Webentwicklung haben wir wieder drei weitere Elemente, Python, PHP und Java drei. In unserem ersten Band vervollständigen wir unseren HTML-Teil. Im nächsten Teil werden wir mit unserer Styling-Übung beginnen. Fangen wir mit dem Styling an. Zuerst wählt Amendo den Universal Selector aus , der ein Sternzeichen ist Dann geben Sie innerhalb der Kalibrationen den Amendo-Typ oder Verschmelzung Null. Dann gebe ich Padding, Padding, also Zero Unsere nächste Eigenschaft ist die Größe der Boxen, die Größe Boxen und die Rahmengröße . Jetzt wähle ich alle Anker-Tags aus dem Menübereich aus Ich kopiere den Menübereich für Klassennamen und zurück zur Sess-Datei, zum Punktmenübereich vom Typ Ham und auch zu unserem Anker-Tag Dass ich A drücke, dann in der Schauspielerin, dann stattdessen in der Klasse, ich verwende unsere erste Eigenschaft, P ist display Zeigen Sie Flachs an, und unsere nächste Eigenschaft ist Align item. Richten Sie die Objekte zentriert aus. Unsere nächste Eigenschaft ist Justify Content. Inhalt rechtfertigen. Es ist auch das Zentrum. Und für die Schriftfarbe verwende ich weiße Farbe, Farbe, Weiß. Dann nehme ich die Hintergrundfarbe für unser Manöver. Hintergrund und als Hintergrund werde ich RGV-RGB verwenden Für Rot gebe ich 57 ein. Für Grün gebe ich wieder 57 ein. Für Blau gebe ich wieder 57 ein. Wenn ich diese Datei einstelle, zeige ich Ihnen meinen Browser, Sie können das Ergebnis sehen. Als Nächstes gebe ich all diesen Anker-Tags eine Höhe. Damit werde ich auch den Schriftstil ändern. Hier werde ich Höhe 50 Pixel und Schriftfamilie und Schriftfamilie sensorisch verknüpfen . Und Schrift acht, Schrift acht, fett. Und ich möchte nicht, dass unser Anker-Tag unterstrichen wird. Deshalb müssen wir eine andere Eigenschaft verwenden, nämlich die Textdekoration. Textdekoration, keine. Außerdem will ich den ganzen Menüpunkt. Deshalb müssen wir eine andere Eigenschaft verwenden, nämlich die Texttransformation. Texttransformation, Texttransformation in Großbuchstaben. Wenn ich diese Datei einstelle und Ihnen meinen Browser zeige, können Sie jetzt das Ergebnis sehen Jetzt sehen unsere Telefone viel besser aus als die vorherigen. Mit Flexbox richten wir alle Menüelemente horizontal in der Mitte dieser Seite Jetzt füge ich all diesen Elementen den Over-Effekt hinzu. Kehren wir zum Ergebnis zurück, also coor Jetzt wähle ich das Punkt-Hauptmenü oder den Ankertext, den Doppelpunkt, den Mauszeiger Dann ist innerhalb der Kalibrationen unsere erste Eigenschaft Hintergrund, Hintergrund und unsere Hintergrundfarbe ist , Hintergrund und unsere Hintergrundfarbe Damit möchte ich die Schriftfarbe Weiß, Farbe, Weiß haben. Wenn ich diese Datei einstelle und wieder zu meinem Browser zurückkehre und meine Autos auf diesen Objekten öffne , können Sie den Effekt sehen. Jetzt müssen wir all diese Navigationselemente in einer einzigen Zeile platzieren. Dafür müssen wir das UL-Tag auswählen. Hier möchte ich den Menübereich UL verknüpfen. Dann im Set die Kosten, unser erster Eigenschaftsname ist Lstle, Las style, was keiner ist Ich möchte keinen Stil in unseren Listenelementen haben. Deshalb verwende ich diesen Stil nicht. Damit müssen wir eine weitere wichtige Eigenschaft nutzen, nämlich diesen Spielflachs Wenn ich diese Datei einstelle und zu meinem Browser zurückkehre, können Sie jetzt sehen, wie sie versucht, sie in einer einzigen Zeile auszurichten Aber wir stellen keine zur Verfügung, deshalb hat es nicht perfekt funktioniert. Jetzt müssen wir alle Listenelemente bereitstellen . Kehren wir noch einmal zum Visual Studio-Code-Editor zurück. Hm Krawatte. Der Menübereich LI-Tag, und ich werde ihn auf dem LI-Tag sehen. In der Alvass ist dann die erste Eigenschaft von O die Position, die relative Position, relative Position, und unsere nächste Eigenschaft ist das Gewicht, das Gewicht Und unsere dritte Eigenschaft ist die Textausrichtung. Text ausrichten, Text zentriert ausrichten. Wenn ich diese Datei einstelle und zurück zu meinem Browser gehe, können Sie das Ergebnis sehen. Wie Sie sehen können, hat es für die wenigsten Elemente aus dem Hauptmenübereich funktioniert . Jetzt möchte ich unseren Servicebereich erst anzeigen , wenn ich ihn aktiviert habe. Dafür müssen wir unser LI-Tag vor Punkt eins verstecken. Kehren wir zum Punkt zurück und hier gebe ich Punkt Eins ein, unterstreiche Eins und wähle das gesamte LI-Tag daraus aus Dann in den Kalibraten, und ich werde eine Anzeigeeigenschaft verwenden Keine anzeigen. werde ich eine andere Position für den Eigenschaftsnamen verwenden. Relative Position. Wenn ich diese Datei einstelle und dir meinen Browser zeige, lass es mich dir zeigen. Wie Sie sehen können, ist unser Drop-down-Bereich jetzt nicht sichtbar, aber ich möchte ihn sehen, wenn ich mit der Maus darauf fahre Dazu müssen wir das gesamte LI-Tag von D nach unten auswählen . Lass es mich dir zeigen. Punktmenübereich, und dann wähle ich das gesamte LI-Tag aus. Damit möchte ich den O-Selektor hinzufügen. Damit wähle ich gesamten Listeneintrag aus der ersten Drop-down-Liste aus Geben Sie dann Punkt, Dropdown One, Direct Al Selector oder Tag-Name K Dann ist die Eigenschaft Calise oder erste Positionierung top T Null Außerdem werde ich eine andere Eigenschaft verwenden, nämlich die Anzeige Block anzeigen. Wenn ich diese Datei einstelle und zurück zu meinem Browser gehe und wer meine Autos besonders sind Service-Bereich, jetzt können Sie das Ergebnis sehen. Jetzt zeige ich alle Drop-down-Menüs, Logodesign, Webdesign und Webentwicklung an. Aber unsere zweite Drop-down-Option funktioniert nicht perfekt. Aber vorher müssen wir unseren Drop-down-Menüabschnitt perfekt anordnen. Kehren wir wieder zum bearbeiteten Visual Studio-Code zurück. Hier wähle ich Dot Dropdown One aus. Dann legt er die Groß- und Kleinschreibung O erste Eigenschaft ist Position, Position absolut. Und um es pro Fuß anzuordnen, müssen wir eine weitere Eigenschaft verwenden, nämlich Display. Zeige Schlacken an, und ich möchte die Drop-down-Elemente spaltenweise anordnen Deshalb müssen wir eine andere Eigenschaft verwenden, nämlich Plex-Richtung Spielrichtung, Spalte. Außerdem müssen wir festlegen, was in unserer Drop-down-Box erscheinen soll. Typ Herm, was zu 100%. Wenn ich diese Datei einstelle und zu meinem Browser zurückkehre und mit dem Mauszeiger auf den Servicebereich fahre, können Sie sie jetzt perfekt sehen Hier können Sie sehen, dass wir unsere Drop-down-Elemente spaltenweise perfekt ausrichten unsere Drop-down-Elemente spaltenweise Jetzt müssen wir unser zweites Drop-down-Menü anzeigen. Dafür müssen wir fast dasselbe tun. Kehren wir zum S Studio-Code zurück, und ich werde diesen Abschnitt replizieren Zuerst werde ich unser Dropdown-Two-Menü ausblenden. Dropdown zwei, das, und jetzt brauche ich diese Positionseigenschaft nicht. Ich entferne es. Außerdem müssen wir dem Listenelement ein Drop-down-Menü mit Hover-Effekt hinzufügen Listenelement ein Drop-down-Menü Im Moment muss ich dafür nicht den Sektor im direkten Stil verwenden und Dam verwenden , um Dropdown eins auf Dropdown zwei zu ändern Außerdem werde ich den Menübereich entfernen und Punkt Dropdown eingeben. Dropdown unter Bereich eins. Außerdem brauche ich diese Top-Eigenschaft nicht, weil ich sie auf der P-Seite zeigen möchte . Ich werde diese Datei einrichten. Als Nächstes ändere ich diesen ausgewählten Namen, drück eins auf zwei, und ich lasse alle Eigenschaften und Werte unverändert, aber ich entferne mit der Eigenschaft und gebe Zuhause ganz oben Null ein. Dort werde ich eine andere Eigenschaft verwenden, die ganz oben Null steht. Unsere nächste Immobilie ist Lip Lap zu hundert Prozent. Außerdem werde ich das Drop-down-Menü einrichten. W 200 Pixel. Wenn ich diese Datei einstelle und zu meinem Browser und dem allgemeinen Bereich Service und Webentwicklung zurückkehre allgemeinen Bereich Service und Webentwicklung , funktioniert es nicht. Ich glaube, ich habe einen Fehler gemacht. Kehren wir zur Stable-Datei zurück. Wie Sie, wir haben in Dropdown zwei einen Rechtschreibfehler gemacht. Wir müssen es benutzen, nicht. Wenn ich diese Datei und meine Style-Datei setze und wieder zu meinem Browser zurückkehre und meinen Browser benutze und den Mauszeiger auf Dienste und auch auf Webentwicklung Jetzt können Sie das Ergebnis sehen. Jetzt funktioniert unser Menü perfekt. Wie Sie sehen können, können wir mithilfe der Flex-Eigenschaft ein Db-Down-Menü erstellen . Als Nächstes füge ich ein Header-Bild und einen Text mithilfe der Flex-Eigenschaften hinzu. Jetzt füge ich ein Header-Bild hinzu. Dafür brauchen wir ein weiteres Dip-Tag, D-Punkt, und ich möchte ihnen eine Klasse zuweisen, das ist Bannerbereich. Bereich zum Unterstreichen des Banners. In diesem Dip-Tag werde ich dem Tag ein H hinzufügen. Und Hameroty, die Macht der Flexbox. Leistung der Flexbox. Und ich werde diese Datei einrichten. Lassen Sie uns nun den Bannerbereich in unserer Sess-Datei gestalten. Ich werde diesen Klassennamen, Banner Aa, in meine Sess-Datei kopieren und den Bannerbereich verknüpfen Dann lege ich das CSS fest. Die erste Eigenschaft ist das Hintergrundbild. Hintergrundbild. Als Hintergrundbild nehme ich dieses Bild, das sich in unserem Bildordner NP befindet Geben Sie R R L ein und dann unser Ordnerbild. Schrägstrich oder Bildname Nature Dot JPG. Damit werde ich die Hintergrundgröße sagen. Hintergrundgröße, Hintergrundgröße, Titelbild. Außerdem müssen wir die Hintergrundposition angeben. Hintergrundposition, Hintergrundposition, Mitte. Ich möchte diesen Hintergrund horizontal und vertikal zentrieren Deshalb gehe ich an Mitte und Mitte vorbei. Jetzt werde ich die Höhe für diesen Hintergrund einstellen. Höhe hundert VH. Wenn ich diese Datei einstelle und zurück zu meinem Browser gehe, können Sie das Ergebnis sehen Jetzt müssen wir diesen Text in der Mitte dieses Bildes ausrichten. Dafür müssen wir diese Flex-Eigenschaft verwenden. Gehen wir zum Resto-Code-Editor und hier gebe ich diesen Play-Flex Objekt mittig ausrichten. Außerdem werde ich Justify Content Center bestehen. Wenn ich diese Datei und das per Browser einstelle, können Sie das Ergebnis sehen, die Leistung der Flexbox. Jetzt müssen wir die Textgröße erhöhen und die Farbe ändern. Dafür wähle ich unser Header-Tag aus. Habe Bannerbereich H zwei. Fügen Sie dann die Kalibrationen oder die ersten Eigenschaften-Texte ein, indem Text in Großbuchstaben umwandeln Damit werde ich die Farbe ändern. Farbe, weiß. Außerdem werde ich die Schriftgröße ändern. Schriftgröße, 60 Pixel. Außerdem möchte ich die Schriftfamilie ändern. Schriftfamilie. Schriftfamilie Monospace. Und ich werde diese Datei einrichten. Wenn ich zu meinem Browser zurückkehre, können Sie das Ergebnis sehen. Aber es ist wegen des Hintergrunds nicht richtig sichtbar. Jetzt müssen wir diesem Hintergrund einen Farbverlauf über dem Effekt hinzufügen . Lass es uns machen. Hier tippe ich , linearer, linearer Gradient , zwischen diesen beiden Werten verwende ich ein Komma. Innerhalb der unteren Klammern müssen wir den Gradientenwert für den Start- und Endpunkt angeben Hier verwende ich den RGBA-Wert r G B A, A für Alpha, der für Transparenz verwendet wird Für Rot verwende ich Null. Für Grün werde ich auch Null verwenden, und für Blau werde ich wieder Null verwenden. Aber für den Alpha-Wert werde ich 0,6 verwenden. Das ist die eine Seite von Gradient V. Wir müssen eine andere Seite des Gradientenwerts übergeben. Hier verwende ich ein Koma. Und ich werde diese Linie erstellen. Ich werde es kopieren und hier werde ich es einfügen. Wenn ich diese Datei einstelle und in meinem Browser mache, können Sie jetzt das Ergebnis sehen. Ich habe erfolgreich einen Navigationsknospen mit der Flexos-Eigenschaft erstellt mit der Flexos-Eigenschaft Dies ist eine der guten Verwendungen und ein gutes Beispiel für die Eigenschaft von Flexbox Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt