Zum Hauptinhalt springen

In diesem Beitrag werden einige leistungsstarke CSS-Zeilen vorgestellt, die sich hervorragend zum Heben eignen und Ihnen dabei helfen, solide moderne Layouts zu erstellen.

Moderne CSS-Layouts ermöglichen es Entwicklern, mit nur wenigen Tastenanschlägen wirklich aussagekräftige und robuste Stilregeln zu schreiben. Der obige Vortrag und dieser Beitrag untersuchen anschließend 10 leistungsstarke CSS-Zeilen, die viel schweres Heben bewirken.

Um diese Demos selbst zu verfolgen oder zu spielen, schauen Sie sich die Glitch-Beilage oben an oder besuchen Sie 1linelayouts.glitch.me.

01. Supercenter: Platzgegenstände: Mitte


Lösen wir für das erste "einzeilige" Layout das größte Rätsel im gesamten CSS-Bereich: das Zentrieren von Dingen. Ich möchte, dass Sie wissen, dass es einfacher ist, als Sie denken Platzgegenstände: Mitte.

Zuerst angeben Gitter Als die Anzeige Methode und dann schreiben Platzgegenstände: Mitte im gleichen Element. Platzgegenstände ist eine Kurzform, um beide zu definieren Elemente ausrichten y Artikel rechtfertigen Jetzt sofort. Einstellen Center, beide Elemente ausrichten y Artikel rechtfertigen sind konfiguriert für Center.

.elternteil {
Anzeige : Gitter ;
Platzgegenstände : Mitte ;
}}

Auf diese Weise können Inhalte unabhängig von der Größe des übergeordneten Elements perfekt zentriert werden.

02. Der dekonstruierte Pfannkuchen: biegen:


Als nächstes haben wir den dekonstruierten Pfannkuchen! Dies ist beispielsweise ein gängiges Layout für Marketing-Websites, die eine Reihe von drei Elementen enthalten können, normalerweise mit einem Bild, einem Titel und anschließendem Text, der einige Merkmale eines Produkts beschreibt. Auf Mobilgeräten möchten wir, dass sie sich gut stapeln und erweitern lassen, wenn wir den Bildschirm vergrößern.

Wenn Sie Flexbox für diesen Effekt verwenden, benötigen Sie keine Medienabfragen, um die Position dieser Elemente anzupassen, wenn die Größe des Bildschirms geändert wird.

das biegen Abkürzung bedeutet: biegen:.

Also, wenn Sie möchten, dass Ihre Kisten bis zu Ihrem gefüllt werden Größe, schrumpfen in kleinere Größen, aber nicht strecken Geben Sie Folgendes ein, um zusätzliche Leerzeichen auszufüllen: flex: 0 1. In diesem Fall ist Ihr ist 150px so sieht es aus:

.elternteil {
Anzeige : flex ;
}}

.child {
Flex : 0 1 150px ;
}}

Wenn du machen Wenn Sie möchten, dass sich die Kästchen dehnen und den Raum füllen, während sie in die nächste Zeile übergehen, setzen Sie die zu 1, so würde es aussehen:

.elternteil {
Anzeige : flex ;
}}

.child {
Flex : 1 1 150px ;
}}


Wenn die Bildschirmgröße zunimmt oder abnimmt, schrumpfen diese flexiblen Elemente und wachsen.


Diese Demo nutzt Minimal Maximal Funktion für Rasterlayouts. Wir setzen hier die Mindestgröße der Seitenleiste auf 150px, aber auf größeren Bildschirmen, so dass das erweitert werden kann 25%. Die Seitenleiste wird immer belegt 25% vom horizontalen Raum seines Vaters bis 25% wird kleiner als 150px.

Fügen Sie dies als Raster-Vorlagen-Spalten-Wert mit dem folgenden Wert hinzu:
minmax (150px, 25%) 1fr. Das Element in der ersten Spalte (in diesem Fall die Seitenleiste) erhält a Minimal Maximal von 150px zu 25%und das zweite Element (das Main Abschnitt hier) nimmt den Rest des Raumes als eine einzige ein 1fr Spur.

.elternteil {
Anzeige : Gitter ;
Grid-Template-Spalten : minmax ( 150px , 25% ) 1fr ;
}}

04. Stapel Pfannkuchen: Raster-Vorlagen-Zeilen: auto 1fr auto


Im Gegensatz zu Deconstructed Pancake werden in diesem Beispiel die untergeordneten Elemente nicht umgebrochen, wenn sich die Bildschirmgröße ändert. Üblicherweise bekannt als klebrige FußzeileDieses Layout wird häufig sowohl für Websites als auch für Apps verwendet, in mobilen Apps (die Fußzeile ist normalerweise eine Symbolleiste) und auf Websites (Apps mit einer Seite verwenden häufig dieses globale Layout).

Hinzufügen Anzeige: Gitter Die Komponente gibt ein einzelnes Spaltenraster aus, der Hauptbereich ist jedoch nur so hoch wie der Inhalt mit der Fußzeile darunter.

Fügen Sie Folgendes hinzu, damit die Fußzeile am Ende bleibt:

.elternteil {
Anzeige : Gitter ;
Raster-template-Zeilen: auto 1FR auto;
}}

Dadurch werden die Kopf- und Fußzeileninhalte so eingestellt, dass sie automatisch die Größe ihrer untergeordneten Elemente annehmen und den verbleibenden Speicherplatz anwenden (1fr) zum Hauptbereich, während die Wagen Die Größenzeile nimmt die Größe des Mindestinhalts ihrer untergeordneten Elemente an. Wenn der Inhalt also größer wird, wird die Zeile selbst passend.

05. Klassische Anordnung des Heiligen Grals: Gittervorlage: auto 1fr auto / auto 1fr auto


Für dieses klassische Holy Grail-Layout gibt es eine Kopfzeile, eine Fußzeile, eine linke Seitenleiste, eine rechte Seitenleiste und einen Hauptinhalt. Es ist ähnlich wie das vorherige Design, aber jetzt mit Seitenstangen!

Verwenden Sie die Taste, um das gesamte Raster mit einer einzigen Codezeile zu schreiben Gittervorlage Eigentum. Auf diese Weise können Sie Zeilen und Spalten gleichzeitig festlegen.

Das Eigenschafts- und Wertepaar lautet: Gittervorlage: auto 1fr auto / auto 1fr auto. Der Schrägstrich zwischen der ersten und der zweiten Liste, die durch Leerzeichen getrennt sind, ist der Sprung zwischen Zeilen und Spalten.

.elternteil {
Anzeige : Gitter ;
Raster-Vorlage: auto 1FR Auto / Auto 1FR auto;
}}

Wie im letzten Beispiel, in dem Kopf- und Fußzeile Inhalte in automatischer Größe hatten, werden hier die Größe der linken und rechten Seitenleiste automatisch basierend auf der Eigengröße ihrer Kinder festgelegt. Diesmal ist es jedoch horizontal (Breite) statt vertikal (Höhe).

06. Gitter mit 12 Abschnitten: Gitter-Vorlagen-Spalten: Wiederholen (12, 1fr)


Als nächstes haben wir einen weiteren Klassiker: den 12-Bay-Kühlergrill. Mit dem können Sie schnell Raster in CSS schreiben wiederhole () Funktion. Verwenden von: wiederholen (12, 1fr); Für die Spalten der Rastervorlage erhalten Sie jeweils 12 Spalten 1fr.

.elternteil {
Anzeige : Gitter ;
Raster-Vorlagen-Spalten : Wiederholen ( 12 , 1fr ) ;
}}

.child-span-12 {
Rastersäule : 1/13;
}}

Jetzt, da Sie ein 12-Spalten-Gleisraster haben, können wir unsere Kinder im Raster platzieren. Eine Möglichkeit, dies zu tun, besteht darin, sie mithilfe von Gitterlinien zu platzieren. Beispielsweise, Rasterspalte: 1/13 Es würde sich von der ersten bis zur letzten Zeile (13) erstrecken und 12 Spalten umfassen. Rastersäule: 1/5; würde die ersten vier abdecken.


Eine andere Möglichkeit, dies zu schreiben, ist die Verwendung von Spanne Stichwort. Mit Spanne, legt die Startlinie und dann die Anzahl der Spalten fest, die von diesem Startpunkt aus überspannt werden sollen. In diesem Fall, Rastersäule: 1 / Spanne 12 wäre gleichbedeutend mit Rasterspalte: 1/13y Gittersäule: 2 / Spanne 6 wäre gleichbedeutend mit Rasterspalte: 2/8.

.child-span-12 {
Gittersäule : 1 / Spanne 12 ;
}}

07. RAM (Wiederholen, Auto, MinMax): Grid-Template-Spalten (Auto-Fit, Minmax ( , 1fr))


Kombinieren Sie in diesem siebten Beispiel einige der Konzepte, die Sie bereits gelernt haben, um ein ansprechendes Layout mit flexiblen und automatisch platzierten untergeordneten Elementen zu erstellen. Gut aussehen. Die wichtigsten Begriffe, an die Sie sich hier erinnern sollten, sind: wiederholen, auto- (fit | fill)y Minimal Maximal () ', erinnert durch das Akronym RAM.

Alles in allem sieht es so aus:

.elternteil {
Anzeige : Gitter ;
Grid-Template-Spalten : Wiederholen ( Auto-Fit , Minmax ( 150px , 1fr ) ) ;
}}

Sie verwenden erneut die Wiederholung, diesmal jedoch die Auto-Fit Schlüsselwort anstelle eines expliziten numerischen Werts. Dies ermöglicht die automatische Platzierung dieser untergeordneten Elemente. Diese Kinder haben auch einen Mindestgrundwert von 150px mit einem Maximalwert 1frDas heißt, auf kleineren Bildschirmen nehmen sie die gesamte Fläche ein 1fr breit und wie sie erreichen 150px jeweils breit, beginnt in Richtung der gleichen Linie zu fließen.

Mit Auto-FitDie Felder werden gedehnt, wenn ihre horizontale Größe 150 Pixel überschreitet, um den gesamten verbleibenden Raum auszufüllen. Wenn Sie dies jedoch ändern in Auto-Fillwerden sie nicht gedehnt, wenn ihre Basisgröße in der Minmax-Funktion überschritten wird:


.elternteil {
Anzeige : Gitter ;
Grid-Template-Spalten : Wiederholen ( Auto-Fill , Minmax ( 150px , 1fr ) ) ;
}}

08. Ausrichtung: Inhalt rechtfertigen: Zwischenraum


Für das folgende Design ist der Hauptpunkt, der hier demonstriert werden soll Inhalt rechtfertigen: ZwischenraumHiermit werden das erste und das letzte untergeordnete Element an den Rändern des Begrenzungsrahmens platziert, wobei der verbleibende Abstand gleichmäßig zwischen den Elementen verteilt wird. Für diese Karten werden sie in einen Flexbox-Anzeigemodus versetzt, wobei die Adresse auf Spalte mit eingestellt ist Flex-Richtung: Säule.

Dadurch werden Titel, Beschreibung und Bildblock in einer vertikalen Spalte auf der Hauptkarte platziert. Also, bewerben Inhalt rechtfertigen: Zwischenraum Verankert das erste (Titel) und das letzte (Bildblock) Element an den Rändern der Flexbox, und der beschreibende Text zwischen ihnen wird an jedem Endpunkt in gleichem Abstand platziert.

.elternteil {
Anzeige : flex ;
Flex-Richtung : Säule ;
Inhalt rechtfertigen : Zwischenraum ;
}}

09. Halte meinen Stil: Klemme ( , , )


Hier kommen wir zu einigen Techniken weniger Browserunterstützung, aber sie haben einige wirklich coole Auswirkungen auf das Design und die Layouts der reaktionsschnellen Benutzeroberfläche. In dieser Demo stellen Sie die Breite mit einer Klemme wie folgt ein: Breite: Klemme ( , , ).

Dies legt eine absolute minimale und maximale Größe und eine tatsächliche Größe fest. Bei Werten kann das so aussehen:

.elternteil {
Breite : Klemme ( 23ch , 50% , 46ch ) ;
}}

Die Mindestgröße hier ist 23ch oder 23 Zeicheneinheiten, und die maximale Größe ist 46ch, 46 Zeichen. Zeichenbreiteneinheiten basieren auf der Schriftgröße des Elements (insbesondere der Breite des Elements) 0 Glyphe). Die 'tatsächliche' Größe ist 50%, was die 50% der Hauptbreite dieses Elements darstellt.

Was Klemme () Die Funktion, die Sie hier ausführen, besteht darin, diesem Element zu erlauben, eine Breite von 50% beizubehalten bis um 50% ist größer als 46ch (in größeren Ansichtsfenstern) oder kleiner als 23ch (in kleineren Ansichtsfenstern). Sie können sehen, dass beim Strecken und Verkleinern der Hauptgröße die Breite dieser Karte auf ihren maximalen Klemmpunkt ansteigt und auf ihren minimalen Klemmpunkt abnimmt. Es bleibt dann auf dem übergeordneten Element zentriert, da wir zusätzliche Eigenschaften angewendet haben, um es zu zentrieren. Dies ermöglicht besser lesbare Layouts, da der Text nicht zu breit ist (siehe oben) 46ch) oder zu gequetscht und schmal (weniger als 23ch).

Dies ist auch eine großartige Möglichkeit, reaktionsschnelle Typografie zu implementieren. Zum Beispiel könnten Sie schreiben: Schriftgröße: Klemme (1.5rem, 20vw, 3rem). In diesem Fall würde die Schriftgröße eines Titels immer dazwischen bleiben 1.5rem y 3rem aber es würde wachsen und schrumpfen je nach 20vw Istwert passend zur Breite des Ansichtsfensters.

Dies ist eine großartige Technik, um die Lesbarkeit mit einem minimalen und maximalen Größenwert sicherzustellen. Beachten Sie jedoch, dass sie nicht von allen modernen Browsern unterstützt wird. Stellen Sie daher sicher, dass Sie Alternativen haben, und führen Sie Ihre Tests durch.

10. Respekt für das Aussehen: Seitenverhältnis: /.


Und schließlich ist dieses letzte Entwurfswerkzeug das experimentellste der ganzen Reihe. Es wurde kürzlich in Chrome Canary in Chromium 84 eingeführt, und Firefox bemüht sich aktiv, es zu implementieren, befindet sich jedoch derzeit in keiner stabilen Browser-Edition.

Ich möchte dies jedoch erwähnen, da es sich um ein sehr häufig auftretendes Problem handelt. Und das hält nur das Seitenverhältnis eines Bildes.

Mit dem Seitenverhältnis Eigenschaft: Wenn Sie die Kartengröße ändern, behält der grüne visuelle Block dieses Seitenverhältnis von 16 x 9 bei. Wir respektieren das Seitenverhältnis mit Seitenverhältnis: 16/9.

.video {
Seitenverhältnis : 16/9;
}}

Um ein Seitenverhältnis von 16 x 9 ohne diese Eigenschaft beizubehalten, müssen Sie a verwenden Polsterung hacken und gib ihm eine Füllung von 56.25% um eine Beziehung zwischen der Oberseite und der Breite herzustellen. Bald werden wir eine Eigenschaft dafür haben, um den Hack und die Notwendigkeit, den Prozentsatz zu berechnen, zu vermeiden. Sie können ein Quadrat mit machen 1 / 1 Verhältnis, ein Verhältnis von 2 zu 1 mit 2 / 1und wirklich alles, was Sie brauchen, um dieses Bild mit einem festgelegten Größenverhältnis zu skalieren.

.square {
Seitenverhältnis : 1/1;
}}

Während diese Funktion immer noch boomt, ist es gut zu wissen, dass sie viele Entwicklerkonflikte löst, mit denen ich schon oft konfrontiert war, insbesondere bei Videos und Iframes.

Fazit

Vielen Dank, dass Sie diese Reise durch 10 leistungsstarke CSS-Zeilen verfolgt haben. Weitere Informationen finden Sie unter das vollständige Videound testen die Demonstrationen du selber.

R Marketing Digital