Masterclass für Webentwicklung: Lerne HTML, CSS Flexbox, Bootstrap für Responsive Webdesign | Luis Carlos | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Masterclass für Webentwicklung: Lerne HTML, CSS Flexbox, Bootstrap für Responsive Webdesign

teacher avatar Luis Carlos, Engineer, Web Developer and Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

41 Einheiten (2 Std. 15 Min.)
    • 1. Kurspräsentation

      2:26
    • 2. Einführung

      2:55
    • 3. Flexbox

      3:26
    • 4. Flexbox-Eigenschaften

      1:48
    • 5. Eigenschaft anzeigen

      3:59
    • 6. Flexbox

      3:38
    • 7. Flexbox

      4:19
    • 8. Flex

      3:26
    • 9. Flex

      1:59
    • 10. Rechtfertigung

      3:49
    • 11. Elemente anpassen

      4:22
    • 12. Inhalte anpassen

      3:26
    • 13. Order

      3:22
    • 14. Flex wachsen

      4:55
    • 15. Flex

      2:29
    • 16. Flex

      2:07
    • 17. Flex

      4:32
    • 18. Selbstjustierung

      2:43
    • 19. Der Grail

      0:56
    • 20. Heiliger Grail – erste Methode

      5:22
    • 21. Heiliger Grail – zweite Methode

      2:09
    • 22. Holy Gril Layout – Erstellen von header

      5:35
    • 23. Holy Gril Layout – Gestalte Navigation

      2:32
    • 24. Heiliger Grail – Gestalte den Hauptinhalt

      3:05
    • 25. Heiliger Grail – Erstellen von beitenden Inhalten

      1:42
    • 26. Holy Gril Layout – Gestalte layout

      2:08
    • 27. Erweiterte Layouttechnik – Teil 1

      4:43
    • 28. Fortgeschrittene Layouttechnik – Teil 2 (Heiliger Grail

      3:22
    • 29. Einführung in die Medienfragen

      6:05
    • 30. Gestalte deine Website mit einem responsiven Layout (Holy Layout

      4:35
    • 31. Responsive Design ohne Medienfragen (mit Flex-Wrap)

      2:57
    • 32. Bootstrap Flex Intro

      1:40
    • 33. Bootstrap – Benutzerdefinierte Kurse und Verwendung von Breakpoints

      7:21
    • 34. Bootstrap – -

      2:27
    • 35. Bootstrap – - wrap Kurse

      2:28
    • 36. Bootstrap – Richte dich an die content

      2:18
    • 37. Bootstrap – Die Benutzerklassen anpassen

      2:11
    • 38. Bootstrap – Richte dich an die content an.

      2:28
    • 39. Bootstrap – Richte dich an die self an

      2:16
    • 40. Bootstrap – Flex Grow & Schreinerei

      4:14
    • 41. Bootstrap – Benutzerdefinierte Kurse bestellen

      2:40
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

621

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Bist du auf der Suche nach einem a mit dem in der Entwicklung einer modernen Website mit ansprechender Website auf die einfachste und a Weise aufgebaut?

Wenn deine Antwort ja ist, bist du an der richtigen Stelle. Hier lernst du, wie du mit dem the aufbaust.

Mein Name ist Luis Carlos, im Anhang und einer Webentwicklerin und ich werde deine Anleitung in den nächsten Stunden für diesen Kurs sein. Ich habe mehrere Jahre Erfahrung als Trainerin und ich werde alle Kenntnisse im Bereich der Webentwicklung teilen.

 

Warum Flexbox?

Flexbox vereinfacht die Komplexität.

Mit Flexbox kannst du mehr mit Layouts machen und dir erlauben, das Layout auf einfachere und lustige Weise zu erreichen, um sie mit den Programmen zu schreiben.

 

Was du am Ende tun kannst?

  • CSS3 Eigenschaften für Eltern (in Container) und Kinderbetreuung (die (container) verwendest)
  • Die Elemente ausrichten und positionieren
  • Elemente in verschiedenen Richtungen und Bestellungen anordnen
  • Den verbleibenden Raum füllen und Elemente mit nicht Fill Überläufen vermindern.
  • Erstelle ein responsive Layout mit dem jeweiligen Inhalt
  • Fortgeschrittene layout
  • Verwendung von media zum Erstellen verantwortlicher Websites
  • Anwendung von Flexbox-Modell mit Bootstrap

Wie ist der Kurs strukturiert?

Der Kurs ist in mehreren Abschnitten strukturiert, in denen der erste Teil die Eigenschaften zum Erstellen von Websites mit dem Flexbox-Modell gewidmet. Nach der Anleitung leite ich dich auf einer echten Webpage, wo ich das heilige grail mit 2 Methoden erstelle und auf dem wir nur ein dimension verwenden und später das gleiche Layout mit den vorhandenen Containern ausgeht.

Mit dem fertigen Layout wird der Inhalt hinzufügt, um zu verstehen, wie die Flexbox platziert und alle Inhalte der Seite anpassen wird.

Nachdem du die erste echte Website erstellst, ist es der Zeit, erweiterte Techniken zum Erstellen von Layouts zu entwickeln, bei denen du die große Dynamik und versatility des the überprüfen kannst.

An diesem Punkt kannst du bereits Websites erstellen und nur deine Website an alle Arten von Geräten anpassen. Daher lernst du, Medienfragen bei der Erstellung von Seiten in der Gestaltung von Seiten zu verwenden.

Der Kurs ist dir zur Verfügung die Dokumente zur Verfügung und kann als Leitfaden arbeiten, wo man möglich ist, die Planung und Details zu überprüfen, die ich für die Erstellung der Website guide, und einige Details in den Layouts, die ich für die Erstellung der Website entwerfen.

Target Schüler

Dieser Kurs richtet sich an Personen, die im Bereich der Webentwicklung mit Kenntnisse in HTML und CSS oder einer Person mit dem Interesse an diesem Bereich arbeiten.

Am Ende kannst du einen Kommentar hinterlassen

Begleite mich bei dieser Herausforderung und siehst, wie einfach und Spaß ist, die Flexbox zu lernen!

Wenn du mehr im web lernen möchtest, kannst du dir meine anderen Kurse anschauen:

Triff deine:n Kursleiter:in

Teacher Profile Image

Luis Carlos

Engineer, Web Developer and Instructor

Kursleiter:in

Currently, I am an exciting Engineer and Trainer , who loves to learn and share knowledge and new experiences.

As Trainer participated in many projects directed to student in the areas of math, computer science, new technologies and web development . Several years of training helped me developed many skills that contribute to the personal development of each people.

You can follow some of my articles in my website where i share some tutorials in the area of new technologies.

Follow me on Skillshare!

 

 

 

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Kurspräsentation: Hallo und willkommen auf der CSS drei Flex-Box Curse, wo wir nicht Mutter und reaktionsschnelle Websites mit dem Flex-Box-Layout-Modell erstellen. Mein Name ist Wish Carhenge, und das wird unser Führer in den nächsten Stunden sein. Beginnen wir also mit Chris Inhalt in Diskutieren. Sie werden in die Welt der Flex-Box-Modell eintauchen. Flex Box erscheint Inversion Treat off CSS und vereinfacht auch die Entwicklung von modernen Web-Design , so dass natürlich und effizient reagieren outs anpassbar für alle Arten von Geräten zu bauen . Vergessen Sie also die alten Methoden mit Floats und positionieren Sie Workarounds. Mit einfachen Eigenschaften können Sie leicht spüren, dass Gewürze in einer Webseite nur die Elementgröße verkleinern, um einen Überlauf zu verhindern. weiteres großartiges Feature ist die Fähigkeit, die Größe einer Elementgruppe zu verwalten und ihre Leidenschaft zu ändern , nachdem sie die Eigenschaften kennen. Es ist Zeit, eine komplett aus mit einem reaktionsfähigen Inhalt zu erstellen, um in die Praxis umzusetzen , was Schüler zuvor gelernt haben. Und ich werde einige Veranstaltungstechniken zum Erstellen von Webseiten teilen, die Sie auf Ihre eigenen Projekte anwenden können . Die Verwendung von Medienabfragen spielt eine wichtige Rolle bei Responsive-Outs. Sie werden lernen, sie anzuwenden, um verschiedene Stile zu erstellen, abhängig von den Geräten, die verwendet werden, um ein Responsive Design für Ihre Websites zu erstellen. Neben Medienabfragen werden Sie sehen, dass Sie mit den richtigen Flex-Box-Eigenschaften auch ein ansprechendes Layout erstellen können. Also am Ende des Fluchs, sind Sie in der Lage, Ihre eigenen erstaunlichen und wunderschönen responsive Websites zu erstellen. Mit dem Flex-Box-Modell Diskurs ist für Menschen gedacht, die die besten Trends und moderne Web-Technologien lernen wollen , die Ihnen helfen, mehr mit weniger zu tun, kommen und kann auf jedes Projekt in der realen Welt angewendet werden. Begleiten Sie mich in dieser Herausforderung und sehen Sie, wie einfach und Fan es gelernt Flex-Box. 2. Einführung: wir technologische Entwicklung wir Stühle aufgetreten in den letzten Jahrzehnten. Neue Arten von mobilen Geräten haben aufkommende log mit den Bedürfnissen und Anforderungen aus den Benutzern heutzutage, auch mit Computern, Menschen bevorzugen zu konsumieren und Inhalte über das Smartphone und Tablet zu erstellen, die, in Kombination mit Wachstumsstrategien von Unternehmen, bringt ich Niveau der Nachfrage, wo nur diejenigen, die dort waren, um die Veränderungen gewinnen können. Es ist gesorgt, dass das Konzept der responsive Website entsteht, das ermöglicht, Web-Inhalte an die Geräte anzupassen, die verwendet werden, um sie zu visualisieren. Hat die Anpassung des Layouts auf das Gerät Wenn Sie intuitiven und einfachen Zugriff bieten, die Verbraucher-Browser-Sites mit mehr Zufriedenheit. Die Qualität off Interaktion, die Kunden mit Unternehmen Website haben, ist sehr wichtig weil es spiegelt Unternehmen Anliegen, in der Lage, gute Dienstleistungen zu bieten. Es steigt sein Image vor Konkurrenten über die Benutzererfahrung kann genug sein um ein Unternehmen zu verringern. Es verkauft und archiviert jede Strategie. Die Entwicklung von Websites spielt eine grundlegende Rolle bei der Erstellung von funktionalen Seiten an alte Art von Geräten anpassbar sind, und hier gilt das Konzept der Flex-Bücher. Vor Flex-Box, kommen Sie auf Websites. Layouts mit HTML und CSS waren aufgrund von Beschränkungen von Layoutmodellen oft schwierig zu erreichen . Website-Layouts wurden oft mit einer Kombination aus Floated erreicht und positionieren Sie es Elemente Faktoren, die ich Komplexität bei der Erstellung der Seiten gebracht. Das flexible Box-Layout von C. S wurde von der CSS Working Group entwickelt, um das Box-Modell zur Verfügung zu stellen , das Probleme mit Kerzen überstehen könnte. Flex Box ist ein Layout-Modell diese vergleichen, um zu helfen, wo Altäre voraus Website-Layouts erstellen , die schwer zu erreichen sind mit anderen Layout. Mel bietet eine effizientere Möglichkeit, eine Linie zu legen und Platz zwischen den Elementen im Container zu verteilen , selbst wenn sie nicht groß sind. Grund, warum Wort flexed verwendet wird. Es ist rot für mobile Bildschirme und ansprechende Inhalte für dynamisch Outs. Und Web Epps Diskurs wird die grundlegenden Eigenschaften von CSS Flex Box-Modell und einige hilfreiche Ressourcen, um tiefer in das Thema zu graben. 3. Flexbox: Hallo und willkommen wieder In diesem neuen Video werde ich eine erste Herangehensweise auf Flexbox-Layout-Modell nehmen. Die Männeridee hinter diesem neuen Modell ist es, einem Container die Möglichkeit zu geben, seine Gegenstände innerhalb der gestorbenen Werte nach Westfield zu ändern . Verfügbar Gewürz und Adept Toe alle Art von Display-Geräte und Bildschirmgrößen, ein Flex-Container Kosten Artikel oder schrumpft sie, um Überlauf zu verhindern. weiteres großartiges Feature ist es, die Reihenfolge der verschiedenen Flex-Elemente von der Seite zu ändern, so dass die Position vom Seiteninhalt leicht geändert werden kann, was bei der Verwendung von Floats nicht passiert ist. Wo war manchmal von einem Problem. Ändern des Layouts und der Sterbezahl Art von Geräten mit diesem neuen Layout-Modell genannt ist besser lesbar, und das ist viel einfacher, in Lebenslauf Flex-Box verwenden Eigenschaften, die vollständig die Dynamik über unsere ansehnlich aus ändern können . Und er sieht den großen Vorteil im Vergleich zu älteren Modellen mit CSS. Da Flex Boxen gesamtes Modell und nicht eine einzige Eigenschaft, es beinhaltet eine Menge Dinge, einschließlich seiner alten gesetzt leistungsfähigen Eigenschaften. Wie ich bereits sagte, einige von ihnen sollen auf dem Container festgelegt werden, sind übergeordnete Elemente, die als Flex-Container bekannt sind, während die anderen für die Kinder bestimmt sind, die wir aufrufen. Flex-Elemente, wenn sie regelmäßig aus sind, basieren sowohl auf Block- als auch in Linienflussrichtungen. Das Layout „Ablenkungen“ basiert auf Flex-Fließrichtungen. In diesem Bild sehen Sie die Grundidee hinter dem Flex-Layout, wo Sie den Flex-Container unterscheiden und Elemente ablenken können, die Seiten einfügen. Lassen Sie uns jetzt einige Terminologie lernen, die verwendet wird, um den Flex-Container zu beschreiben, und es ist Children's. Jeder Flex-Container enthält zwei Exes. Der Domänenzugriff ist die primären Exes, entlang derer Flex-Elemente angeordnet sind und die Querachse senkrecht zur Hauptachse verläuft. Die Richtung hängt von der Haupt-Überschussrichtung ab. Dumaine starten und halten Ende und über Start- und Querendseiten aus. Der Flex-Container beschreibt den Ursprung und das Ende des Abflusses Flex-Elemente. Sie folgten dem Hauptzugang und quer Zugang aus. Der Flex-Container lenkt Elemente ab, agnostische Entsprechungen. Ich neige mit unserer Hauptgröße und Kreuzgröße, die jeweils dem Hauptüberschuss folgt und überschüssiges Übermaß aus dem Flexbehälter überquert. Wir haben jetzt unsere Musterrechnungen. Wir sehen uns die nächste Lektion 4. Flexbox-Eigenschaften: Hallo. Es ist Zeit, die Flex-Box-Eigenschaften zu lernen. Flex Box-Modelle bestehen aus einigen Flex-Eigenschaften sowie einem wird Ausrichtungseigenschaften abgleichen . Wie Sie in den nächsten Videos sehen werden. Die Ausrichtung ist ein großer Teil. Off-Flaggen-Spots im Grunde lenkt Box-Eigenschaften definieren unsere Flicks. Artikel sind bemessen, alles, was sie umwickeln und in welche Richtung sie gehen. In der Achse werden Eigenschaften definiert. Die Flex-Elemente werden Boot horizontal und vertikal innerhalb ihres Containers ausrichten. Diese Eigenschaften können in Gruppen unterteilt werden, Eigenschaften für übergeordnete Elemente, die Werte für kontrollierte innere Elemente verwenden, und F-Children-Eigenschaften zum Suchen. Um zu verzögern, können Sie in der Liste alle Eigenschaften sehen, die Sie in den nächsten Videos lernen. Sieben Eigenschaften für die übergeordneten Elemente, die display-Eigenschaft, flex diese Aktion flex rep. Flex Flow, nur definierten Inhalt, ausrichten Elemente und ausgerichtet Inhalt und sechs Eigenschaften für die Flex-Elemente sind die Eigenschaft flex, wachsen, flex Basen, flex, trinken, Flex und eine Linie selbst. Die nächsten Videos aus. Die Mädchen werden diesen Eigenschaften gewidmet sein. Dinge 5. Eigenschaft anzeigen: Hallo und herzlich willkommen zu einem neuen Video. Beginnen wir jetzt mit den Eigenschaften, die in Flex-Spots verwendet werden. Für unsere Eltern der Flex-Container, die erste übergeordnete Eigenschaft und das Wichtigste die Anzeige. Da ohne diese Eigenschaft flexibles Box-Modell angewendet werden kann. Diese übergeordnete Eigenschaft definiert einen Flex-Containerblock, sind in Zeile abhängig davon, Wert für die Eigenschaft zu geben, und aktiviert einen Flex-Kontext für die direkten Children, bekannt als Flex-Elemente. Ein Flex-Container wird durch Festlegen der Anzeigeeigenschaft deklariert, oft Element zu flex, um als Flex-Glückselement anzuzeigen, sind in Linie flex als Flex in Linienelementen angezeigt. Für dieses erste Beispiel möchte ich, dass meine Seite. Wenn ein Dieb mit dem I-d-Container identifiziert wird, wird das mein Flex-Container sein. Und innerhalb des Containers habe ich mein Hauptdif, das Textschuldenarbeit als Flex-Element erhält. Dies ist die einzige Kälte, die ich in meinem Körper Tech brauche, um einen Behälter und das Flex-Element zu erstellen . Jetzt schreibe ich mein CSS kalt in die Style-Technologie, um zu warten, dass es von der Seite verzögert wird. Der Diff-Container wird mein Flex-Container sein und der Hauptdif lenkt den Artikel ab. Wie ich bereits sagte, wenn ich mehr Flex-Elemente hinzufügen möchte, muss nur neue Diebe im Container hinzufügen, wie ich es mit dem Haupt-Dave getan habe. Innerhalb der Stil-Tech erstelle ich jetzt die Stilregel für meinen Flex-Container, wo ich die display-Eigenschaft mit value flex lege, um Container als Blockelement anzuzeigen und der Hintergrundfarbe den Wert lila zu geben. Schließlich habe ich die IKT aus dem Container mit dem Tal von 200 Pixeln definiert. Domain def ist die direkte Children und ist unser Flex-Element, wo ich die Hintergrundfarbe definiert habe. Burley war, und schließlich bei Bettwäsche und Rand Wert mit 20 Pixel und der Tauschhandel mit einem Pixel aus mit Stil einfarbig und Farbe dunkelorange wie erwartet. Der Container wird als Blockelement mit Hintergrund lila angezeigt, und Sie sehen, dass die Haupt-dif die Größe anpassen, um Inhalt zu tun, die sich im Inneren befindet. Das heißt, einer der wichtigen Standardtreiber für die Flex-Elemente, indem Sie die Flex-Box verwenden, um den Container zu einem Knie-in-Line-Element zu ändern. Ich muss nur den Wert Flex zwei In Line Flex ändern und jetzt auf unserer Seite wird der Container nicht als Block angezeigt und seine Größe an die Hauptdef anpassen. Vergessen Sie also nicht diese beiden wichtigen Werte für die Anzeigeeigenschaft flex, um ein Blockelement zu erstellen , und in Linienflex, um einen Flex in Linienelementen anzuzeigen. Vielen Dank, dass Sie dieses wichtige Video verfolgt haben. Wir sehen uns die nächste Lektion. 6. Flexbox: okay, Wir haben im vorherigen Video die Bedeutung off Display Eigenschaft gesehen. Bevor ich mit anderen Eigenschaften beginne, werde ich die nächsten Minuten bestreiten, um das Standardverhalten aus dem Container und dem Flex-Element zu kennen , so dass wir, wenn wir auf einige Situationen stoßen, verstehen, dass es nicht erwartetes Verhalten in einem Flex-Box-Modell-Layout ab jetzt mit unserer Ziege. Ich möchte nur für jetzt einen Container und das Flex-Element, das mit Hintergrundfarbe, einigen Randeinlagen und Rahmenwerten definiert ist, um diese beiden Elemente leicht zu unterscheiden. Nun, die erste Situation zu analysieren, gibt es keine mit und ich habe definiert, und ich möchte, dass die Container ein Blockelement alle mit besetzt, so dass sie als Blockelement bleiben. Zuerst definiere ich wieder die Anzeige mit Value Flex. Sie sehen, dass das Flex-Element, das gerade mit dem Textinhalt ist, wie wir in der Anzeigeeigenschaft gesehen haben . Wenn Sie mehr Text schreiben, verzichten Sie auf, wird das Flex-Element erhöht. Dies ist eine aus dem Standardverhalten, wenn Flachs-Box verwendet wird. In der zweiten Situation definiere ich nur, dass ich das Flex-Element mit dem Wert von 300 Pixeln habe. Mit diesem Wert definiert. Sie sehen, dass der Container dem Wachstum aus dem Flex-Element folgen wird. Der Container ist etwas größer als der Flex-Artikel, da ein Randwert definiert wurde . Jetzt werde ich das Gegenteil machen. Ich definiere, dass ich 300 Pixel zu meinem Container habe, und es ist sichtbar, dass sich das Flex-Element dehnt, bis das Eis vom Flex-Container . Es gibt zwei sehr wichtige Verhaltensweisen von den Flex-Elementen, die richtige Dehnung und mit schrumpfender Anpassung an den Elementinhalt abgelenkt. Das nächste Beispiel habe ich für das Flex-Element mit off 200 Pixeln definiert und weitere fünf Flex-Elemente in meinem HTML-Code hinzugefügt . Das gleiche aus insgesamt mit off sechs Flex-Elemente ist größer als die mit allen Flex-Container , die Sie Teil mit Soto besetzt. Alle Flex-Elemente werden innerhalb des Containers angezeigt. Die einzige Lösung ist, dass die Verkleinerung passt, die ein anderes Standardverhalten der Flex-Elemente schließlich im Set-Off Definer ist, wobei ich die Eigenschaft Mine mit dem gleichen Wert zum Verhalten verwende , jetzt anders ist, weil ich das Flex-Element Wert von 200 Pixel und für diese Bedingung werden sie nicht schrumpfen, wenn nötig. Was macht mit sechs Flex-Artikeln aus? Einige von ihnen bleiben außerhalb Flex-Container. Dies sind einige typische Situationen, die Sie manchmal bei der Verwendung von Containern und Flex-Elementen finden werden. Nach diesem Video wird sicherlich einfacher zu verstehen und zu identifizieren, diese Art von Verhalten in Flex-Box-Modell. Wir sehen uns das nächste Video. 7. Flexbox: Hallo, schon wieder. Es ist Zeit, eine andere übergeordnete Eigenschaft zu lernen. An dieser Stelle haben wir unseren Flex-Container und Flex-Element mit dem Container definiert und ive mine im HTML-Code . In CSS habe ich Anzeigeeigenschaft definiert, die Wert-flex empfängt, um den Container als Blockelement und in Linienflex anzuzeigen, die Container als Flex-in-Line-Element anzeigen. Wenn Sie diese Eigenschaft mit einem dieser beiden Werte festlegen, werden direkte Children's Elemente in Flex-Elemente umgewandelt . Ich werde diese Eigenschaft mit Wert flex im Mantel behalten, weil ich meinen Container als Blockelemente möchte . Jetzt ist es an der Zeit, die Action-Eigenschaft zu biegen. Was macht diese Eigenschaft lenkt ab, dass X verdienen CSS-Eigenschaft angibt. Alle Flex-Elemente werden in den Flex-Behälter platziert definieren die Hauptachsen und die Richtung, die normal oder umgekehrt sein kann. Diese Eigenschaft kann für verschiedene Situationen erstellt werden. Flex-Element angezeigt oder ärgerlich von links nach rechts und von rechts nach links und vertikal von oben nach unten und unten nach oben. Früher in meinem neuen Anwesen hatte ich in meinem neuen Anwesenzwei neue Leben im Inneren des Containers, um die Wirkung von dieser Eigenschaft besser zu sehen. Ich habe den Text für diese drei d efs geändert, um von eins zu Baum nummeriert zu werden und zu verstehen, was sich in der Richtung und Position von Flex-Elementen ändern wird. Die neuen Leafs sind wie die 1. 1 gestorben, so dass wir keinen neuen I-D-Selektor in CSS hinzufügen müssen , ich trotze einem anderen, den ich für den Container mit 400 Pixeln habe und ich möchte, dass meine Flex-Elemente mit einem off 40 Pixel jetzt Richtung lenkt, die auf unsere Flex-Behälter. Diese Eigenschaft kann F vier verschiedene Werte. Der Standardwert ist row, wobei die flexiblen Elemente horizontal als Zeile von links nach rechts angezeigt werden. Wie Sie in diesem Beispiel sehen können, dass ich in der Ziege schreibe und jetzt die Ergebnisse im Browser der zweite mögliche Wert vorhanden ist . Israel-Flüsse, die dem vorherigen Wert ähnlich ist. Aber die Flex-Elemente werden in umgekehrter Reihenfolge von rechts nach links angezeigt, und der Hauptanfang und die beabsichtigten Endpunkte werden jetzt im Vergleich mit Roe-Werten umgeschaltet. Dessertwert ist Spaltenschuld. Setzen Sie die flexiblen Elemente vertikal von oben nach unten aus dem Container und für diesen Wert Domänenzugriff ist jetzt eine vertikale von oben nach unten und Kreuzausgänge von links nach rechts. Und der endgültige Wert ist Spalte umgekehrt, dass Flex-Elemente in der Spalte wieder verschoben werden, aber in umgekehrter Reihenfolge. In dieser Situation beginnt der Hauptausgang am unteren Ende des Flexbehälters und endet oben. Das Kreuz zeigt Wachstum von links nach rechts. Okay, Sie können sehen, dass mit dieser Eigenschaft ist jetzt sehr einfach. Ändern Sie die Richtung und die umgekehrte Reihenfolge der Flex-Elemente. Was ist mit älteren CSS-Modellen nicht passiert? Und vergessen Sie nicht ein wichtiges Detail. Ändern der Richtung der Flex-Elemente wirkt sich auf den Hauptüberschuss und den Kreuzüberschuss aus. Es ist so vorerst. Wir sehen uns bald. 8. Flex: Okay, sehen wir Flex Rap Eigenschaft. An dieser Stelle erstellen wir unsere Flex-Container und Reflex-Elemente, die in verschiedene Richtungen angezeigt werden können . Verwenden der Flex-Richtung der Eigenschaft Eines der Standardverhalten von Flex-Elementen wird versucht, in eine einzelne Zeile zu passen. Ich mache jetzt eine weitere Änderung im HTML-Mantel, die zu mehr Verteidigung endet wie der vorherige Stream mein Flex-Element vier und fünf in der C s s Mantel Ich möchte definieren und 90 Pixel mit und 70 Pixel rechts, um die Größe vom Hauptdif zu halten, wenn Sie sich daran erinnern, nur mit hat das Schrumpfen der Flex-Elemente, die vor der Mine mit Eigenschaft benötigt werden, nicht gelöst. Aber es gibt kein Problem. Ich möchte jetzt, dass meine Flex-Elemente rep, wenn ich die Größe des Fensters ändere, anstatt zu verkleinern, sie werden automatisch umgebrochen, wenn die Fenstergröße gleich der Summe ist mit Flex-Elementen belegt und auf diese Weise kann ich weiterhin Eigenschaft tun. Diese Methode wird sehr für ansprechende Layouts verwendet und um diese Änderung vorzunehmen, verwende ich Flex wrapped Eigenschaft. Diese Eigenschaft gibt an, ob die flexiblen Elemente sollten unsere nicht mit drei möglichen Werten zuerst umschließen . Kein Rap. Das ist der Standardwert. Rep und Rep umgekehrt, beginnend mit dem ersten Wert, den ich innerhalb definiere, lenkt mein Container rep mit dem Wert no rep ab, der nichts in meinem Layout ändert. Wenn ich die Größe des Browserfensters ändere, bleiben die Elemente in der gleichen Zeile, wie Sie jetzt sehen können, und sie werden so verkleinern, dass sie in den Container passen. Der zweite Wert ist umschlossen, wodurch Flex-Elemente von oben nach unten in mehrere Zeilen umbrochen werden. Nach dem Ändern der Eigenschaft in Wert. Rep. Ich ändere die Größe meines Fensters und Sie sehen, dass einige Flex-Elemente umhüllen und zur nächsten Zeile gehen. Diese Eigenschaft ist sehr nützlich, wenn wir anpassen möchten, um andere Arten von Geräten wie Tablets und Smartphones zu kondensieren . Der letzte Wert ist Rap Reverse, der zum Flex von Elementen verwendet wird. Wickeln Sie in mehrere Zeilen von unten nach oben. Das erste Flex-Element, das oben beginnt, wenn ich Wert habe. Rap ist jetzt der erste Gegenstand, der von links unten aus dem Flex-Container beginnt. Wenn ich die Größe des Fensters erneut ändere, werden einige Elemente wie erwartet umgebrochen. Es ist das Ende dieser Lektion. Sehen Sie sich das nächste Video 9. Flex: welcome Flex Low ist die nächste Unterkunft zu lernen. Diese Eigenschaft ist eine scharfe als für die beiden vorherigen Eigenschaften. Flex, dass Aktion und der Flachs rep. Der Standardwert fällt für diese Eigenschaft ist Seil für Ablenkungen, dieser Aktionswert und kein Rap für Ablenkungen Rep Eigenschaft. Jetzt werde ich diese Eigenschaft hinzufügen und die Werte von Flex at Action und der Flex Trip zu Flex Flow verbunden . Ich definiere den Flexfluss mit den Werten Row und Rep, um die Flex-Elemente in rose und umwickelten Flex-Elementen anzuzeigen . Wenn ich das Fenster schrumpfen, wie Sie in einer anderen Lektion gesehen haben. Jetzt mache ich eine andere Veränderung. Anstelle der Anzeige in Zeile möchte ich in der umgekehrten Straße Flex-Elemente von rechts nach links anzeigen, also habe ich den Flexfluss mit Werten definiert. Ro umgekehrter und zweiter Wert aus Eigenschaft geändert, um Rap zu kennen. Mit diesen Werten wird der Inhalt verkleinert, wenn ich die Größe des Fensters wie erwartet ändere, im letzten Beispiel habe ich die Richtung in Spalte geändert, und ich möchte abgelenke Elemente mit Rap-Wert für flex umbrechen Rep Eigentum für diese Jungs. Stattdessen Flex-Elemente in mehrere Zeilen eingewickelt. Sie werden in mehreren Spalten wiedergeben, wie das Bild uns zeigt. Es ist so vorerst. Sehen Sie sich das nächste Video, um eine andere Immobilie einzuführen 10. Rechtfertigung: Hallo, schon wieder. Lassen Sie uns lernen, Elemente mit drei verschiedenen Eigenschaften in Flex-Container verwendet auszurichten. Beginnend mit diesem Video rechtfertigen wir Inhalte. Dies ist eine Eigenschaft, die die flexiblen Containerelemente ausrichtet, wenn dies nicht alle verfügbaren Gewürze unter verwenden , sind ärgerlich Richtung. Wie Sie in diesem Beispiel sehen, wo ich f die fünf Flex-Elemente eine Zeile nach links. Vergessen Sie nicht, dass die Flex-Elemente nicht vollständig zusammen sind, weil wir die Marge für sie definiert haben . Diese Eigenschaft hilft, diese zusätzliche freie Gewürz übrig zu teilen, wenn entweder alle Elemente auf der Leinart unflexibel abgelenkt oder sind flexibel, aber jeder ihre maximale Größe. Zuerst änderte ich mich mit einem Ich habe aus mag Gegenstände auf 50 Pixel, so dass wir etwas freien Speicherplatz in Maine überschüssige und Gras Zugang haben. Die andere Änderung ist die ID der Containertodratifizierung. Jetzt würden wir 700 Pixel. Nun sind die möglichen Werte dieser Eigenschaft als fünf Werte, bei denen der Standard flex start ist die die Elemente setzt, positionieren Sie es am Anfang aus dem Container. Ich lege jetzt die Eigenschaft mit diesem Wert und ist sichtbar, dass es keine Änderungen gibt, da dies der Standardwert ist, der jetzt den Ausrichtungsinhalt ändert, um zu flexen und die Elemente an das Ende des Containers zu platzieren . Wie Sie jetzt im Browserfenster Flex sehen, starten Sie Elemente auf der linken Seite, aus dem Container und mit Flex und die Elemente nach rechts verschoben. Der nächste Schritt besteht darin, die Elemente spect bündig zueinander in Richtung der Mitte des Linien-Containers entlang des Hauptzugriffs zu positionieren . Um diese Ausrichtung zu erhalten, muss ich der Eigenschaft das Wertezentrum geben, Inhalt rechtfertigen und danach sind diese Änderungen im Layout in meinem Bruder sichtbar. Diese Position zwischen ist ein weiterer möglicher Wert für diese Eigenschaft, und Elemente werden gleichmäßig in der Zeile verteilt. Das erste Element befindet sich auf der Startzeile und damit der letzte Wert Raum in der Endlinie ist sehr ähnlich, wie zwischen den Gewürzen, aber jetzt Gewürz vor dem ersten und nach dem letzten Element gleich aus dem Abstand zwischen den einzelnen Paaren ist. Off edge ist keine Elemente, die die Brüder zeigen, jetzt sind alle Ablenkungselemente innerhalb des weiter mit diesem Wert. Jetzt, da wir alle fünf verschiedenen Situationen gesehen haben, erstelle ich eine andere Disposition, die die Elemente in Spalten mit der Eigenschaft anzeigt. Flexrichtung mit Value Column für die Verkleidung des Domänenzugriffs ändert sich von horizontal zu vertikal. Also, wenn ich Valley Flex gebe, beginnen Sie, Inhalte, Eigenschaften und Flex-Elemente eine Linie entlang des vertikalen Flex-Startes zu rechtfertigen , machen Sie die Elemente auf der Oberseite des Containers gesichert . Und wenn ich mich zu Flex ändere und die Gegenstände am Boden des Behälters bleiben, ist das alles vorerst. Sehen Sie sich die nächste Lektion mit einer Positionseigenschaft. 11. Elemente anpassen: Okay, es ist Zeit, Artikel auszurichten, Immobilien Deal Einzelposten. Eigenschaft definiert den gesamten Browser. Verteilen Sie Gewürz zwischen und um Flex-Elemente entlang des Gras Zugang. Dies bedeutet, dass es wie Rechtfertigungsinhalt funktioniert, aber in vertikaler Richtung. Wenn lex-Elemente horizontal angezeigt werden, diese Eigenschaft als fünf Werte, wobei die Standard-e gestreckt, die bewirkt, dass Elemente gestreckt werden, wobei die mit und der Eid-Wert respektiert werden, wenn sie für die dif definiert sind Um den Unterschied zu sehen zwischen einem div, das wir konfiguriert hatten, neige ich mit und anderen ohne diese Eigenschaften, ich gebe ich d Maine eins zu meinem ersten dif und lösche mit einer ID für den CSS-Code für den einzelnen Urlaub, den wir jetzt sehen, wie erwartet, dass das erste def wird gestreckt, ohne eine ausgerichtete Eigenschaft zu verwenden. Nun, da ich diese Änderung habe, dann werde ich die Eigenschaftszeilenelemente mit dem Wert setzen, der das erste Flex-Element ohne Wert gestreckt hat, noch gestreckt wird und mit wertvoller Anpassung an die Größe des schwierigen Zeltes tun , das erwartet wird, wenn diese beiden Werte sind nicht definiert. Schließlich, wenn ich den ICT-Wert in meinem Hauptdif entferne, was passiert? Alle Kinder innerhalb des Containers werden sich wie erwartet dehnen Jetzt kehre ich wieder zurück ich Werte und beleuchtete Haupt Wenn ich d für die nächste Situation habe, schreibe ich zusammen für Werte aus der Positionseigenschaft. Ich werde einen anderen Ansatz verwenden, der den Selektor und das Kind verwendet, mit dem verschiedene Eigenschaftswerte zugewiesen werden können . Auswählen auf Lee die Kinder, die ich will. Ich möchte für Verkleidung, um Kinder einen Eintrag mit I D Maine ICT aus 20 Pixel zu geben und IKT mit 40 Pixeln auszurichten. Um diesen Effekt zu erzeugen, möchte ich mit I D Maine für mein Element regieren. Ich wähle einfach das erste Kind aus. Mit einem Kind mit Tal eins und Kind drei wieder und Kind mit Wert Baum. Jetzt weiß ich, dass der Code, den ich schreibe, Onley Stil für Kinder ändern Wenn Eintrag definiere ich bei 20 Pixel, rechts und Zeile ICT aus 40 Pixel zurück, um Elemente nach dem Flex-Element Stretch auszurichten Da die es nicht definiert ist, Ich zeige Ihnen einen anderen möglichen Wert. Ich gebe den Flex-Startwert für Eigenschaftsausrichtungselemente und die Flex-Elemente positionieren sie jetzt am Anfang des Containers mit I definiert. Wenn Sie Strecken oder Flex verwenden, ist dieser Wert dilly out für beide Fälle gleich, die sich jetzt ändern . Eigenschaft zu flex und wir sehen eine andere Situation mit Wert flex, und wir bekommen das Gegenteil mit Elementen. Positionieren Sie es am Ende des Behälters. Der nächste Wert, in dem dieser Mittelpunkt mit dem Wertmittelpunkt eingefügt werden soll, lenkt ab. Elemente sind zentral innerhalb der Linie auf dem Kreuzüberschuss, und der letzte Wert ist Baseline, wo Abbiegeelemente entlang ihres Inhalts ausgerichtet sind. Grundlinie. Ich erstelle zuvor eine andere Zeile ICT und mit Basiswert. Sie sehen, dass Ablenkungselemente nun am Textinhalt ausgerichtet sind. Baseline selbst für den Moment. Wir sehen uns die nächste Lektion. 12. Inhalte anpassen: Hallo und willkommen Sie haben im vorherigen Video gesehen tun Eigenschaft Linie Elemente, die Raum zwischen und um Flex-Elemente entlang des Kreuzzugriffs von ihrem Container verteilen . Und jetzt hatten wir signiert, um Inhalt dieser neuen Eigenschaftenzeilen von Flex-Container-Linien innerhalb auszurichten wenn es zusätzlichen Platz im Kreuz gibt. Zugriff ähnlich wie unsere Rechtfertigung Inhalte, richtet einzelne Elemente innerhalb des Domänenzugriffs aus, bevor Sie beginnen, die verschiedenen Werte anzuzeigen. Ich mache nur ein paar Änderungen im Mantel. Putting mehr für gibt im Inneren des Behälters. Dieser Def Zusatz ist meine zwei F Mark als ein Seil und Onley. Auf diese Weise können wir die Wirkung dieser Eigenschaft in den Flags Elemente sehen, die ich jetzt mache. Änderungen in der CSS genannt geben 60 Pixel, um Elemente mit Next zu flexen. Ich habe die Eigenschaft Flags Rap mit Value Rap definiert, um zu verstehen, wie diese Eigenschaft funktioniert, wenn die Flex-Elemente in mehrere Golden eingewickelt sind. Jetzt, da ich die Änderung vorgenommen habe, werde ich mit Werten aus der Line-Content-Eigenschaft beginnen. Der erste mögliche Wert für diese Eigenschaft ist der Standardwert gestreckt, der die Linie dehnt, um den verbleibenden Platz zu beanspruchen, wie es jetzt im Browser sichtbar ist. Dieses Verhalten ist es nur möglich, weil ich nicht definiert habe, dass ich Elemente ableitet, die sich jetzt ändern, um diesen Wert zu kennzeichnen, macht die Lüge. Überprüfen Sie bis zum Start des Behälters. Wie Sie jetzt sehen, lenkt das Anpassen Elemente ab, würde ich auf den Inhalt von den Flex-Elementen. Der nächste Wert ist flex, und das ist ähnlich mit flak start. Aber jetzt sind die Zeilen am Ende des Containers gepackt, wie es im rechten Fenster sichtbar ist. Es gibt jetzt in drei Tälern für diese Eigenschaft First Values Center, das die Lüge in die Mitte des Containers inspiziert. Der nächste ist der Abstand zwischen dem Wert, wobei Linien gleichmäßig verteilt sind und die erste Zeile am Anfang des Containers steht. Wild letzte ist am Ende des Containers, und schließlich ist der letzte Wert Raum, um den die Linien gleichmäßig verteilt werden mit gleichem Raum um jede Zeile. Sie sehen jetzt auf dem Bild alle unsere Ablenkungen Artikel sind online. Mit diesem Wert an die Eigenschaft ausrichten Container, es ist die End-Of-Eltern-Eigenschaft. In den nächsten Videos zeige ich Ihnen die Eigenschaften für den Kinderdanke 13. Order: I Lassen Sie uns erste Eigenschaft lernen, die direkt auf einzelne Flex-Elemente angewendet werden kann. Die Bestelleigenschaft. Die Order-Eigenschaft wird verwendet, um die Reihenfolge zu steuern, in der Flex-Elemente innerhalb des Flex-Containers angezeigt werden. Was in älteren CSS-Versionen nicht passiert, wenn andere Arten von Eigenschaften verwendet werden, wie die Position in Floats, um die Position von einigen Elementen zu ändern, die standardmäßig zu Flex-Elementen und Sortiereigenschaft zurückkehren , werden sie wie ursprünglich in der Flex-Behälter. Wenn Sie den HTML-Code schreiben, der große Vorteil dieser Eigenschaft darin, dass Flex-Elemente neu anordnen können, Sie den Eigenschaftswert durch eine Zahl ändern, ohne die HTML-Kälte zu ändern. Ich ändere jetzt meinen Mantel zu f nur Baum Deif s Flex-Elemente, die f mit einem dachte ich 70 Pixel . Diese Baumblätter erhalten die andere Eigenschaft, um die Reihenfolge von den Flex-Elementen zu ändern Um ein Auftragswert Bild main dif zu erstellen, verwende ich anti child selector, um die Behandlung auszuwählen, beefs Elemente und geben individuell Wert toe order Eigenschaft. Also habe ich jetzt in CSS mein erstes Kind mit i d meins definiert, das das Endkind mit dem Wert eins verwendet und ich wiederhole den Prozess zur anderen Verteidigung mit Wert für den Eintrag füreinander. Und jetzt ist es möglich, den Bestellwert für jedes Kind zu schreiben, das ich die Reihenfolge für das erste Kind mit dem Wert drei weit zweiten untergeordneten Wert in und schließlich den letzten untergeordneten Wert einsdefiniert erste Kind mit dem Wert drei weit zweiten untergeordneten Wert in und schließlich den letzten untergeordneten Wert eins . Was wird passieren? Zweiter Flex-Artikel, Halten Sie die Position und das erste und bestimmte Flex-Element geschaltet. Jetzt machen wir eine weitere Änderung. Ich will, dass meine zweite Devette übrig bleibt. Also gebe ich Ordnung mit Wert eins das erste ursprüngliche dif, das ich in der Mitte möchte. Der Bestellwert ist also, durchsetzungsfähige bleibt auf der rechten Seite wie im Anfangsgrund, warum ich Wertbaum zur Ordnung gebe. Wenn Sie mehr Dips hinzufügen möchten, ist es sehr einfach. Muss nur in HTML-Code und in CSS haben, machen Sie einfach eine Kopie von der Anti-Kind-Kälte und geben Sie das Ordertal Deve innerhalb des Containers zu positionieren. Vergessen Sie nicht und denken Sie daran, dass die Verwendung dieser Eigenschaft ist der einfachste und schnellste Weg , um die Reihenfolge von der Dave zu ändern. - Danke. Sehen Sie sich das nächste Video 14. Flex wachsen: die nächste Eigenschaft ist Flex wachsen. Diese Eigenschaft gibt den Flex-Girl-Faktor an, der Lex-Element definiert, wie stark das Flex-Element im Zusammenhang mit dem Rest der Flex-Elemente wachsen wird, die sich innerhalb des Flex-Containers befinden . Wenn das freie Gewürz mit dem gleichen Flex Grow Wert Bild Flex Element zu machen verteilt wird, haben alle Elemente die gleiche Größe in Container vierties neue Eigenschaft gewandert. Ich zeige Ihnen zwei verschiedene Situationen in der ersten. Ich habe nicht den Witz definieren für drei geschaffene Geschenke, also habe ich alle Flex-Artikel mit den gleichen Bedingungen. Das Standardverhalten von den Flex-Elementen besteht darin, es anzupassen, wenn der Inhalt aus dem Element also , wie erwartet, den echten Drink gemacht hat, wie Sie jetzt im Bild sehen können, indem Sie jetzt zu Flex wachsen Eigenschaft für die Baumblätter erstellen . Mit dem End Child-Selektor gebe ich dem Tal eins zu Kind eins zu und Baum. Sie sehen, dass die Flex-Elemente ihre Größe gleichmäßig erhöhen, bis sie das ganze Gewürz fühlen . In dieser Situation, wenn wir einen anfänglichen gleichwertigen Gesamtwert Flex-Elemente verwenden, wird der Witz für jeden Gegenstand der entsprechenden Zehe gleich sein, sobald er jedem Flex-Gegenstand vom Gratis-Gewürz serviert wird . Es gibt ein Detail, das wichtig ist, in einem Fall zu verstehen, dass die anfängliche mit gleich ist . Verwenden der Flex-Rolle mit dem gleichen Wert. Machen Sie mit wachsen im gleichen Verhältnis für den Baum. Deif ist so, wie erwartet, das Finale mit immer noch dem gleichen. Und wenn ich eine andere Initiale mit Geben Sie ein Mit off 200 Pixel für das erste Kind und 50 Pixel zu den anderen mit der gleichen Flex-Zeilennummer definiert , ist die Verteilung des Lifting-Gewürzes gleich Alternativen. So am letzten Tag erinnert man die größte. Wenn dies eine andere Situation als die vorherige Situation ist, in der das Finale mit gleich ist , lassen Sie uns jetzt ein Szenario machen, in dem die Anfangsbuchstabe mit für die drei d EFS gleich ist. Ich möchte einen der Children Wert geben, um sich zu beugen, wachsen und die anderen zu machen. Was macht, dass das Kind fühlt sich doppelt von der freien Gewürz in Bezug auf die anderen. Um die Berechnung aus der freien Würze, die jedes D Gefühl, müssen nur alle einzelnen Flex wachsen Werte senden und dann nur individuell das Verhältnis zwischen jedem einzelnen Flex wachsen und Sam, das Sie zuerst finden. Also für den Vertrag gibt Weizen Flex wachsen zu eins und eins. Sie erhalten für den ersten dif, um den freien Raum zu furzen, um das Gefühl, dass entspricht off off off off off the free Gewürz. Die zweite Antwort wird besetzen, wenn Fort aus dem Free Spice. Stellen Sie sich eine Situation vor, dass wir das erste Element mit 100 Pixeln und die anderen mit 50 Pixeln ausstrahlen. Wenn ich die Rollenwerte auf 11 und zum Beispiel ist die freie mit 800 Pixel. Das Finale mit off flex Element eins ist 100 Pixel hinzugefügt mit off die 800 Pixel. Schulden als Endergebnis, off 500 Pixel und die andere zu Flex-Elemente mit ist 50 Pixel. Bearbeiten Sie mit 1/4 von 800 Pixeln, die in den letzten 250 Pixeln ist. Das letzte Beispiel. Ich gebe Valley Tree für den ersten dif und bis zu den Sekunden schließlich, Wüste bleiben mit Wert eins. Der erste Flex-Artikel fühlen 36 Schulden entspricht aus dem freien Gewürz, das zweite D-Feld auf sechs aus dem Free Spice und das letzte d Gefühl 16 aus dem Free Spice I Ope. Es ist jetzt klar, dass all diese Eigenschaft Dinge funktioniert. 15. Flex: Wieder willkommen. Es ist Zeit, die Eigenschaft schrumpfen zu biegen. Diese Eigenschaft erhält einen Wert, der den Flex-Verkleinerungsfaktor angibt , der definiert, wie viel zu flex Item im Zusammenhang mit den restlichen Flex-Elementen verkleinert werden soll. Durch den Fehler können alle Flex-Elemente verkleinert werden, aber wenn wir es auf Null setzen, behalten sie die ursprüngliche Größe bei. Für dieses erste Beispiel definiere ich einen Container mit 500 Pixeln und könnte Elemente mit einer Woche von 300 Pixeln reflektieren, und ich möchte einen Wert von Null zu meiner Flex-Schrumpfeigenschaft, die die ursprünglichen Werte ausmacht die Flex-Elemente nicht ändern . So wie erwartet mit diesem Wert ablenkt, Elemente überlaufen den Container, weil die einige dieser Reflexelemente größer als der Container sind , mit dem nächsten Schritt geändert wird. Die Flex Shrink Valley Toe eins, die der Standardwert ist, und ich wende mich für diese Reflexelemente an. Was macht sie dazu, auf die gleiche Weise zu schrumpfen, um den Behälter zu passen? Weil wir den gleichen Schrumpfwert haben. Wie viel höher wird dem Flex-Element ein Verkleinerungswert zugewiesen? Der kleinere Umlenkungsgegenstand wird sein. Dies ist das Beispiel, das ich jetzt tun möchte, wo ich meine Faxelemente mit Wertebaum definiert habe und eines für die Flex-Schrumpfeigenschaft im Browser sichtbar ist. Diese Ablenkungsschrumpfung mit Wert Tree wird machen, dass der entsprechende Flex-Artikel der kleinste sein wird und Flex-Schrumpfen mit Valley One wird dieses entsprechende Flex-Element das größte U f im Cars Curriculum schlagen Eine zusätzliche Ressource, die Ihnen zeigt, , um mit Werten aus den Flex-Elementen entsprechend dem Wert off flex, wachsen und flex Drink Vergessen Sie nicht, dieses Dokument zu sehen, um unsere Berechnung zu verstehen . Wir sehen uns das nächste Video Danke. 16. Flex: Die nächste Eigenschaft, die angezeigt werden soll, ist Flex kauft, ist diese Eigenschaft die gleichen Werte wie sie. Dann würde ich Eigenschaften und gibt die anfängliche Hauptgröße aus dem Flex-Element an, bevor Free Spice verteilt wird. Entsprechend den Flex-Faktoren kann diese Eigenschaft eine Zahl erhalten, die das Land aus angibt. Das Flex-Element, das ich für das nächste Beispiel verwende, das ich Flex kauft, ist vom ersten Flex-Element , einem Wert aus, wenn 100 Pixel, das zweite Flex-Element, 70 Pixel und die Welle 50 Pixel. Und im Browser sehen wir diese Änderungen in den verschiedenen Deifs. Ein wichtiger Hinweis ist, dass, wenn ich die Richtung von der Straße ändere, um ihn mit der Flex-Richtungseigenschaft im Container anzurufen , diese Eigenschaft wirkt sich auf die IKT anstelle von mit aus, wie wir jetzt im Bild sehen können. Der andere Wert, den die Eigenschaft erhält, ist der Wert „outer“. Das heißt, der Standardwert ohne einen Wert zu tun, ist in der Lage, den für das Element definierten Witz. Wenn der Artikel nicht gut definiert ist, wird der Weizen nach seinem Inhalt ändern jetzt das Tal, um aus für Reflex durch diese Eigenschaften, sehen wir Tod mit allen Fakten. Der Artikel ist 70 Pixel. Das ist der Wert, der in meinem i d Selektor main definiert ist. Schließlich, wenn ich diesen Wert lösche und den Wert Auto Inflect schrumpfen, werden die Flex-Elemente schrumpfen und sich an seinen Inhalt anpassen, weil es nicht gut definiert ist, das ist alles für den Moment. Wir sehen uns die nächste Lektion. 17. Flex: Ok. Die Flex-Eigenschaft ist die scharfe 10 für die Flex, Grow, Flex, Schrumpfen und Flex Durch diese Eigenschaften sind die zweiten Wendeperimeter, Flex, Flex, Drink und Flex Voreinstellungen optional. Ich führe die nächsten Minuten für mögliche Werte für diese Eigenschaft ein. Wenn diese Option deaktiviert ist, sind die gebräuchlichsten Werte für diese Eigenschaft flex gleich null alto. Das ist das gleiche wie flex mit dem Wert initial und dem short und für den Standardwert flex zero zu flex, wachsen. Möchten Sie Flex Shrink und Alto to Flex Basen, deren Größe das Element auf Do with I have Eigenschaften oder Flex-Elementinhalt basiert , wenn diese Täler nicht festgelegt sind? Wenn ich für die 400 Pixel dieses Kerls ohne Witz für diese Reflexobjekte definiert habe, übersteigt die Summe den mit Container. Aber mit Wert initial off flex Eigenschaft, werden die Elemente versuchen, den Container zu füttern. Wie Sie jetzt sehen können. Schließlich, wenn ich den Flex-Artikel ändere, würden wir Zehe 100 Pixel. Sie sehen, dass Flex-Elemente nicht wachsen und Respekt definieren wir, weil Flex Rowe Eigenschaft als Wert Null anderer möglicher Wert wird flex 211 alto gesetzt, die dasselbe ist wie das Festlegen der Eigenschaft flex mit dem Wert auto diese Kombination von Werten Größen die Elemente basierend auf seiner mit beiden Eigenschaften, aber macht es vollständig flexibel, so dass sie jeden zusätzlichen Platz entlang des Hauptzugriffs für die letzten Beispiele beobachtet haben , wo ich mit 2 100 Pixeln geändert habe, werde ich ein anderes Ergebnis erhalten, und jetzt wird das Flex-Element die Rest der mit aus dem Container mit diesem Kerl. Die Flex-Elemente verkleinern sich, wenn sie überlaufen. Und wenn ich nur flex mit dem Wert alto zum ersten Kind und den anderen mit dem Wert initial okay für das Szenario definiert habe, child to entry. Halten Sie die Unkrautgröße und das erste Kind sperren wir es durch den Rest vom freien Platz aus dem Behälter. Jetzt flex mit dem Wert in ist das äquivalent zu flex 00 auto. Größe ist das Element gemäß seinen With und I Eigenschaften, macht es aber voll und flexibel. Dies ist ähnlich zu flex mit dem Wert initial, außer dass es nicht erlaubt ist, selbst in einer über vollen Situation zu schrumpfen wieder zu Situationen zuerst mit off 300 Pixel angezeigt wird, es ist sichtbar, dass die Flex-Elemente nicht mit den Flex-Elementen verkleinern Überlast ändert sich von 300 auf 75 Pixel. Die Flex-Artikel wachsen nicht, um die ganze Breite aus dem Behälter zu fühlen. Es ist jetzt sichtbar. Dieses Szenario auf der Seite der letzte Wert ist Wendy Flex Eigenschaft. Wenn ein positiver Wert zugewiesen wird, ist es ähnlich, dass diese positive Zahl als Flex-Zeilenwert verwendet wird. Flex schrumpfen mit Tal eins und Flex kauft ist mit Wert Null. Diese Situation macht das Flex-Element flexibel und setzt die Basis auf Null, was zu einem Element führt, das den angegebenen Anteil vom verbleibenden Speicherplatz erhält. Wenn alle Elemente im Flex-Container dieses Muster verwendet haben, sind ihre Größen proportional zum angegebenen Flex-Faktor. Ich benutze jetzt kaum eins für die Tree Flex Elemente. Und wie erwartet, erhöhen die Flex-Elemente ihre Größe gleichmäßig, bis sie alle das Gewürz fühlen, da der Wert der Flex-Eigenschaft gleich den Baumelementen ist. Ähnliche Situation Wenn wir die Flex wachsen Eigenschaft angewendet Vielen Dank und sehen Sie im nächsten Video 18. Selbstjustierung: jetzt die endgültige Flex-Artikel Eigenschaft Deal Zeilen selbst begeistert, sales Eigenschaft gibt die Ausrichtung für das ausgewählte Element Innerhalb des flexiblen Containers diese Eigenschaft ermöglicht, die Positionen zu überschreiben, die Sie in einer anderen Ansicht gesehen haben, das ist ein Eigenschaft angewendet, um Flex-Container und nicht Flex-Elemente und definiert alle Browser verteilen Gewürz zwischen und um Flex-Elemente entlang des Kreuzüberschusses von ihrem Container, wobei die gleichen Typen verwendet werden, die mit dem Licht selbst verwendet werden. Im nächsten Beispiel, das ich jetzt zeige, habe ich meinen Container, in dem ich eine Eigenschaft definiere, die wir ein Zeilenelement definieren würden, das das Element an den oberen Rand des Containers legt. Wie Sie in einem anderen Kapitel gesehen haben. Ich habe zuvor gesagt, dass die Zeile selbst die Positionseigenschaft überschreibt. Also, wenn ich diese Eigenschaft mit dem Wert Flix Ende für mein Flex-Element eins definiert habe. Ich ändere diese Flex-Artikel bis zum Ende des Containers. diese Wertschulden akzeptieren, überschreiben Sie den Wert des leichten Postens im Container. Die anderen Flex-Elemente bleiben an der gleichen Stelle wie erwartet. Es gibt mehr für Eigenschaften verwendet. Flex beginnt in der Mitte an seiner Linie und gestreckt. Das ist der Standardwert, den ich zum Wertezentrum wechseln werde, und im Browser wird das Element zentriert, wie das Bild zeigt. Jetzt werde ich die Elemente drücken, um zu flexen und eine Zeile zu verwenden, und Sie sehen, dass sich das Element spiegelt, das in der Mitte befindet, ändert sich nicht wie erwartet. Dies ist nur eine Eigenschaft, die stattdessen die Ausrichtung auf alle Elemente erstellt, die die Änderung auf ein bestimmtes Element angewendet hat, das in bestimmten Fällen nützlich sein kann, abhängig von dem Layout, das Sie in Ihrer Seite möchten. Dies war die weniger Flex-Elementeigenschaft in den folgenden Videos. Lassen Sie uns lernen, wirklich Layouts und deren Inhalt zu erstellen. 19. Der Grail: Hallo und herzlich willkommen für diesen neuen Abschnitt. Und nachdem ich die Flex-Box-Eigenschaften gelernt habe, möchte ich zuerst das erste Layout mit dem Flex-Box-Modell erstellen, das sogenannte Holy Grail-Layout mit zwei verschiedenen Methoden. Das ist eine gute Erfahrung, um die große Dynamik und die verschiedenen Wege zu verstehen, die dieses Modell verlangt hat. Gebäude-Layouts. Nachdem ich die beiden Methoden verwendet habe, werde ich den Inhalt der Seite erstellen, um die Erstellung von einer Webseite zu machen. Schulden können für die reale Welt verwendet werden, nachdem erstellen nur groß aus. Ich werde eine fortschrittliche Technik zeigen, die eine große Layout-Vielseitigkeit ermöglicht. Wir sehen uns die nächste Lektion. 20. Heiliger Grail – erste Methode: Beginnen wir also mit dem einzigen grauen Layout. Das einzige Kornlayout ist eine Seite mit den anderen Fußzeileneingabespalten mit gleich Ich habe, wo die mittlere Spalte den Hauptinhalt enthält und die linke und rechte Spalte andere Art von Inhalten enthalten , wie es unsere Navigationsmenüs sind. Um das einzige große Layout zu erstellen, habe ich zwei Methoden verwendet, zuerst die andere und die Nahrung verwendet, um Elemente unabhängig von den verbleibenden Inhalten zu blockieren , die mit dem Flex Mozz Modell erstellt werden. Sie sehen in diesem Bild diese Situation. Wir blockieren Elemente zusammen oben und Fußzeile am unteren Rand. Ein Flex-Container wird verwendet, um zu Baum-Center-Elemente zu gruppieren, die jetzt sichtbar sind Elemente möglicherweise Reflex-Elemente sein werden, beginnend mit HTML-Code für die erste Methode. Ich füge meine andere Verwendung zu anderen Technologien ein, und ich kann meine Fußzeile bereits mit der Frucht er Tech setzen. Wir haben diese beiden Elemente, eines, das oben und das andere unten bleiben wird. Zwischen diesen beiden Elementen möchte ich drei neue Abschnitte erstellen, die 1. 1 mit den Navigationslinks, wo ich in F-Tag einen Abschnitt mit dem Hauptinhalt von der Seite verwendet habe, wo ich den Tech-Artikel verwendet habe und an den Rechten könnte asides nehmen. Diese Baumteile werden in einer einzigen Zeile angeordnet, die ich in eine div Schulden stelle, die ich erstelle, die ich Container aufrufe und als mein Flex-Container arbeite. Also im Inneren meines Containers habe ich meine Baumflex-Elemente, den Tod, den ich bereits im Coat Nev-Artikel erstellt habe und abgesehen von nun an den CSS-Code. Ich werde mit der Definition des Stils für meine Mutter beginnen, die eine gesammelte blaue Hintergrundfarbe geben, und ich tat es. Es würde 15% auf meine Ansichtsteile belegen, die wir bereits im Browser dieses Element sehen, das das gesamte mit jetzt den Fußzeilenelementen besetzt, die dem anderen ähnlich sind. Ich gebe ihm nur eine andere Hintergrundfarbe, um zwischen ihnen unterscheiden zu können. Der Eid-Wert ist gleich dem Wert, den ich dem anderen gegeben habe, und jetzt können wir die beiden Elemente unterscheiden, wie Sie sehen können, um zu beenden. Und jetzt, da ich die beiden Elemente Ersteller habe, habe ich die Kälte optimiert, indem ich eine eindeutige Regel für andere und Fußzeile mit der gleichen Hintergrundfarbe erstellt. Der nächste Schritt besteht darin, Container-Stil für die Situation zu erstellen. Ich erstelle meinen Klassenselektor-Container, den Onley die Anzeigeeigenschaft mit dem deflects-Wert erhält , der direkte Children ermöglicht, zu handeln, der Elemente standardmäßig auswählt. Abschrägungen Elemente werden in Zeilen angeordnet. Das ist die Richtung, die ich verwenden möchte, damit wir keine Defekte verwenden müssen. Richtung, Eigentum. Lasst uns nun diese Reflex-Elemente auf der linken und rechten Seite bauen. Wir haben die Navigationslinks und Element eine Größe wie die anderen und Essen besetzen jeden von ihnen. 15% des Betrachtungsteils der Neff und die Seite belegen die verbleibende IKT bis die 100% als Hintergrundfarbe. Ich definiere dunkelgrau, und ich verwende Flex-Eigenschaft mit Valley eins, um auf Weizenanteil zu setzen. Das heißt, zwei Gegenstände besetzen. Jetzt, da wir die nie und beiseite Elemente haben, müssen wir den Artikel erstellen, der auch 70% Rabatt auf den Ansichtsteil einnehmen wird , für den ich eine Ellis blaue Hintergrundfarbe geben werde definiert schließlich das Verhältnis von der mit besetzt und da ich dies will Element viermal mehr Gewürz als die vorherigen beiden zu besetzen, nie innerhalb werde ich Wert für die Flex-Eigenschaft zuweisen. Wir haben nun die erste Angelegenheit abgeschlossen, um dieses Layout zu erstellen, denkt 21. Heiliger Grail – zweite Methode: also lasst uns jetzt mit der zweiten Methode beginnen. Der Unterschied zum vorherigen besteht darin, dass ich einen Flex-Container verwende, der drei Elemente enthält , einschließlich der anderen und der Fußzeile, die jetzt im Bild sichtbar ist, wird der zuvor erstellte Code für diese neuen Dinge nur verwendet notwendig, einige neue Kälte zu schaffen. Für diesen Fall bin ich zu meinem HTML-Mantel ein div mit Klassennamen Main David, das alle Elemente im CSS enthält . Ich definierte den Stil für das Glas Maine, wo dieses Mal möchte ich Flex-Container zu besetzen 90% aus dem Witz. Also für die Situation, ich will nicht, dass Weizen das ganze Gewürz besetzt und dass der Behälter zentristisch ist. Ich habe die Margin-Eigenschaft mit den Werten Null und Auto zu beenden definiert. Und wie üblich, sagte ich, um die Eigenschaft anzuzeigen, um zu biegen. Und jetzt werden meine Flex-Elemente zusammen mein dif mit Klassennamencontainer und meine Fußzeile sein, in der alle diese Elemente in einer Spalte angeordnet sind. Grund, warum ich sagte, dass die Eigenschaft diese Aktion mit dem Spaltenwert flexe. Das verbleibende Gold wird das gleiche sein, weil ich weiterhin einen Flex-Container habe, bereits zuvor existierte, mit der ersten Methode Container de Test, drei Elemente in einer einzigen Zeile Neff Artikel und die Seitenelemente. Die zweite Methode ist jetzt abgeschlossen, und ich werde es verwenden, um Layout-Inhalte zu erstellen, Dinge. 22. Holy Gril Layout – Erstellen von header: Lassen Sie uns jetzt zum besten Teil, um für unseren Pitch zu kämpfen, beginnend mit dem anderen ersten, Ich zeige Ihnen ein Gesamtbild aus dem Endlich heraus. Ich möchte eine Seite Schulden entwerfen. Präsentieren Sie einige Informationen von einem Unternehmen, das Cloud-Server für Benutzer bereitstellt. Lassen Sie uns jetzt ausführlich über jeden Teil der Brücke sprechen, beginnend mit dem anderen. Ich möchte, dass dis-Element jemals Seite Lago platziert auf der linken Seite, der anderen und, in der rechten Seite, ein Facebook-Symbol mit den in der rechten Seite, nächsten Followern, wo wir jede Perle auf der Facebook-Seite erstellen können. Um diese Änderungen vorzunehmen, erstelle ich innerhalb der anderen Technologie und du dif mit Klassennamenlogo für mein Logo und ein anderes div mit Klassennamen Gesicht, das ein div mit Namen, Gesicht, Bild und einem anderen enthält Gesicht, . Wir würden einen Gesichtstext für den Facebook Lago und einen anderen für den Text nennen, den Sie jetzt im Browser sehen . Diese Elemente in anderen platziert durch Text, den ich in den Blättern geschrieben, identifiziert. Die erste Änderung, die in CSS vorgenommen werden soll, besteht darin, in der anderen die Anzeigeeigenschaft mit dem Wert flex zu definieren, da dieses Element Flecks enthalten wird, Elemente, die Bild und Text erhalten, wie ich Logo auf der Seite auf der linken Seite hinzufügen möchte und das Bild und Text im Zusammenhang mit Facebook auf der rechten Seite, habe ich den Inhalt mit dem Wert Gewürz zwischen dem Setzen der Elemente, die links und rechts aus dem Flex-Container. Ich werde anfangen, die Ziege für meine Flex-Elemente zu entwickeln, die in den anderen sind. Das Logo Deve Wilson enthielt die länger von der Seite, für die ich mit off 200 Pixel gesetzt und ich würde 90 Pixel. Dann erstelle ich das Gold für meine Klassenwähler fais. Das wird das andere Flex-Element innerhalb des anderen sein. Erstens enthält es die Eigenschaft anzuzeigen, der ich den Flex-Wert geben werde, da Item nicht mag auch als Flex-Container funktioniert, weil ich flexible Elemente darin haben muss , eine für das Facebook-Bild und eine andere für den Text, um diese Elemente mit etwas Platz am rechten Rand zu platzieren. Ich definiere den Rand rechts mit dem Wert von 50 Pixeln und verwende die Eigenschaft Align-Elemente mit dem Mittelwert, so dass, um Elemente definiert unsere zentrale und die Linien, Ich werde jetzt den Stil für die zu Flex-Elemente erstellen. Möchten Sie Bild und andere Texte für die Gesichtsbildklasse erhalten, sagte ich die Flex-Eigenschaft mit der Valley eins und für die Klasse Gesichtstext verwende ich wieder. Die Flex-Eigenschaft, diesmal mit der Wertestruktur mit dem Flex-Element belegt, das Text empfängt, dreimal größer als das Flex-Element, das das Bild empfängt. Der nächste Schritt besteht darin, in meinem Mantel die Bilder und Texte zu definieren, die in den anderen von der Seite gesetzt . Zuerst in der Tiefe, definiert mit Glaslogo, betrat ich das Lago Bild mit dem E M G tec innerhalb des dif mit dem Glasbild. Ich platziere dieses Mal ein neues Bild mit dem Namen Facebook Emit, das genau wie das vorherige im Hauptverzeichnis gespeichert wird . Schließlich lege ich die dext folgen uns in den deface-Text. Die letzte Aktion ist definiert mit, und ich würde für die beiden platzierten Bilder. Zuerst habe ich den Stil für das Bild definiert, das in Lage live mit einem mit off 150 Pixel und Licht aus 90 Pixel ist. Dann erstelle ich die Werte für mein Bild, das sich innerhalb des dif fais Bildes mit dem mit befindet und ich habe 40 Pixel entfernt. Wir schließlich, wenn unsere anderen durch die verschiedenen Elemente komponiert, sehen Sie nächste Lektion 23. Holy Gril Layout – Gestalte Navigation: Nachdem wir unseren Äther erstellt haben, werde ich Navigationslinks entwickeln, die auf der linken Seite der Basis platziert sind, wo wir Neff Tech für diese Situation verwenden . Ich erstelle innerhalb dieses Elements und Sie leben mit der Klasse Neve Link, wo ich meine am wenigsten Links mit einer Liste in der Reihenfolge mit drei kleinsten Elementen erstelle, die meinen Navigationslinks entsprechen. Die erste mit dem Namen eigenen, die zweite, die ich Projekte nenne. Und schließlich entwickelt der Kontaktlink-Artikel nun den Stil für die Mine F-Elemente. Ich werde der display-Eigenschaft den flex-Wert geben, weil der Neff als Flex-Container fungiert und schließlich die justify content-Eigenschaft verwendet, um mein dif zu zentrieren, das Sites einfügt, die nef-Elemente jetzt den Stil für das ul -Element erstellen. Zuerst möchte ich eine Hintergrundfarbe geben, nur um die Position dieses Elements auf der Seite anzuzeigen, die den hellgrünen Wert gibt, um die Aufzählungszeichen zu entfernen. Ich gebe den Wert nan der kleinsten Stiltypeigenschaft und schließlich gebe ich fünf Pixel, um den Raum um die drei Elemente herum am wenigsten zu ähneln und die Elemente in der Mitte für die kleinsten Elemente zu platzieren. Ich werde Onley definieren eine 10 Pixel, Ausgaben, um einen größeren Abstand zwischen den Beschwerden am wenigsten zu schaffen. Und jetzt haben wir f unsere Navigation am wenigsten gemacht. Ich entferne jetzt die Hintergrundfarbe, die nicht mehr benötigt wird. Wenn Sie eine Perle erstellen möchten, müssen Sie nur auf HTML-Code gehen und tiefere Link-Technologie verwenden, um einzelne Links zu anderen Seiten zu erstellen . 24. Heiliger Grail – Gestalte den Hauptinhalt: Hallo. Lassen Sie uns nun den Hauptinhalt aus der Seite erstellen, die im Artikelabschnitt definiert Ich möchte zwei Inhalte, ein Bild und einen Text einfügen , wie Sie jetzt sehen können. Um das Bild einzufügen, habe ich neue dif mit Nachnamen Hauptbild Das wird eins von den do flex Elemente Ersteller sein, die andere dif mit Glasnamen Haupttext, der den Text erhält, den ich auf der Seite setzen möchte . Jetzt auf den Inhalt innerhalb des ersten dif Ich füge das Bild mit dem Namen Cloud J Peg und in der Tat Ive Haupttext. Ich füge zuerst den Titel von den Decks mit Take Anything gefolgt von einem Bärenriff mit dem Haupttexttext ein, den ich aus der Datei kopiere, die ich im Hauptordner habe, bevor ich den CSS-Code für diese neuen Elemente erstelle, muss ich die Artikel-Element als Flex-Container, so dass die Leben, die sich darin befinden, als Flex-Elemente arbeiten. Also füge ich die Anzeigeeigenschaft mit dem Flex-Wert zu meinem Mantel hinzu. Ich erstelle jetzt das Gold für meinen Hauptbildklassen-Selektor Diese Klasse als Eigenschaft flex mit wirklich When und ich gebe einen Abstand von 40 Pixeln, um etwas Abstand zwischen der oberen und linken Seite des Flex-Containers zu geben . Nun, um den Stil auf das Bild zu geben, Ich definiere das Bildelement, das innerhalb von Männern abgebildet ist, wenn mit der mit off 300 Pixel und die Eid aus 240 Pixel, Der letzte Schritt ist, einen Tauschhandel mit einem Pixel und Farbe schwarz zu geben. Nach dem Bild, das der Glasselektor als nächstes gemacht hat, habe ich mit dem Wert flex eins definiert, wie das Bild für die zu flexenden Elemente den gleichen Raum einnehmen. Schließlich definiere ich Margin Eigenschaft mit Wert 50 Pixel am rechten Rand und 20 Pixel auf den anderen Baum sehen wir jetzt im Browser, der Inhalt im Artikel Abschnitt Dinge erstellt. 25. Heiliger Grail – Erstellen von beitenden Inhalten: kein anderes Nebenelement, das ich benutze, um ein Teil der Seite für Nachrichten im Zusammenhang mit Unternehmen Websites zu sein , um Inhalte innerhalb Element der Größe zu erstellen, hatte ich ein div mit Glasnamen asides Text, wo ich den Titel neueste Nachrichten mit allem, gefolgt von der Papier-Link, den Sie erstellen können, die zu den Nachrichten Detail führt und ich schreibe das Beispiel Text neue Kleidung Server entschieden Text, wenn die Arbeit als Flex-Element innerhalb des Seitenelements. Also muss ich die Seite als Flex-Container mit Anzeigeeigenschaft mit Wert-Flex jetzt definieren um das Element zu zentrieren, das ich verwendet habe, um Inhalt mit Wertezentrum zu rechtfertigen und endgültige Detail zentriert Überschrift Ich erstelle einen Stil, damit wir die Linieneigenschaft mit dem Wert Zentrieren Sie den anderen Text in der Mitte des Flex-Elements Dies ist nur eine der möglichen Lösungen für diesen Abschnitt der Seite Sie können immer eine andere Art von Inhalt erstellen, wenn Sie möchten. Vielen Dank 26. Holy Gril Layout – Gestalte layout: Schließlich war meine Fußzeile wie die andere. Ich habe Blätter erstellt, die es auf der linken und rechten Seite der Fußzeile positionieren und wie Flex-Elemente Inhalte auf der linken Seite des Essens tun. Er habe ich in das Essen er links Dave, wo ich einen Bären tragen will Ref. Wir würden Copyright Text und anderen Text identifizieren meine entscheidet Ende der Rechte. Ich habe das Essen, er schreibt Deve, wo ich einen Absatz mit Text-Site-Map setzen, die jede Perle Zehe andere Seite in der CSS kalt erhalten kann . Ich habe mein Essen er mit der Anzeigeeigenschaft mit Value flex definiert und abgelenkt Elemente, die links und rechts zu positionieren . Ich habe die Eigenschaft verwendet, um Inhalt mit Wertraum zwischen zu begründen, um diese an Flex-Elemente auf dem Cross-Zugriff auszurichten . Ich habe die Eigenschaft Zeilenelemente mit dem Mittelwert verwendet und jetzt, um die Fußzeile zu beenden, gebe ich einen gewissen Rand, so dass die Flex-Elemente nicht am Anfang sind und das Ende von den Hauptausgängen aus dem Container, der den Rand links mit dem Wert 60 Pixel für den Flex definiert Element in der linken und rechten Rand mit dem gleichen Wert für die Flex-Element platzieren, die Rechte. Wir haben nun den Inhalt von der Webseite fertig gestellt. Ich hoffe, es gefällt dir. Danke. 27. Erweiterte Layouttechnik – Teil 1: Ok. Nach dem Erstellen des Holy Gral Layouts verwende ich eine andere Technik als schwarze Flecks Box-Modell, um das Layout zu erstellen. Die wichtigsten i d sein I. Diese Technik ist die Schaffung Main Container Death Group. Halten Sie Flex-Elemente, um das Layout zu verwenden, definieren Sie in CSS einzelne Regeln für einige von ihnen, um das Layout der Seite zu formen. Lassen Sie uns einige Beispiele sehen, um diese Dinge zu verstehen. Für das erste Layout erstelle ich meinen dif-Container, in den ich sechs Flex-Elemente mit dem Glasnamen Flex-Element einfüge . An dieser Stelle nichts Neues in Bezug auf das, was wir jetzt lernen. In der CSS sagte ich, mein Container mit dem mit off 70% mit einer Hintergrundfarbe, Burley würde 600 Pixel ausgeben und schließlich den Container zentrieren. Ich habe meine Marge mit den Werten Null und Out definiert. Aw, schließlich, meine Anzeigeeigenschaft mit dem Flex-Wert, der den Flex-Kontext für alle direkten Kinder erlaubt. Vier Ablenkungselemente, die ich alle mit der gleichen Größe definiere, geben dem Tal eins der Flex-Eigenschaften-ID von 120 Pixeln, einem Rand von 10 Pixeln und einer Hintergrundfarbe. Wir Pralinen Wert. Wir können überprüfen, dass das Layout s Flex-Elemente in einer einzigen Zeile wie erwartet eingefügt, alle mit der gleichen Strategie. Ich habe verwendet, um das Layout zu ändern, verwendet die Flex-Rep-Eigenschaft, mit der Sie die Flex-Elemente in verschiedenen Zeilen anordnen können , zusammen mit dem Flex-Rip, den ich auch verwendet habe, und dem Kind-Selektor, mit dem ich Flex-Elemente einzeln auswählen kann , um Nur einige Eigenschaften von den Juden und Flex-Gegenstände. Diese Kombination aus wie Streifen und End-Kind, wird eine große und Amy Erstellen von Layouts ermöglichen, die ich jetzt Kombination aus Flex-Rep und End-Kind verwenden werde , wo ich sagte, flex rechte Eigenschaft mit dem Rap-Wert, der mehrere und meine Zeileninhaltseigenschaft, Weizenflex-Startwert, so dass die Flex-Elemente von oben angeordnet werden. Zu diesem Zeitpunkt sehen Sie keine Unterschiede im Layout, nur weil in den Flex-Elementen kein Inhalt vorhanden ist, der dazu führt , dass sie verkleinert werden, ohne zur nächsten Zeile zu wechseln. Wenn Sie Streitigkeiten waren, sehen Sie, dass die Diebe rep, wenn Sie das Fenster verkleinern und einige der Elemente werden in die nächste Zeile zu bewegen , was werde ich als nächstes tun? Ich möchte, dass mein erster und Fort Flex Artikel Zehe den vollen Weizen besetzen und immer kleiner ich für diese habe ich verwendet und Kind Selektor, wo ich mein Kind ein und vier wählen und meine Flex-Eigenschaft mit 100% Wert definieren , um das gesamte mit zu besetzen und setzt mich ab 50. Großes Selbst. Was werden wir im Browser sehen? Die erste Einfügezeile am ersten und vierten Kind, die voll besetzen mit und zweite und vierte Zeile F, um Elemente in jeder Zeile, die durch gleiche Gewürze sprechen zu flex. Weil wir Flex-Eigenschaft mit dem Wert eins definieren. In den nächsten Videos werde ich nur graues Layout mit dieser neuen Methode zu erstellen denkt. 28. Fortgeschrittene Layouttechnik – Teil 2 (Heiliger Grail: für dieses neue Beispiel möchte ich erneut erstellen. Doley Selten aus, aber dieses Mal mit der Technik, die ich im letzten Video dieses Layout vorgestellt, wie wir zuvor als fünf verschiedene Abschnitte gesehen haben. Grund, warum ich fünf Flex-Elemente in meinem Container Gold definieren muss, die ich jetzt innerhalb des Körpertages definiert habe, erstelle ich den Mantel aus meinem Container, diesmal mit Hintergrundfarbe schwarz und ein mit dem Wert off 70% zum Zentrum Container . Ich habe wieder den Rand mit Value Null und Auto Flex Rip Eigenschaft mit Wert rip und ausgerichteten Elementen oben mit der Eigenschaftslinie verwendet. Kondensieren Sie mit Value Flex. Starten wir jetzt, wenn unser Container definieren, lassen Sie uns nicht den Stil für unsere Flex-Elemente erstellen, wo ich zunächst alle mit dem gleichen definieren möchte . Also habe ich die Flex-Eigenschaft mit Valley eins verwendet und ich habe 70% Rabatt auf den View-Teil. Definieren Sie dann die Hintergrundfarbe mit dem Schokoladenwert und schließlich einen Rand von einem Pixel, um sichtbaren Raum zwischen den Flats Elemente zu sein. Jetzt ist es Zeit, die Stile auf nur ein paar flexible Elemente anzuwenden, so dass sie nicht Stil gesagt haben. Zuvor starte ich wir Kind eins und fünf, die das andere und Essen er aus den Layouts repräsentieren. Ich habe n Kind Selektor für diese Kinder verwendet und ich habe Flex-Wert mit 100% angewendet, um den gesamten Behälter mit ID off 15% des View-Teils und schließlich eine Hintergrundfarbe mit dem Wert Kornblumenblau zu besetzen gesamten Behälter mit ID off 15% des View-Teils und schließlich eine Hintergrundfarbe mit dem , haben wir jetzt andere und Lebensmittel oder abgeschlossen zu beenden. Ich muss den Stil für die Reflexelemente erstellen, die die gleiche Größe haben, da die Flex-Eigenschaft mit Valley one verwendet wird, um den Wert vom untergeordneten Baum zu ändern, so dass es mehr Platz in Anspruch nimmt . Ich erstelle eine Regel, in der dieser Get-Wert-Baum der Flex-Eigenschaft zugewiesen ist und eine andere Hintergrundfarbe mit Licht großen Wert gibt . Es ist jetzt sichtbar, dass dieses Kind jetzt mehr Abstand und Kind zu und für kaufen konnte, und wir haben unser Layout beendet. Vielen Dank 29. Einführung in die Medienfragen: Mit der großen Vielfalt an Internet-Geräten, die heute verfügbar sind, ist es wichtig, die Schaffung von responsive Websites, die es einer Website ermöglicht, sich an jede Art von Geräteauflösung anzupassen, wo Content-Design und Leistung erforderlich sind, um sicherzustellen, dass Client Zufriedenheit. Einer der größten Vorteile sind responsive Websites ist, dass bietet eine niedrigere gemeint diskutiert im Vergleich zum Ausführen verschiedener Versionen einer Website, um auf verschiedene Geräte anzupassen , weil Sie nur die Änderungen an der einzigartigen Version vornehmen müssen, Anwenden von Medienabfragen, die nützlich sind, um CSS-Stile je nach Gerät anzuwenden, das Sie zum folgenden Beispiel verwenden, wo ich eine Medienabfrage anwenden werde, werde ich ein Layout erstellen, das ein anderes enthält und einen Container Tod s zu Flex-Elementen enthält, die ich in HTML erstelle andere Tag und die Schuldenarbeit s Container. Wir machen das ifs innerhalb, dass ich den Klassennamen flex Element gebe, wo ich in eine Anzeige Inc. mit Text Titel eins einfüge , und ich mache dasselbe mit dem anderen Flex-Element. Aber dieses Mal mit dem Texttitel zu I f. In diesem Moment, das HTML fast dann jetzt nur um zu beenden kopiere ich zu Dex einen größeren Text für das erste Flex-Element , das ich in einen Absatz einfügen und eine kleinere zum zweiten Flex-Element, die ich in ein weiterer Absatz für das CSS. Ich erstelle zunächst meine andere und setze es mit einer Hintergrundfarbe gesammelt blau und Nacht off 15% der Viewboards. Jetzt der Container, in dem ich Eigenschaft mit Flex-Wert anzeigen muss, dieses Hintergrundfarblicht, CNN und ich würde 85% des View-Ports abnehmen, um den Rest zu besetzen, den ich beenden muss. Ich definiere den Stil von meinen Flex-Elementen, wo ich möchte, dass sie den gleichen Raum einnehmen, dem Tal eine Eigenschaft ablenkt, eine stolze mit Hintergrundfarbe und schließlich möchte ich definieren, dass ich 200 große SOLs auslasse. Um do flex Elemente zu unterscheiden, erstelle ich eine Regel, um die Farbe von meinem zweiten Flex-Element zu ändern, indem ich den und untergeordneten Selektor für Kind zu mit Hintergrundfarbe blaue Veilchen verwende. Jetzt können wir die beiden Flex-Posten unterscheiden, die Schulden enthalten. Jetzt ist es Zeit für die Medienabfrage. Wenn ich versuche, mein Fenster zu verkleinern, sehen Sie, dass es einen Moment gibt, in dem das Flex-Element überläuft, und an diesem Punkt muss ich das Layout aufgrund der Fensterauflösung ändern, die den Inhalt über das Flex-Element ausfüllen lässt . Also erstelle ich eine Medienabfrage im CSS mit dieser Bedingung, dass ich einfach und es sind etwa 1000 und 200 Pixel, wo die Situation passiert und wie meine Triggerpunkte arbeiten. Also habe ich die max mit Eigenschaft mit Wert definiert, wenn 1002 100 Pixel, die diese Regel für Situationen zwischen Null und 1000 und 200 gelten lassen . Ich muss mein Flex-Element definieren, um die Spalte in der Zellzeile anzuordnen, so dass der Text in das Flex-Element passt . Also definiere ich eine Regel zum Container, in dem ich Flex diese Aktion mit entwickelter Spalte für diese Situation verwende . Jetzt mache ich noch eine Änderung. Mein erster Flex-Artikel ist mehr Decks als das zweite. Also habe ich für das erste Kind einen Flex-Wertebaum definiert, der dreimal mehr frei gewürzt belegt und die Sekunden das zweite Flex-Element, das ich mit Valley 1 für die Flex-Eigenschaft definiere. Für diese beiden Situationen habe ich dann den Kind-Selektor verwendet, um das Kind zu identifizieren, das ich ändern möchte. Wir haben jetzt unsere Änderungen vorgenommen und Sie sehen, dass, wenn ich schrumpfen tun, obwohl lenkt Artikel drücken Sie von der Straße, um ihn zu nennen, in dem der erste Flex-Element größer als der zweite ist . Die letzte Situation ist, wenn ich die Reihenfolge der Flachsartikel ändern möchte. Um diese Situation zu tun, müssen nur um die Reihenfolge zu definieren. Eigenschaft für zweites Kind mit Tal eins und erstes Kind definiert mit Tal auch. Wir jetzt, wenn unsere Flex-Artikel wir Arthur unterscheiden, wenn wir die Größe des Fensters ändern. 30. Gestalte deine Website mit einem responsiven Layout (Holy Layout: in früheren Videos haben wir bereits das Layout einer Webseite erstellt, und den jeweiligen Inhalt, den Sie in dem Biss erstellt sehen, dass wir fünf verschiedene Abschnitte haben denen einige der Inhalte überlaufen. Wie wir die Größe vom Browser verkleinern. Um ein ansprechendes Design-Layout zu ermöglichen, muss ich Lösungen einführen, die es ermöglichen, den Inhalt deutlich sichtbar zu machen. Um dieses Ergebnis zu erhalten, verwende ich Medienabfragen wie bereits für das Beispiel in der vorherigen Lektion für diesen speziellen Fall verwendet , ich möchte eine Änderung in drei Elemente vornehmen. Nie Artikel betonen, und dann Schritt aus angeordnet in einer Reihe. Ich möchte sie in einer einzigen Spalte setzen, um mehr Platz zu geben, damit wir den Inhalt in Flex-Elementen sehen können , wenn wir eine niedrige Auflösung haben. Ich setze jetzt Media Query, in der ich 1000 und 200 Pixel als meine Übergangspunkte auswähle. Das wird mein maximaler Witz sein. Von Null bis zu diesem Wert habe ich alle drei Elemente in einer Spalte für diese Bedingung. Ich ändere meinen Container mit Eigenschaft. Flex diese Aktion mit der Wertspalte und Überprüfung des Fensters erneut. Das sehen wir von einem bestimmten Punkt aus. Der Inhalt ist in einer einzigen Spalte angeordnet. Ich passe mich jetzt an. Die Werte dieses Übergangs werden mit einem niedrigeren Wert gemacht, da das Fenster immer noch geändert werden kann , ein wenig mehr ohne Überlauf zum Inhalt. Ich gebe den Wert 950 Pixel und mache den Test. Wir sehen, dass es ein Wert ist, der näher am Ideal ist, jetzt, wo ich den Wert definiert habe und bereits am Element in der Spalte, sagte ich, sie wussten, dass ich für meinen Neff und die Größe, die einen Wert von 15% des View-Teils gibt. Und ich möchte, dass das Mindeste, das ich in meinen Nie Elementen habe, zentral auf meinem Cross-Zugang ist. Grund, warum ich mein Eigentum im Mittelpunkt gebe. Elemente ausrichten Keine wichtige Änderung. Ich möchte meine Navigationslinks in oder ist eine sanfte, also erstelle ich eine Regel für meine kleinsten Elemente, die meiner Anzeigeeigenschaft den Zeilenwert geben. Jetzt, da wir Links ändern, ich optimiere nur den Raum, so dass die Flex-Elemente, die als Text mit mehr Würze bleiben als die Flex-Elemente, die mit dem Bild für diese Purples bleiben, definiere ich eine Regel für das Klassen-Hauptbild mit Valley Einer für die Flex-Eigenschaft und meine Mind-Text-Klasse. Ich gebe dem Tal zu weit die Flaggen Eigentum. Und schließlich änderte ich den linken und rechten Rand auf Null, so dass die Todesfälle innerhalb des Flex-Artikels für kleinere Fenstergrößen bleiben . Wenn Sie die Elementreihenfolge ändern möchten, müssen Sie nur die Reihenfolge verwenden. Eigentum, die ich jetzt mache, wird sich ändern, wo ich will. Diese Entscheidung erscheint zuerst in der zweiten nie und dritten Artikel. Also definiere ich eine Zehe beiseite Arthur zu nie und unseren anderen Baum. Zwei Artikel haben wir jetzt beendet unsere Medienabfrage und Sie können sehen, dass unsere Website ist völlig ein Gemüse zu jeder Art von Auflösung. - Danke. 31. Responsive Design ohne Medienfragen (mit Flex-Wrap): Nach der Verwendung von Medienabfragen, möchte ich jetzt ein Beispiel oder ansprechende Inhalte machen, die die Medien Beeren mit Flex-rep-Eigenschaft ausschließt , die Ihnen helfen, Ihr Layout in ein ansprechendes Design zu verwandeln. Ich werde dieses Beispiel von den Medienabfragen verwenden, in denen ich eine andere habe, und um Elemente innerhalb des Containers zu flexen . In diesem Fall habe ich definiert, dass ich für Auflösungen zwischen Null und 1200 Pixel die Regel anwende, die die Elemente in einer Spalte legt, die verschiedene Größen und Bestellungen durch die Flex-Elemente enthält. Für dieses neue Beispiel möchte ich die Elemente auch in Spalten einfügen, wenn die Decks überlaufen, aber dieses Mal mit Flex wrapped Eigenschaft, ohne die Medienabfragen für die Situation. Ich werde dann das Fohlen löschen, das sich auf die Medienabfragen bezieht, und nachdem ich es entfernt habe, kann ich jedes Element in Spalten länger. Als ich die Auflösung geändert habe, habe ich jetzt die Eigenschaft Flex Rip zu meinem Mantel mit Rap-Wert, der es ermöglicht, Elemente innerhalb des Containers zu wickeln . Der Trick, den ich verwende, besteht darin, einen mit Wert für die Flex-Elemente zu erstellen, so dass, wenn sie diese Werte erreichen , eines der Elemente gezwungen wird, zu einer anderen Rolle zu gehen. Dazu erstelle ich einen Flex durch diese Eigenschaft mit dem Wert 600 Pixel. Sie können jetzt sehen, dass das Schrumpfen des Fensters, der Flex-Artikel bereits am besten auf die andere Straße ist. Das ist ein ähnliches Verhalten, das wir bei der Verwendung von Medienabfragen. Ich werde nur ein paar Änderungen in der Kälte vornehmen. Zuerst F ein Bettzeug mit Wert von 10 Pixel, um etwas Abstand zwischen den Decks von der do flex Elemente einen Rand aus, wenn große sel und zu beenden geben. Ich habe die Flex-Eigenschaft mit einem Wert von einem 600 Pixel platziert, um alle in einer Eigenschaft die 1. 1 zu setzen , um Sgro zu lenken, wenn für Flex-Drink, so dass Flex-Elemente trinken können, wenn nötig, und 600 Pixel für Ablenkungen durch diese Eigenschaft, Dinge 32. Bootstrap Flex Intro: in diesem neuen Abschnitt, Lassen Sie uns lernen, wie Sie das Flex-Box-Modell implementieren, das Sie bereits kennen, aber jetzt, mit Bootstrap-Framework. Guter Gurt. Es ist ein HTML-CSS und JavaScript-Framework, das Sie als Grundlage für die Erstellung von responsive Websites oder Web-Anwendungen mit CSS Brot definierte Brille verwenden können, um das Layout Ihrer Waffen und F-Interaktivität mit JavaScript One off zu entwerfen . Die großen Vorteile dieses Frameworks ist die Beschleunigung der Entwicklung, da Sie Ihren Codierungsaufwand sparen können, indem Sie weniger CSS Codierung anbieten. Da Blöcke von CSS Coat bereits Brot in Klassen definiert sind, die Sie in Ihrer HTML-Code-Inversion für Bootstrap Youth Flex Brille verwenden , um die Kontrolle auszulegen. Was nicht passiert in früheren Versionen, wo Floats verwendet wurden, um das Seitenlayout andl. Obwohl der Bootstrap die Verwendung von erfreulichen Klassen erlaubt, können Sie immer Ihre eigenen Klassen erstellen, um einige Elemente anzupassen. Lassen Sie uns in den nächsten Videos sehen, um mit Bootstrap zu implementieren, die Flex-Box Maulwurf 33. Bootstrap – Benutzerdefinierte Kurse und Verwendung von Breakpoints: Wie ich schon gesagt habe. Einer der großen Vorteile bei der Verwendung von Bootstrap besteht darin, F-Blöcke vor Gericht bereits definiert dass Goldie notwendig ist, um die verschiedenen Klassen zur Verfügung zu verwenden. Ein weiteres großartiges Feature ist die Fähigkeit, eine Brille zu tragen, die Breakpoints für responsiv aus verwendet wird, sehr einfach Flex-Marken-Eigenschaften hinzuzufügen, definieren wir Bruchpunkte nur mit einer einzigen Klasse. An diesem Punkt, da Sie bereits ein gutes Wissen über Flex-Marken-Eigenschaften haben, wird es leicht sein, die Verwendung jeder erfreulichen Klassen zu verstehen, die ich jetzt beginnen werde. Wir zeigen Eigenschaft, die einen Flex-Container in Linie oder Block definiert, und das ermöglicht Flex-Inhalt für alle seine direkten Kinder. Aber bevor ich diese verschiedenen Do Threat Utilities verwendet habe, muss ich jemals auf alle Klassen zugreifen, die in diesem Framework verfügbar sind, indem ich ein Verzeichnis hinzufüge, das die Content-Delivery Netzwerkunterstützung für Bootstrap, CSS und JavaScript bereitstellt . Nun, da die Brille, die ich erkenne, sehen wir die Display-Utility-Klassen. Wenn Sie Display mit Wert Flex Toe Annullierung tragen müssen, wie Sie in den ersten Videos getan haben , verwenden Sie jetzt in Boots Schritt deflects oder D in line flex Dienstprogramme Klassen, um einen Block oder in line flex Container zu erstellen . Oder noch besser, Sie können eine dieser beiden Klassen verwenden, die für mögliche Bruchpunkte verwenden. Aber bevor ich noch diese Bruchpunkte, erstelle ich ein einfaches Beispiel für die beiden Typen. Blockieren Sie alle Zeilenelemente mit Boots Trip. In dieser Datei habe ich den Flex-Container mit Insektenmantel. Einige Eigenschaften werden gerne angezeigt, die Flex-Container als Blockkarte in Linienelementen definieren . Das ist es, was ich in den ersten Videos gemacht habe. Wenn Sie sich mit dem Bootstrap erinnern, haben Sie nicht mehr die Formen, und Sie werden Dienstprogrammklassen in HTML-Codes verwenden, um den gleichen Typ von Flex-Elementen zu definieren. Lassen Sie uns jetzt die Bucht ändern, wo ich das Haupt in Flex-Elementklassen behalte, um Lee Hintergrundfarbe zu behalten und ich würde Eigenschaften in CSS in veg TML. Ieft reflektiert Gegenstände in meinem Inneren, die als Container funktionieren. Ich weiß am Rand, verwende jetzt Bootstrap-Klassen, um etwas Platz zwischen den Elementen und im Container I zu geben . Die Klasse lenkt jedoch ab, was mit der alten Anzeigeeigenschaft ähnlich ist, die ich in CSS mit Value Flex verwendet habe , der diesen Dieb als Blockflexcontainer definiert hat, der das gesamte mit von der Seite besetzt. Wenn ich möchte, dass der Container Toe als In-Line-Element arbeitet, änderte ich die Klasse lenkt auf das Glas D in Line Flex, um Änderungen im Browser sichtbar zu machen , wo der Container jetzt auf Lee belegt, den minimalen Platz benötigt und jetzt Verwenden Sie Bruchpunkte mit diesen beiden Klassen flex und in line flex zuerst, lassen Sie uns verstehen, was sind diese Bruchpunkte? Diese Bruchpunkte basieren auf minimalen Ansichten Teileverstand und ermöglichen es dem Benutzer, Elemente nach oben zu skalieren wenn sich das Ansichtsteil Weizen in der folgenden Tabelle ändert. Sie sehen die Definition von jedem von den Bruchpunkten, wobei verschiedene pro Korrekturen verwendet werden, wobei die ID mit bestimmten Punkten verknüpft wird, in denen Sie die Größe ändern oder die Position außerhalb der Tonhöhenelemente ändern können . Beginnend mit dem ersten Präfix S m wird dieses Präfix für einen View-Port mit gleich oder größer als 576 Pixel verwendet. Das zweite Präfix ist MD. Schulden wird für einen Wert gleich oder größer als 768 Pixel verwendet, die weniger zu unseren verwendetto Iger Auflösungen mit LG für eine mit mehr als Artikel 900 in 19 2 Pixel und schließlich X l für mit gleich oder größer als 1000 und 200 Pixel Auflösungen , die für Laptops und Desktops verwendet werden. Ich mache jetzt eine Änderung im Mantel, um einen Bruchpunkt durch den Fehler zu verwenden. Ich möchte, dass der Behälter Ava als Blockelement ist, also verwende ich das my in der Tat Do Glas. Ich möchte jedoch jedoch einen Bruchpunkt für große Auflösungen erstellen, der den Container für eine Woche in Linie übergibt , um mindestens 992 Pixel zu erreichen. Als Reaktion auf LG für die Situation Präfix, muss ich nur das Inline-Flex-Glas mit dem Bruchpunkt definieren. LG eingefügt das Präfix Bindungen zwischen 1. 9 ein Signal und Wörter in Zeile. , Wie erwartet,sehen Sie, wenn Sie die Größe des Fensters ändern, wenn Sie die Größe des Fensters ändern,dass Sie für Wert kleiner als 992 Pixel, jemals Element blockieren und für Werte größer oder gleich, dann 992 Pixel. Das ist unser Triggerpunkt-Container geht von Block zu Linie, mit anderen Bruchpunkten. Der Fahrer wird ähnlich sein, nur anders zu sein. Übergangspunkt dank 34. Bootstrap – -: Lassen Sie uns nun die Richtung von den Flex-Elementen sehen. Sie haben diese Eigenschaft bereits für das Flex-Box-Modell gesehen, aber dieses Mal werde ich Bootstrap-Dienstprogrammklassen verwenden. Flex-Elemente können für mögliche Werte haben. Roll, die durch die flexible Zeilenklasse Schulden definiert ist, arbeitet als Standardwert, in dem die Elemente horizontal von links nach rechts angeordnet sind . Umkehren mit Flex-Ro-Reverse-Klasse, mit horizontaler Richtung von rechts nach links und schließlich zu Werten, die die vertikale Richtung festlegen . Flex COLUMN und Flex COLUMN Flüsse mögen Eigenschaft anzuzeigen Sie müssen Breakpoints für responsive Variationen definieren, die in diesen vier Klassen verwendet werden können . Jetzt erstelle ich eine einfache Situation, in der ich das für einen mit kleineren dan 992 Pixeln möchte, bleibt das Flex-Element in oder ärgerlich, von links nach rechts angeordnet, und nach dem Erreichen des Bruchpunktwerts von 992 Pixeln, diese Elemente bleibt vertikal E. Für dieses Szenario erstelle ich die Zeilenklasse und die Flex-Calm-Klasse, wo ich den richtigen Punkt mit dem Präfix LG einfüge , um diese Klasse mit diesem Breakpoint im Browser zu aktivieren. EU wird bestätigen, dass dieses Verhalten sichtbar ist, dass Flex-Elemente nach Erreichen des Bruchpunkts vertikal ausgerichtet sind. Das ist alles vorerst, danke. 35. Bootstrap – - wrap Kurse: Es ist an der Zeit, Rep zu flexiblen, die für die Definition von Al Flex-Elementen verantwortlich ist. Rep. Im Flex-Container können Sie aus keiner Verpackung wählen, die funktioniert, da das Fold Behavior mit Flex, keine Rap Utility-Klasse mit Flex Rep Glas umwickelt und schließlich Reverse Rappen mit Flex Rep Reverse Klasse. Ich bin für dieses Beispiel mehr Far Flex Elemente, beginnend mit möglichen Klassen. Ich habe den Flex No Rap verwendet, , wie erwartet, nichts auf der Seite ändert. ich die Größe von Vieux Port ändere, indem ich jetzt zum Klassenflex rip ändere, sehen Sie, dass die Ansichtsteile auf einen niedrigeren Wert skaliert werden. Die Flex-Elemente werden in eine andere Zeile und schließlich ein ähnliches Verhalten mit Flex Wrapped reverse, aber jetzt Elemente rep von unten nach oben vom Container. Sehen wir uns nun die Situation an, in der die Flex-Elemente nicht wiedergegeben werden. Also für diesen Fall verwende ich die Glasflex no rep-Klasse, die ich nicht definieren musste, da dies das Standardverhalten von den Flex-Elementen ist . Jetzt möchte ich für einen View-Teil mit gleich oder größer als 576 Pixel, dass die Elemente am unteren Rand der Seite bleiben , also habe ich die Klasse Flex umgepackt umgekehrt mit dem durch das S m-Präfix definierten Bruchpunkt verwendet Für die Situation, die Sie jetzt im Browser beobachten können Die Artikel bleiben an der Oberseite des Pflasters, ohne zu wickeln. Und wenn ich die Größe des Fensters ändere, werden sie umgebrochen, wenn sie sich am unteren Rand befinden. Danke. 36. Bootstrap – Richte dich an die content: jetzt die Alignment-Inhalt-Agilitätsklassen, die auf Flockes-Box-Containern verwendet werden, die die Ausrichtung von Like-Elementen auf den Hauptachsen ändern . Sie können vier verschiedene Achsen haben. Es beginnt dort, wo Elemente in der Startzeile ausgewählt werden und das in der Klasse definiert ist. Beginnter Inhalt beginnt und funktioniert als Standardwert. Zweitens ist mögliche Ausrichtung gerechtfertigt Inhalt, und das ist das Beispiel, das ich jetzt gebe, wo die Elemente bis zum Ende der Zeile gepackt werden. Nächstes Glas ist zentriert Ausrichtung mit ausrichten Inhaltscenter und weniger zu Ausrichtungen sind gerechtfertigt, Inhalt zwischen und Rechtfertigung Inhalt um, die dem Raum um Option in CSS Flex Box ähnlich ist . Responsive Variationen gibt es auch, um Inhalte mit Hilfe der Bruchpunkte zu begründen. Und das ist die nächste Situation. Zehenuhr Ich erstelle jetzt ein mögliches Szenario, in dem ich den Rechtfertigungsinhalt zwischen Klasse zwei Werten unten, dann 768 Pixel angewendet zwei Werten unten, habe. Das wird mein Bruchpunkt für gleiche oder Igerwerte sein. Ich möchte die Elemente an der Mitte ausrichten, daher habe ich die Center-Klasse für den Ausrichtungsinhalt mit dem Bruchpunkt MD verwendet. Das ist dieses Szenario, das Sie jetzt beobachten, wo Elemente in der Mitte bleiben, nachdem Sie den Roouser neu dimensioniert haben. Vielen Dank 37. Bootstrap – Die Benutzerklassen anpassen: jetzt, da Sie gesehen haben, um Elemente im Hauptzugriff auszurichten. Lassen Sie uns eine Zeile Elemente Agilitätsklassen auf Containern verwenden, um die Ausrichtung wie Sytems zu ändern . Aber jetzt, im Kreuz, Sex hat fünf verschiedene Werte, wie Sie in Flex-Box-Eigenschaften Start und Mitte, Grundlinie und Stretch gesehen haben. Das ist der Bruder-Standard. Die Klasse wird für diese fünf Jungs verwendet wird, ist ein Zeilenartikel Start, wo Cross Start Rand Rand aus. Die Elemente werden auf der Kreuzstartlinie A Positionen platziert und mit Elementen auf dem Kreuz und Linie platziert , ein Zeilenpunkt Mitte, eine Zeile Artikel kauft Linie und die Linie Element Streckung ist möglich, Bruchpunkte mit diesen -Klassen, wie in den vorherigen Situationen, präsentiere ich jetzt die Situation, in der ich die Elemente an der Mitte im Cross X ausgerichtet habe, verwendet das Klassencenter Ausrichten von Elementen. Und als ich den Wert 768 Pixel für den Weizen erreicht habe, richte ich Elemente an der Spitze mit der Klasse aus. Ein Einzelposten beginnt mit dem Präfix MD. Dieses Ergebnis ist nun im Bruder sichtbar. Das Ändern der vertikalen Linie ging, der Weizen reicht bis zum Bruchpunkt. Vielen Dank 38. Bootstrap – Richte dich an die content an.: Hallo. Nach dem Lernen ausrichten Elemente, lassen Sie uns eine Zeile Inhalt Utility-Klassen für Container verwendet, um die Flex-Container-Linien auszurichten . Wir tun es, wenn es zusätzliche Würze in Cross-Access, Sie können aus Starts wählen, die als Standard arbeiten und Mitte zwischen herum oder strecken, um zu sehen wie es funktioniert. Ich bei Flex-Rep mit Value rip und habe die Anzahl von Flex-Elementen erhöht, da diese Eigenschaft keine Auswirkungen auf einzelne Rose aus Flex-Elemente hat, die Sie sehen, lenkt die Position der Elemente ab, indem Sie die verschiedenen Szenarien anwenden . Erstens, mit einem Zeileninhalt beginnen, würden wir lügen. Inspect bis zum Anfang des Containers, ein Zeileninhalt Ende Tod geht bis zum Ende aus dem Container. Nächste Deal Zeile Content-Center, eine Zeile Inhalt um und schließlich eine Linie Inhalt Strecken. nun einen Bruchpunkt für eine sehr einfache Situation verwenden, in der sich die Elemente befinden, positionieren Sie ihn in der Mitte mit der Mittelklasse des Linieninhalts und nachdem Sie den durch die Präfixalgen definierten Bruchpunkt erreicht haben, werden die Elemente am Anfang ausgerichtet. Das ist die Situation, die jetzt passiert, wenn ich die Größe meines Fensters und der Elemente, die von der Mitte nach oben gehen , ändere. Es ist alles für jetzt, danke 39. Bootstrap – Richte dich an die self an: Lassen Sie uns jetzt beobachten, ausrichten Self-Utility, die auf einzelne Elemente angewendet wird. Sie können eine Linie Handy-Elemente verwenden, um ihre Ausrichtung auf dem Kreuz individuell zu ändern. Zugriff mit fünf verschiedenen Achsen unter Verwendung der entsprechenden Klassen. Eine Linie selbst Start, eine Linie selbst endet Zentrum, aber seine Linie und strecken Schulden arbeiten als Standard. Sei Verhalten mit dem Licht selbst. Es ist möglich, den Wert der Ausrichtungselemente für das spezifische Flex-Element zu überschreiben. In diesem Beispiel habe ich den Container mit den Flex-Elementen an der Mitte ausgerichtet, wobei das Glas ausrichten Elemente zentriert, das ich jetzt im ersten Flicks Element ein Glas ausrichten Self endet, wodurch das erste Element an der unten. Nun, wenn Sie Desert Flex-Element mit der Linie Selbststart setzen, wird dieses Element an den Anfang der Seite übergeben. Genau wie das erste Element. Dieses letzte Flex-Element überschreibt die Positionswerte. Schließlich ändere ich die Bedingung für das Dessert Flex-Element, indem ich einen Haltepunkt mit der Klasse ausrichten selbst M D End hinzufüge, das macht, dass dieses Flex-Element es an der Spitze bis zum Ende geht. Wie das erste Flex-Element, wenn der Ansichtsteil mit gleich oder größer als 768 Pixel ist, eine Situation, die jetzt passiert, wenn ich die Größe des Fensters ändere, das ist alles für jetzt, danke. 40. Bootstrap – Flex Grow & Schreinerei: Sehen wir uns nun zwei wichtige Dienstprogramme an, Flexeril und Flex Shrink. Von dem, was wir gelernt haben, wissen Sie, dass lenkt Zeile Dienstprogramm gibt Flex-Elemente Fähigkeit zu wachsen und fühlen sich verfügbar. Würzen des Behälters und Flex Schrumpfen gibt Sytems Fähigkeit zu schrumpfen. Bei Bedarf können sie Werte Null und Eins annehmen, und es ist möglich, diese Werte mit den vier Bruchpunkten zu kombinieren. Wahrlich, eine für die Flex-Zeile macht das zu einem Element, das verwendet werden soll. Alle verfügbaren Gewürze können, während der Wert eins für schrumpfen macht, dass ein Element schrumpfen kann, um in den Behälter passen. Wert. Zero Far Dienstprogramme wachsen und schrumpfen lässt die entgegengesetzten Verhaltenselemente nicht wachsen und nicht schrumpfen. Schauen wir uns einige Beispiele an, um zu verstehen. Besser aus, diese beiden wichtigen Utility-Klassen in den Mantel I F. Reflex Artikel, alle mit dem gleichen mit. Und ich werde die Klasse Flex-Zeile mit dem Wert eins für die weniger zu Flex-Elemente anwenden, was diese beiden Elemente dazu macht, das verbleibende Gewürz gleichmäßig zu besetzen. Mit einem Haltepunkt für diese Gegenstände muss ich nur den Wert setzen, auf den die Gegenstände das gesamte Gewürz einnehmen werden. Ich benutze den Triggerpunkt von 700 und 68 Pixel Für die Situation, die dem MD-Präfix entspricht , ist es nicht sichtbar, Tod kritisiert das Fenster Onley für Werte größer oder gleich 768 Pixel. Die Gegenstände belegen das alte Gewürz aus dem Behälter. Für die nächste Situation habe ich die Flex-Schrumpf-Dienstprogrammklassen angewendet. Zuerst definiere ich jedes der Flachs-Elemente mit 300 Pixeln aus, wobei alle Elemente in ähnlichen Bedingungen sind und der Container mit 500 Pixeln. Wenn Sie Flex-Ring für das erste Element mit dem Wert Null im Glas verwenden, zwinge ich die Abrechnung, mit diesem Wert zu bleiben ,und die anderen beiden Elemente werden schrumpfen , die gleichen Klasse enden. Wir schätzen Null auf das zweite Element, das ich gemacht habe. Jetzt die ersten 2 Elemente unflexibel und ein bestimmtes Element für diese Situation kleiner sein . Aber die über volle Situation passiert jetzt, denke ich, ein großartiger Punkt auf die ersten 2 Elemente mit wie Schrumpfwert. Null Was passiert für Werte aus Ansichtsteil mit kleiner als der Bruchpunkt, den ich habe, um 1. 2 Elemente mit flexiblen für Iger sind gleich Breakpunktwert. Diese beiden ersten Artikel Bleiben Sie unflexibel. Nicht schrumpfen, und ich fange an, immer wieder eine andere Strömungssituation, wie Sie jetzt im Browser selbst für jetzt sehen können. 41. Bootstrap – Benutzerdefinierte Kurse bestellen: Ich Schauen wir uns jetzt die Kunst der Utility-Klassen an, die Sie mit Bootstrap-Framework mit Flachs-Box verwenden können . Sie können die visuelle Reihenfolge von den Flex-Elementen mit den Dienstprogrammen und full off ardor ändern, um die Reihenfolge wie Sytems zu ändern. Ich muss nur die Bestellklasse verwenden, die in der Klasse Name I. D. Nummer entspricht der Reihenfolge des Flex-Elements, das diese Situation in der Kälte zeigt. Sie sehen, dass die Flex-Elemente standardmäßig der Reihenfolge folgen, in der sie in den HTML-Code eingefügt werden aufgerufen. Ich werde dann eine Situation schaffen, in der ich den zweiten Flex-Artikel links lege, indem ich unsere Klasse mit dem Wert ein Zertifikat Flex-Element in der Mitte mit der Order Utility-Klasse mit Nummer zwei verwende und schließlich wird Flex Item eins der letzte sein unter Verwendung von Zahlenbaum in der Klasse. Arthur im Browser. Es ist möglich, diese Änderung in der Position von diesen drei Elementen zu sehen. anderes mögliches Szenario, das Sie mit den vorherigen Utility-Klassen gesehen haben, ist an Breakpoints , die Änderungen für einen bestimmten mit einem anderen View-Teil bewirkt, möchte ich jetzt, dass, wenn Vieux-Port mit Reichweite Bruchpunkte definieren. Die Elemente kehrten an die ursprüngliche Position zurück, wobei der Wert eins für den ersten Flex-Artikel, zwei für die Sekunden und ST für das Dessert verwendet wurde. Sie sehen jetzt, dass das Verhalten, bei dem Elemente zurück an die ursprüngliche Position gehen, wenn ich die Größe des Ansichtsteils und nach dem Erreichen des Triggerpunkts Danke.