CSS-Flexbox Nr. 1. Erstellen Ihres ersten Flexbox-Layouts

Ende 2018 haben wir ein Buch über CSS Grid veröffentlicht, das Layout-Tool, das das Frontend-Webdesign revolutioniert. CSS Grid ist vollständig CSS-nativ und ermöglicht es Ihnen, ein rasterbasiertes Layoutsystem mit Spalten und Zeilen zu erstellen.

"CSS Grid Explained" wurde sofort zu einem unserer meistverkauften Bücher. Wir arbeiten also an einem großen Update und einer Erweiterung für dieses Buch. Wir beginnen auch mit der Produktion eines neuen Buches, „Flexbox Explained“. Flexbox ist eng mit CSS Grid verwandt, aber es gibt deutliche Unterschiede:

• Flexbox ist ein eindimensionales Layoutmodell. Es kann entweder Spalten oder Zeilen verwalten.
• CSS Grid ist ein zweidimensionales Layoutmodell. Es kann sowohl Spalten als auch Zeilen verwalten.

In den nächsten Wochen werden wir eine Reihe von Flexbox-Tutorials veröffentlichen, während wir „Flexbox Explained“ schreiben. Dieses erste Tutorial demonstriert die grundlegenden Konzepte von CSS Flexbox mit praktischen Beispielen.

Einführung in Flexbox

Die CSS-Flexbox-Spezifikation beschreibt ein Layout mit Elementen ( flex-items ) innerhalb eines Containers ( flex-container ). Diese Artikel können je nach verfügbarem Containerplatz in der Breite und/oder Höhe wachsen oder schrumpfen. Die Einzelteile "biegen" sich, um sich bestmöglich an den übergeordneten Behälter anzupassen.

Diese "flexiblen" Elemente können in jede Richtung (Inline-Achse oder Blockachse) angeordnet werden und bieten somit viel Flexibilität beim Ändern der Größe (Breite oder Höhe) des Bildschirms oder seiner Ausrichtung.

Sie können sich die Flexbox W3C-Spezifikation ansehen, indem Sie auf diesen Link klicken.

Schritt 1. Erstellen Sie den HTML-Code

Beginnen wir dieses Beispiel, indem wir eine HTML-Datei mit Beispielcode erstellen. Ich habe etwas HTML für Sie vorbereitet - es ist ein Container mit 3 untergeordneten Elementen.

• Öffnen Sie Ihren bevorzugten Code-Editor.
• Erstellen Sie eine leere HTML-Datei.
• Besuchen Sie diese Seite und kopieren Sie den HTML-Code
• Fügen Sie diesen Code in Ihre HTML-Datei ein.

Schritt 2. Erstellen Sie das CSS

Da wir nun einen Container mit 3 Elementen haben, fügen wir etwas Styling hinzu.

• Erstellen Sie eine CSS-Datei namens style.css. . Legen Sie diese Datei im selben Ordner wie Ihre HTML-Datei ab. Der Link zu dieser CSS-Datei befindet sich bereits im Tag Ihrer HTML-Datei
• Kopieren Sie diesen Code, der auch auf Codepen verfügbar ist, und fügen Sie ihn ein:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Dieses Bild zeigt, wie Ihr Code aussieht, wenn Sie die HTML-Datei in einem Browser öffnen. Die 3 untergeordneten Elemente sind so breit wie ihr übergeordneter Container. Die Höhe wird durch den Inhalt jedes Artikels bestimmt. Beachten Sie die Polsterung von 2rem (ca. 32px auf einem Desktop-Bildschirm) auf allen Seiten.

Schritt 3. Die CSS-Flexbox-Stile

Jetzt ist es an der Zeit, mit dem Flexbox-Teil dieses Tutorials zu beginnen.

• Bearbeiten Sie die CSS-Datei und fügen Sie diesen Code hinzu:

 .container { display: flex; }

Dieses Bild zeigt, wie Ihr Code jetzt aussehen wird:

Was hat sich verändert? Technisch gesehen ist der übergeordnete Container nun ein flex-container . Die untergeordneten Elemente haben sich in flex-items verwandelt.

Warum hat sich die Größe der Behälter geändert? Die Flex-Items sind nicht so breit wie ihr übergeordneter Container. Sie sind jetzt so breit wie der Inhalt in ihnen. Die flex-items erscheinen als schwebende Elemente auf der linken Seite. Sie verhalten sich wie Inline- Elemente.

Um die Breite des übergeordneten Containers deutlich zu sehen, können Sie eine background-color anwenden:

• Bearbeiten Sie den CSS-Code und fügen Sie diesen Code hinzu:

 .container { display: flex; background-color: #f5ca3c; }

So sieht der Container jetzt aus:

Sie haben bereits bemerkt, dass sich der flex-container (meistens) wie ein Block-Level-Element verhält. Wir können den Container jedoch auch dazu bringen, sich wie ein Element auf Inline-Ebene zu verhalten. Dazu ändern wir den Wert der Eigenschaft display auf inline-flex .

• Bearbeiten Sie den CSS-Code:

 .container { display: inline-flex; background-color: #f5ca3c;

Der Flex-Container ist jetzt ein Element auf Inline-Ebene, wie Sie in diesem Bild sehen können:

Bevor wir in diesem Tutorial fortfahren, ändern wir das Verhalten in ein Element auf Blockebene.

• Bearbeiten Sie den CSS-Code:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Schritt 4. Ändern von Flexbox-Zeilen in Spalten

Bisher haben wir einen flex-container erstellt. Wir haben auch gesehen, wie sich die Kinder dieses Containers verhalten, wenn sie in flex-items .

Lassen Sie uns nun lernen, wie Sie die Richtung unseres Layouts ändern können. Die Standardrichtung eines flex-container ist zeilenbasiert. Sie können dieses Verhalten jedoch mit der Eigenschaft flex-direction ändern.

• Bearbeiten Sie den CSS-Code:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

Nach dem Aktualisieren Ihres Codes sehen Sie keine Änderung, da flex-direction: row der Standardwert ist. Nehmen wir eine wirklich sichtbare Änderung vor: Bearbeiten Sie die Richtung des flex-container in column .

• Bearbeiten Sie den CSS-Code:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

Dieses nächste Bild zeigt die Änderung in Ihrem Layout:

Jetzt basiert die Richtung des flex-container auf der Blockachse (Spalte). Die flex-items werden von oben nach unten ausgerichtet und jedes dieser Elemente nimmt die volle Breite seines übergeordneten Containers ein. Sie verhalten sich also wie Blockelemente.

Nun können Sie an dieser Stelle anfangen zu hinterfragen: „ Hey, mein Layout sieht jetzt genauso aus wie das allererste Layout in diesem Tutorial! “ Das stimmt. Optisch gibt es keinen Unterschied zwischen diesem aktuellen Layout mit einem flex-container und dem ersten Layout dieses Beispiels mit einem Block-Container.

Allerdings haben wir jetzt mehr Kontrolle. Beispielsweise können Sie die Richtung von flex-items mit den row-reverse und column-reverse Eigenschaften umkehren.

• Bearbeiten Sie den CSS-Code:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Dieses Bild zeigt, wie Ihr Layout nach diesem neuen Update aussehen wird:

Um die flex-items invertiert in einer Reihe anzuzeigen, ändern Sie den Wert der Eigenschaft flex-direction .

• Bearbeiten Sie den CSS-Code:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Flexbox-Zusammenfassung

Herzliche Glückwünsche! Sie haben gelernt, wie man einen flex-container deklariert. Sie haben gesehen, wie flex-items in Abhängigkeit von der flex-direction verhalten, die auf ihren übergeordneten Container ( row oder column ) angewendet wird. Außerdem wissen Sie, wie Sie die Reihenfolge von flex-items umkehren können.

All diese Änderungen werden mit CSS vorgenommen, sodass die Struktur des HTML-Markups Ihrer Website davon nicht betroffen ist. Das ist einer der Vorteile der Verwendung von Flexbox. Das Umkehren der Reihenfolge von flex-items ist nur eine der Funktionen dieses CSS-Moduls. Es gibt noch viel mehr über Flexbox zu lernen, also schauen Sie sich in ein paar Tagen Teil 2 dieses Tutorials an.

Weitere Tutorials dieser Reihe

• CSS-Flexbox Nr. 2. So verwenden Sie die Justify-Content-Eigenschaft
• CSS-Flexbox Nr. 3. Die Eigenschaft align-items
• CSS-Flexbox Nr. 4. Die Flex-Grow-Eigenschaft