Erstellen Sie eine Webseite mit CSS3 Flexbox

Gestern haben wir die Zukunft des CSS-Layouts und einige der neuen Module diskutiert, die CSS3 in dieser Arena bietet. Eines davon haben wir kurz angesprochen: CSS3 Flexbox.

Heute werden wir tiefer in dieses Modell eintauchen und damit eine vollständige Webseite erstellen. Es wird auf keinen Fall bereit sein, Ihre Projekte umzusetzen, aber es wird Ihnen weitere Einblicke in eine mögliche Art und Weise geben, mit der wir Websites in den kommenden Jahren programmieren werden. Außerdem macht dieses Zeug einfach nur Spaß!

Sehr experimentell: Nur Webkit

Mein Ziel für diesen Beitrag war es, eine Arbeitsseite auf mehreren Browsern zum Laufen zu bringen. Das ist nicht geschehen. Zu diesem Zeitpunkt ist die Implementierung in allen Browsern fehlerhaft und inkonsistent. Selbst nach der Installation von Flexie.js habe ich immer noch sehr unterschiedliche Ergebnisse zwischen Firefox und Safari erhalten (ich denke, es hat mit dem Mischen von typischen Containern mit Margin-Center und Flexbox zu tun).

Aus diesem Grund wird das heutige Projekt in erster Linie anvisiert Safari und Chrome denn ehrlich gesagt ist es in anderen Browsern immer noch ein Durcheinander! Ich empfehle Ihnen auf jeden Fall, mit dem fertigen Produkt zu spielen, um zu sehen, ob Sie es in einer browserübergreifenden Implementierung einsetzen können. Wenn Sie Vorschläge haben, würde ich sie gerne in den Kommentaren hören!

Schritt 1: Wiederverwendbare Klassen

Da ich im gestrigen Beitrag kurz das Grundkonzept von Flexbox erläutert habe, werde ich mich hier auf die Implementierung konzentrieren. Aber mach dir keine Sorgen, du solltest den Kern der Sache verstehen.

Als Erstes möchten wir einige grundlegende Klassen erstellen, die uns bei der Definition unseres Layouts unterstützen. Diese Attribute können bei Bedarf auf eine ID angewendet werden, aber ich finde es hilfreich und ordentlich, dies auf diese Weise zu tun.

.hasflex {display: box; Anzeige: -webkit-box; Anzeige: -Moz-Box; } .box0 {-webkit-box-flex: 0; -Moz-Box-Flex: 0; Box-Flex: 0; } .box1 {-webkit-box-flex: 1; -Moz-Box-Flex: 1; Box-Flex: 1; } .box2 {-webkit-box-flex: 2; -Moz-Box-Flex: 2; Box-Flex: 2; } .box3 {-webkit-box-flex: 3; -Moz-Box-Flex: 3; Box-Flex: 3; } .last {margin-right: 0; }

Lassen Sie uns besprechen, wie diese Klassen funktionieren. Die erste Klasse, hasflexwird auf einen übergeordneten Container angewendet, dessen untergeordnete Elemente mit diesem neuen Flexbox-System angelegt werden sollen. Sie werden feststellen, dass dieses gesamte Design komplett ohne Schwebekörper ist, so dass Sie einige gute Hinweise darauf erhalten, wo wir Flexbox in unseren Code implementieren werden.

Als Nächstes haben wir einige weitere Klassen eingerichtet, um verschiedene anzuwenden Box-Flex Werte. Flexbox verteilt unsere untergeordneten Elemente bequem über den Container und diese bestimmen die Proportionen. ich glauben dass der Standardwert? 0? Die Ergebnisse schienen jedoch bei dieser Annahme ein wenig fehlerhaft zu sein. Daher war es hilfreich, einen Wert immer nur manuell anzuwenden.

Schritt 2: Anfängliches HTML & CSS

Um Ihr HTML-Dokument zu starten, erstellen Sie einen Container und einen Header. An dieser Stelle sind dies grundlegende Elemente, die wir wie immer ohne die Hilfe von Flexbox erstellen werden.

<h1>Design Shack Flexbox Demo</h1>

Wenn Sie dies gefunden haben, geben Sie unten die grundlegenden Stile ein. Grundsätzlich habe ich einen dunklen Körper mit einem hellen 1.000px breiten Behälter aufgestellt, der unseren gesamten Inhalt aufnehmen kann. Werfen Sie ein paar Ränder in die Mitte und einige grundlegende Textstile, und wir sind bereit, mit dem Spaß zu beginnen.

Hinweis: Die Überschrift, die ich verwende, ist Oswald von Google Fonts.

/ * Basic Reset * / * {padding: 0; Marge: 0; } / * Body / Container * / body {Schriftfamilie: helvetica, arial, serifenlos; Schriftgröße: 15px; Zeilenhöhe: 23px; Hintergrund: # 111; Farbe: # 222; } #container {width: 1000px; Marge: 0 auto; Hintergrund: #eee; min-Höhe: 1150px; } / * Header * / #header {margin: 0 auto; Breite: 900px; Polsterauflage: 20px; Schriftfamilie: 'Oswald', arial, serif; }

Schritt 3: Navigation

Für den Navigationsbereich erstellen Sie jetzt normalerweise eine Liste mit Links und ziehen sie dann nach links. Bei Flexbox ist der Prozess etwas anders. Hier wenden wir einfach das an hasflex Klasse, die wir zuvor erstellt haben und dann verwenden box0 für jedes der Listenelemente. Bewirbt sich box0 Alle drei haben den Effekt, dass die Links nach links verschoben werden, sie werden jedoch nicht über die gesamte Breite des Containers verteilt.

<ul> <li>Zuhause</li> <li>Über</li> <li>Kontakt</li> </ul>

Danach wenden wir einfach die gleichen Stile an, die wir auch auf anderen Webseiten anwenden würden. Das Hauptziel dabei ist es, die Links mit ein paar Rändern etwas zu entfernen und sicherzustellen, dass unsere Links korrekt gestaltet sind.

/ * Navigation * / #nav {width: 900px; / * background: #eee; * / margin: 0 auto; } #nav ul {list-style: none; } #nav ul li {Marge: 20px 20px 0 0px; } #nav a {Textdekoration: keine; Farbe: # 111; } #nav a: hover {text-decoration: underline; Farbe: # 666; }

Schritt 4: Das Bild

Jede gute Webseite braucht ein Bild. Um zu veranschaulichen, wie Sie Flexbox selektiv nur auf die Elemente anwenden, die es benötigen, wird ein großes Header-Bild mit dem gleichen exakten Code eingefügt, den Sie normalerweise verwenden.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-web-page-with-css3-flexbox_4.jpg"> <p>Hier zeigt sich Flexbox wirklich. Normalerweise erfordert das Erstellen eines dreispaltigen Layouts wie oben gezeigt viel mathematische Planung. Wir müssen den übergeordneten Container nicht nur in drei Teile teilen, sondern auch die richtigen Proportionen ermitteln, so dass die mittlere Spalte breiter ist als die anderen beiden.</p> <p>Bei Flexbox müssen wir jedoch nur unsere anwenden <em>Flexbox</em> Klasse in Verbindung mit den nummerierten Boxklassen. Hier habe ich das mittlere div auf gesetzt <em>box2</em> und die anderen zu <em>box3</em>. Wie Sie im obigen Bild sehen können, hat dies zur Folge, dass die Spalten automatisch verteilt werden, wobei die zweite Spalte breiter als die erste ist.</p> <p>Interessanterweise führte mich alles, was ich las, zu der Überzeugung, dass das <em>box2</em> Klasse wäre in diesem Fall die engste, aber das war bei meinen Live-Tests einfach nicht der Fall! Dieser Aufbau führt zu einem engen ersten und letzten Absatz und einem breiten zweiten Absatz.</p> <textarea wrap="soft" readonly=""> <h2>Ein</h2> <p>Lorem ipsum dolor sitzen amet? </p> <h2>Lange zwei</h2> <p>Lorem ipsum dolor sitzen amet? </p> <h2>Drei</h2> <p>Lorem ipsum dolor sitzen amet? </p>

Kombinieren Sie dies mit etwas einfachem CSS und Sie haben ein schnelles und einfaches 3-Spalten-Layout! Da Flexbox sich automatisch um die Verteilung in Bezug auf die übergeordnete Breite kümmert, werden alle an dem übergeordneten Element vorgenommenen Änderungen automatisch in den untergeordneten Elementen übernommen.

/ * Textspalten: 3 Breite * / #Spalten {width: 900px; / * Hintergrund: grau; * / Rand: 10px auto; } #spalten p {margin: 0 15px 0 0px; } #spalten h2 {margin: 0 30px 0 0px; Zeilenhöhe: 35px; Schriftfamilie: 'Oswald', arial, serif; }

Eine faszinierende Sache bei Flexbox ist, dass wir die Spalten, die wir mit reinem CSS eingerichtet haben, tatsächlich neu anordnen können. Zuweisung -webkit-box-ordinal-gruppe: (eine Zahl); Für jedes Element haben Sie die Kontrolle über die Reihenfolge ihres Aussehens.

Schritt 6: Vertikaler Stapel

Es ist wichtig zu wissen, dass Sie bei der Arbeit mit Flexbox keine vertikalen Spalten verwenden müssen. Wir können dieselbe Technik wie oben verwenden, um einige Absätze übereinander zu stapeln. Wenn Sie sich wirklich für Flexbox interessieren, können Sie mit dieser Technik vertikal und horizontal gestapelte Elemente mischen. Wir werden es hier jedoch einfach beibehalten, um zu sehen, wie es funktioniert.

<h2>Lange zwei</h2> <p>Lorem ipsum dolor sitzen amet? </p> <p>Lorem ipsum dolor sitzen amet? </p> <p>Lorem ipsum dolor sitzen amet? </p>

Der Hauptunterschied hier ist, dass wir eingestellt haben kastenorientiert auf vertikal, was uns den im obigen Bild gezeigten vertikalen Stapel anstelle der Spalten, die wir im vorherigen Schritt erstellt haben, gibt.

/ * Textzeilen * / #Rows {width: 900px; / * Hintergrund: grau; * / Rand: 30px Auto 15px; -webkit-box-orient: vertikal; -moz-box-orient: vertikal; kastenorientiert: vertikal; } #rows p {margin: 0 0px 15px 0px; } #rows h2 {Zeilenhöhe: 35px; Schriftfamilie: 'Oswald', arial, serif; }

Schritt 7: Zwei Spalten

Um ein letztes Mal umzuschalten, erstellen wir einen weiteren Abschnitt, diesmal mit zwei statt drei Spalten. Das Prinzip ist genau das gleiche. Sie müssen das Layout nicht überdenken, da Sie diesmal über zwei Säulen verfügen. Flexbox kümmert sich erneut um das schwere Heben.

<h2>Ein</h2> <p>Lorem ipsum dolor sitzen amet? </p> <h2>Zwei</h2> <p>Lorem ipsum dolor sitzen amet? </p> / * twoColums * / #twoColums {width: 900px; Marge: 0px auto; } #twoColums p {margin: 0 20px 0 0; } #twoColums h2 {Zeilenhöhe: 35px; Schriftfamilie: 'Oswald', arial, serif; }

Fertiges Produkt

Schauen Sie sich eine Live-Demo an, wenn Sie sich in Safari oder Chrome befinden.

Weitergehen

Ich habe absichtlich versucht, dieses Beispiel so einfach wie möglich zu halten. Sie können dieses Layout jedoch ziemlich leicht übernehmen und es noch komplexer machen. Für Anfänger bietet die Verwendung von Prozentwerten für die Breite ein schönes, wirklich flexibles Layout. Wie bereits erwähnt, können Sie komplexe Aktionen ausführen, z. B. das Umordnen von Spalten und das Mischen von vertikalen und horizontalen Stapeln in derselben Zeile. Ich empfehle Ihnen, so viel wie möglich mit dem Code zu spielen, wobei Sie diese Seite als Leitfaden verwenden.

Fazit

Dieses grundlegende Beispiel soll näher darauf eingehen, wie wir mit Flexbox in der Zukunft sowohl einfache als auch komplexe Layouts erstellen können. Ich bin ziemlich neu im Modul, also ist es das weit perfekt, wie die Tatsache zeigt, dass es noch nicht Cross-Browser-kompatibel ist!

Trotz der Nachteile sollten Sie die Funktionsweise des Moduls genau kennen und wissen, was mit relativ wenig Code bei der Nutzung von Flexbox möglich ist. Fühlen Sie sich frei, in den Kommentaren viele Vorschläge zu machen!