Der Unterschied zwischen der erfolgreichen Verwendung von CSS und schmerzhaften Versuchen, damit umzugehen, hängt häufig von kleinen Details ab. In der Tat hat CSS viele Nuancen. Einer der häufigsten Bereiche, in denen ich einen solchen Kampf oft bemerke, ist das Stylen von Layouts. Persönlich lerne ich gerne CSS-Muster. Mir ist aufgefallen, dass ich dazu neige, eine kleine Anzahl davon zu verwenden, um die meisten Probleme mit dem Layout zu lösen. In diesem Artikel geht es um die CSS-Muster, mit denen ich Layoutprobleme überwinde. Situationen werden unabhängig von der verwendeten CSS-Methodik berücksichtigt: sei es SMACSS, BEM oder sogar ein heißes CSS-in-JS-Thema, da sie sich alle auf die CSS-Eigenschaften selbst konzentrieren und nicht auf die Architektur, Organisation oder Strategie.
Beginnen wir zum Spaß mit dem Test.
Wir werden die von mir entwickelte Plattform mit dem Namen
Questionable.io verwenden und damit einen Test erstellen, auf den wir weiter unten eingehen werden. Keine Sorge, es werden keine persönlichen Daten gesammelt, die Ergebnisse sind anonym und absolut kostenlos.
Der Zweck des Testens besteht darin, festzustellen, ob Sie ein bestimmtes CSS-Verhalten und einige Probleme erkennen können, ohne den Artikel zuerst zu lesen. Ich wollte das Testen nicht schwierig machen, aber die Nuancen des CSS-Stils können ziemlich kompliziert sein. Denken Sie daran, diese Tests sind nur zum Spaß. Die Testergebnisse zeigen nicht Ihre Coolness, aber ich hoffe, sie werden immer noch nützlich sein.
Der Test besteht aus 10 Fragen und sollte nicht länger als 10 Minuten dauern
Vom Übersetzer:
Am Ende des Artikels über Habr wird eine Umfrage über die Anzahl der im Test erzielten Punkte hinzugefügt.
Hinweis: Wenn Sie keine Zeit verschwenden möchten, finden Sie
hier einen Link zu Fragen mit den richtigen Antworten.
Hast du den Test bestanden? Großartig! Lassen Sie uns die Fragen einzeln durchgehen, um eine bessere Vorstellung von den im Test betroffenen Styling-Mustern zu erhalten.
Frage 1: Blockmodell
Das Studium des Blockmodells sollte eine Priorität in der Liste aller FrontEnd-Entwickler sein. Vielleicht ist der Artikel „
Das CSS-Box-Modell “ etwas alt, unterschätzen Sie nicht seinen Wert und seine Relevanz für modernes CSS. Das Blockmodell ist die Grundlage für fast alle Probleme im Zusammenhang mit CSS-Layouts.
Diese spezielle Frage prüft, wie die Breite anhand der Prinzipien des Blockmodells ermittelt werden kann. Ein Block hat eine explizite Breite durch die
width: 100px , es stellt sich jedoch heraus, dass die
Standardregeln für Blockmodelle die width: 100px auf die Ebene „content“ dieses Blocks anwenden. Die resultierende Breite (wie breit der Block auf der Seite gezeichnet wird) ist die Summe aus Inhalt, Abstand und Rahmenebenen. Aus diesem Grund lautet die Antwort 112px.
.box { width: 100px; height: 50px; padding: 5px; border: 1px solid red; background-color: red; }
Wenn Sie mit einer Situation konfrontiert sind, in der die letzte Spalte oder Registerkarte in der Benutzeroberfläche in die nächste Zeile verschoben wird, obwohl Sie für alle
width: 20%; Folgendes angegeben haben
width: 20%; und waren sich sicher, dass sie zu 100% in das übergeordnete Element passen würden, wahrscheinlich wurde dies zu einem Problem. Fünf Spalten mit einer Breite von 20% werden in 100% platziert. Wenn sie jedoch zusätzlich aufgefüllt und / oder umrandet werden, wird die Breite jeder Spalte erhöht, sodass in der aktuellen Zeile nicht genügend Platz für die letzte Spalte bleibt.
Als CSS3 eingeführt wurde, erschien ein neues Tool namens
box-sizing . Damit können wir steuern, auf welche Ebene des Blockmodells wir die Eigenschaft
width anwenden möchten. Zum Beispiel können wir die
box-sizing: border-box festlegen
box-sizing: border-box . Dies bedeutet, dass alle Breitenregeln auf die äußere Randebene anstelle der Inhaltsebene angewendet werden sollen. In der Frage aus dem Test betrug die resultierende Blockbreite 100px, wenn die Eigenschaft
box-sizing: border-box angewendet wurde.
Für einige von Ihnen ist dies eine bekannte Tatsache, aber dennoch eine gute Erinnerung für Profis und Anfänger.
Es gibt eine Reihe von Artikeln zum Blockmodell und zur Verwendung der Box-Sizing-Eigenschaft als Reset, um sie sofort auf das gesamte Projekt anzuwenden.
Box Sizing und
Inheriting Box Sizing Wahrscheinlich etwas bessere Best-Practice sind zwei gute CSS-Tricks-Artikel zu lesen.
Frage 2: Elementgrenzen
Die zweite Testfrage kann teilweise als Fortsetzung der ersten angesehen werden. Denken Sie daran, es ist eine Sache zu lesen: "Das Blockmodell hat Ebenen (Inhalt, Abstand, Rand) und alle wirken sich auf die Gesamtbreite und -höhe des Elements aus." Eine andere Sache ist, die Probleme des Blockmodells in einer realen Situation erkennen zu können. Dieses spezielle Problem ist ein Klassiker unter denen, die seit einiger Zeit mit CSS arbeiten. Daraus folgt, dass die Rahmen einen bestimmten zusätzlichen Platz einnehmen und die umgebenden Elemente wegschieben, da sie Teil des Blockmodells sind. Das Hinzufügen von Frames beim Ändern des Status eines Elements, z.
:hover , bedeutet, dass die Blöcke größer werden und die folgenden Blöcke nach unten gedrückt werden. Das
kann ärgerlich sein :
Von allen in der Testfrage genannten möglichen Lösungen ist das Hinzufügen von
border: 2px solid transparent zum ursprünglichen Zustand (ohne Schwebeflug) die einzig mögliche Lösung für das Problem.
box-sizing löst dieses Problem nicht, da wir die Höhe nicht explizit festlegen. Wenn wir dies tun würden, würde der Rahmen Teil der Gesamthöhe des Elements werden und die Verschiebung würde nicht auftreten, aber dies ist nicht unser Fall.
Es gibt andere Lösungen, die wir in den Antwortoptionen nicht erwähnt haben. Eine davon ist das Hinzufügen eines Pseudorandes mithilfe der
box-shadow Eigenschaft oder die Verwendung eines
outline anstelle eines
border . Jeder von ihnen führt nicht zu einer Verzerrung, da es sich nicht um eine Schicht des Blockmodells handelt. Hier ist ein weiterer
Artikel über CSS-Tricks, in dem Sie mehr über solche Lösungen lesen können.
Hinweis:
Denken Sie daran, dass die
outline Randradius nicht unterstützt
Frage 3: Positionierung - absolut vs fest
Neben dem Verständnis, wann die einzelnen Typen verwendet werden müssen und
wie sie sich in der visuellen Darstellung unterscheiden , ist es auch sehr wichtig, die Regeln zu kennen, wie jede der Positionierungsmethoden mithilfe der Eigenschaften oben, rechts, unten oder links an das übergeordnete Element gebunden wird.
Schauen wir uns zunächst den
enthaltenen Block an . Eine kurze Definition ist, dass der enthaltende Block meistens das übergeordnete Element eines fraglichen Elements ist. Die Regeln für den enthaltenden Block unterscheiden sich jedoch für absolut und fest positionierte Elemente.
1) Für absolute Elemente . Der enthaltende Block ist der nächste Vorfahr, dessen Positionierung nicht
static . Wenn ein Element beispielsweise absolut positioniert ist und die Eigenschaften
top ,
right ,
bottom oder
left , werden sie relativ zu allen übergeordneten Elementen positioniert, die eine
absolute ,
relative ,
fixed oder
sticky Position haben.
2) Für feste Elemente . Der enthaltende Block ist das Ansichtsfenster, obwohl übergeordnete Elemente mit einer anderen als der
static Position vorhanden sind. Außerdem unterscheidet sich das Bildlaufverhalten von absolut positionierten Elementen. Feste Elemente bleiben im Anzeigebereich „fest“, daher der Name.
Viele Entwickler denken, dass absolut positionierte Elemente nur nach dem nächsten übergeordneten Element mit relativer Positionierungsposition suchen
position: relative . Dieses Missverständnis ist einfach deshalb weit verbreitet, weil
position: relative am häufigsten zusammen mit
position: absolute , um einen enthaltenden Block zu erstellen. Der Grund, warum dies häufig verwendet wird, ist, dass die relative Positionierung des übergeordneten Blocks ihn
im Stream belässt, was häufig bevorzugt wird. Es gibt Situationen, in denen das übergeordnete Element eines absolut positionierten Elements selbst absolut positioniert ist. Das ist völlig normal. Wenn alle übergeordneten Elemente statisch sind, wird ein absolut positioniertes Element an das Ansichtsfenster angehängt, das jedoch zusammen mit dem Ansichtsfenster gescrollt wird.
Es gibt eine wenig bekannte Ergänzung zu den oben genannten Regeln: In Situationen, in denen das übergeordnete Element die
transform (
unter anderem ) mit einem anderen Wert als
none , wird es zu einem enthaltenden Block für absolut und fest positionierte Elemente. Die Bestätigung hierzu ist in CodePen zu sehen, wo das Element mit dem Text "Hinweis!" Ist ein festes Element und das übergeordnete Element verfügt über die Transformationseigenschaft, jedoch nur, wenn sich der Mauszeiger darüber befindet (im Status
:hover ).
Frage 4: Rand der übergeordneten und untergeordneten Elemente reduzieren
Dies ist eines dieser kleinen CSS-Dinge, die viele Probleme verursachen können, wenn Sie nicht wissen, wie es funktioniert. Es gibt ein Konzept, das als Kollapsränder bezeichnet wird, und viele Menschen sind mit der Manifestation dieses Konzepts vertraut, das als Kollapsränder benachbarter Geschwister bezeichnet wird. Es gibt jedoch eine andere Form, die so genannten Collapse-Ränder des Elternteils und des ersten / letzten Kindes, die weniger bekannt ist. Das Folgende ist eine Demonstration beider Fälle:
Jedes Absatz-Tag hat einen oberen und unteren Rand von 1em, der vom Browser festgelegt wird. Bisher ist dies der einfachste Teil der Situation. Aber warum ist der Abstand zwischen den Absätzen nicht 2em (die Summe von oben und unten)? Dies wird als kollabierende Ränder benachbarter Geschwister bezeichnet. Die Ränder überlappen sich so, dass der größere der beiden Ränder die Größe der Lücke hat. In diesem Fall beträgt die Lücke also 1em.
Es passiert jedoch noch etwas Seltsames. Haben Sie bemerkt, dass der obere Rand des ersten Absatzes keine Lücke zwischen ihm und dem blauen Container div schafft? Anstatt zu brechen, scheint es einen Rand in das übergeordnete Div einzubetten, als ob das Div einen oberen Rand hätte. Dies wird als Reduzieren der Ränder des Elternteils und des ersten / letzten Kindes bezeichnet. Diese Art von Kollapsrändern tritt unter bestimmten Umständen nicht auf, wenn Folgendes für das Elternteil charakteristisch ist:
- Es gibt eine obere / untere Polsterung größer als Null
- Es gibt einen oberen / unteren Rand größer als Null
- Es wird ein Blockformatierungskontext angegeben, der mit
overflow: hidden oder overflow: auto
- Anzeige: Flow-Root-Eigenschaftssatz (schlechte Browserunterstützung)
Wenn ich den Leuten gerne dieses kleine CSS-Detail erkläre und es mit Auffüllen oder Rahmen löse, lautet die Antwort fast immer: „Was ist mit Auffüllen oder Rand gleich 0?“. Nun, das funktioniert nicht, weil der Wert eine positive ganze Zahl sein muss.
Im vorherigen Beispiel können wir mit 1px-Auffüllung zwischen dem Verwenden von Reduzieren und dem Verhindern des Reduzierens der Ränder von Eltern und Kind wechseln. Der Abstand zwischen dem ersten / letzten Absatz und dem übergeordneten Absatz beträgt 1 Pixel, aber jetzt wird der Rand als das Innere des Containers betrachtet, da die Polsterschicht eine Barriere bildet, um ein Zusammenfallen der Ränder zu verhindern.
Ich bin mir sicher, dass Sie in dieser Benutzeroberfläche sehen können, wo das Problem liegt:
Das erste Element mit der
.comment Klasse (ohne die
.moderator Klasse)
.moderator Ränder. Auch ohne den Code zu betrachten, können wir sehen, dass das Element mit der
.moderator Klasse einen Rahmen hat und das Element ohne diese Klasse nicht. Es gab tatsächlich drei Antworten auf diese Frage, die als richtig angesehen wurden. Jede von ihnen ist tatsächlich bereits in der CodePen-Quelle angewendet, sie werden nur auskommentiert.
Einer der Gründe, warum diese Art von Kollapsrändern nicht so bekannt ist wie die anderen, ist, dass es viele Situationen gibt, in denen wir sie versehentlich vermeiden können. Flexbox- und Grid-Elemente erstellen einen Blockformatierungskontext. Wenn Sie sie verwenden, treten diese Arten von Reduzierungsrändern nicht auf. Wenn die Schnittstelle unserer Kommentare ein echtes Projekt war, stehen die Chancen gut, dass auf allen vier Seiten Polsterungen angebracht wurden, um Platz zu lassen, und dies hat wiederum den Zusammenbruch der Ränder für uns behoben.
Frage 5: Prozentsatz von was?
Wenn prozentuale Einheiten verwendet werden, basieren Prozentsätze auf der Breite oder Höhe des enthaltenen Blocks (normalerweise des übergeordneten Blocks). Wie bereits erwähnt, wird ein Element mit der
transform Eigenschaft zu einem enthaltenden Block. Wenn das Element also transform verwendet,
die Einheiten in Prozent (nur für die
transform ) auf der eigenen Größe des Elements und nicht auf der übergeordneten Größe.
Im folgenden Beispiel sehen wir, dass 50% je nach Kontext zwei unterschiedliche Werte annehmen. Der erste rote Block hat die Eigenschaft
margin-left: 50% , und der zweite rote Block verwendet
transform: translateX(50%) .
Frage 6: Das Blockmodell schlägt wieder zu ...
Nur Sie dachten, wir hätten das Gespräch über das Blockmodell beendet ...
Das Problem ist auf die Tatsache zurückzuführen, dass wir
width: 100% für die Fußzeile verwenden und gleichzeitig Polster hinzufügen. Die Breite des Containers beträgt 500 Pixel, was bedeutet, dass die Fußzeile (100%) ebenfalls 500 Pixel beträgt, bevor dieser Größe Auffüllungen hinzugefügt werden.
Das Problem kann durch eine von zwei gängigen Techniken behoben werden:
- Verwenden Sie die Box-Sizing-Eigenschaft für die Fußzeile direkt oder über den zuvor genannten Reset
- Entfernen Sie die Eigenschaft
width aus dem Element und verwenden Sie stattdessen die Eigenschaften left: 0 und right: 0 . Dies ist ein gutes Beispiel für die gleichzeitige Verwendung der left und right Eigenschaften. Dieser Ansatz vermeidet die Probleme des Blockmodells, da die width Eigenschaft ihren Standardwert auto , um den verfügbaren Platz zwischen Auffüllung und Rahmen zu füllen, wenn left: 0 und right:0 .
Hinweis: Eine Möglichkeit bestand darin, die Polsterung aus der Fußzeile zu entfernen. Technisch würde dies das Problem beheben, da die Inhaltsschicht zu 100% besteht und keine Auffüllung oder Umrandung aufweist, um über die Breite des Containers hinaus zu expandieren. Ich denke jedoch, dass diese Lösung der falsche Ansatz ist, da wir unsere Schnittstelle nicht ändern müssen, um uns an die Probleme des Blockmodells anzupassen, die ohne sie leicht behoben werden können.
Die Realität für mich ist, dass ich immer die Eigenschaft
box-sizing: border-box als Teil meines allgemeinen Stil-Resets festgelegt habe. Wenn Sie dasselbe tun, tritt dieses Problem höchstwahrscheinlich selten auf. Aber ich mag immer noch die Technik, bei der die Eigenschaften
left:0 und
right:0 gleichzeitig eingestellt werden, da sie, wie die Zeit zeigt, zuverlässiger ist (nach meiner Erfahrung auf jeden Fall), als die Probleme des Blockmodells zu lösen, die aufgrund der Breite auftreten 100%
Frage 7: Absolute und feste Elemente zentrieren
Jetzt fangen wir wirklich an, das gesamte oben beschriebene Material mit der Zentrierung der absoluten und festen Elemente zu kombinieren:
Da wir den größten Teil des Materials in dieser Testfrage bereits behandelt haben, möchte ich lediglich darauf hinweisen, dass die horizontale und vertikale Zentrierung mithilfe der Old-School-Methode durch negative Ränder oder neuer mithilfe der Transformationseigenschaft erfolgen kann. Ich mache Sie auch auf eine ausgezeichnete
Anleitung zur CSS-Tricks-Elementzentrierung aufmerksam .
Hinweis : Vor einiger Zeit wurde argumentiert, dass wir negative Ränder verwenden sollten, wenn wir die Breite und Höhe des Blocks kennen, da diese stabiler funktionieren als die neue Transformationseigenschaft. Im Moment funktioniert die Transformation stabil und ich verwende diese Eigenschaft fast immer, es sei denn, ich muss vermeiden, den Block in den enthaltenden zu konvertieren.
Frage 8: Zentrieren von Elementen in einem normalen Fluss
Flexbox brachte uns viele erstaunliche Werkzeuge, um komplexe Layoutprobleme zu lösen. Vor seiner Veröffentlichung wurde berichtet, dass die vertikale Zentrierung eine der komplexesten Funktionen war, die in CSS implementiert wurden. Mit dem Aufkommen von Flexbox ist die vertikale Zentrierung zur Routine geworden:
.parent { display: flex; } .child { margin: auto; }
https://codepen.io/bradwestfall/pen/GPNmbMHinweis : Beachten Sie, dass bei Flex-Elementen der Rand: auto auf die obere, untere, rechte und linke Seite angewendet wird, um das Element vertikal und horizontal zu zentrieren. Bisher funktionierte die vertikale Zentrierung für Blockelemente nicht, daher ist der
margin: 0 auto; häufig
margin: 0 auto;Frage 9: Berechnungen mit verschiedenen Einheiten
Die Verwendung der Funktion calc () ist ideal, wenn Sie mit zwei Maßeinheiten arbeiten müssen, die wir nicht alleine addieren können, oder wenn wir Brüche
leichter verständlich machen müssen . Diese Testfrage bietet uns die Möglichkeit herauszufinden, wie das Ergebnis des Ausdrucks
calc(100% + 1em) aussehen wird, ausgehend von der Tatsache, dass die Breite des div-Elements 100px beträgt. Dies kann etwas verwirrend sein, da es in der Tat keine Rolle spielt, dass die Breite des div-Elements 100px beträgt. Die Prozentsätze beginnen immer mit der Breite des übergeordneten Elements, daher lautete die richtige Antwort: „100% des enthaltenden (übergeordneten) Blocks plus 1em“.
Es gibt verschiedene Situationen, in denen ich regelmäßig
calc() . Erstens, wann immer ich etwas um 100% verschieben möchte, aber auch eine feste Menge zusätzlichen Speicherplatzes hinzufügen möchte. Dropdown-Menüs können ein gutes Beispiel dafür sein:
Die Besonderheit hierbei ist, dass wir ein Dropdown-Menü erstellen möchten, das zusammen mit den aufrufenden Elementen unterschiedlicher Größe (in diesem Fall zwei verschiedenen Größen von Schaltflächen) verwendet werden kann. Wir wissen nicht, wie hoch das Element sein wird, das dieses Menü aufruft, aber wir wissen, dass
top: 100% den oberen Rand des Dropdown-Menüs am unteren Rand der aufrufenden Schaltfläche platzieren. Sollte sich jedes Menü am unteren Rand der entsprechenden Schaltfläche plus 0,5em befinden, kann dies mit
calc(100% + 0.5em) . Natürlich könnten wir auch
top: 110% , aber diese zusätzlichen 10% würden von der Höhe der Ruftaste und des Containers abhängen.
Frage 10: Negative Margen
Im Gegensatz zu positiven Rändern, die Geschwister abstoßen, ziehen negative Ränder sie näher aneinander,
ohne Geschwister zu verschieben . Diese letzte Testfrage bietet zwei Lösungen, die beide den doppelten Rand in unserer Schaltflächengruppe technisch beseitigen. Ich bevorzuge jedoch die Technik mit negativem Rand, da das Löschen der Frames die Ausführung bestimmter Techniken, wie z. B. des Mouseover-Effekts, erschweren würde.
Der resultierende Effekt ist ein „gemeinsamer Rand“, der zwischen den Schaltflächen angezeigt wird. Tatsächlich können Schaltflächen keinen gemeinsamen Rand haben, daher müssen wir eine Technik mit negativem Rand verwenden, damit ein Frame einen anderen überlappt. Dann benutze ich den
z-index um festzulegen, welcher Frame über einen anderen angepasst werden soll, basierend auf dem Status des Maus-Hovers. Beachten Sie, dass der
z-index hier auch ohne absolute Positionierung nützlich ist, Sie jedoch die
position: relative einstellen mussten. Wenn ich die Technik zum Entfernen des linken Rahmens der zweiten Schaltfläche verwenden würde, wäre dieser Effekt viel schwieriger zu implementieren.
Das alles macht Sinn.
Ich möchte Ihnen eine weitere aktuelle Demo zeigen, die viele der zuvor diskutierten Tricks verwendet. Die Aufgabe besteht darin, Kacheln zu erstellen, die sich unter Berücksichtigung der Einrückung zum linken und rechten Rand des Containers erstrecken. Mit Kacheln meine ich die Möglichkeit, eine Liste von Blöcken zu haben, die in die nächste Zeile umgebrochen werden, wenn nicht genügend Platz in der Breite vorhanden ist. Bewegen Sie den Mauszeiger über die Kacheln, um das Ergebnis zu sehen:
Ein Hindernis bei der Ausführung dieser Aufgabe ist das Einrücken. Ohne Polsterung wäre es einfach, Fliesen neben dem linken und rechten Rand des Behälters zu erhalten. Das Problem ist, dass Einzüge mit Rändern erstellt werden. Wenn wir Ränder auf allen Seiten der Kachel hinzufügen, entstehen zwei Probleme:
- Das Vorhandensein von drei Kacheln mit einer Breite von
33.33% in Verbindung mit dem Rand kann nicht in eine Reihe passen. Obwohl die .tile der .tile es uns ermöglicht, das .tile Element mit .tile und Rändern zu .tile und in 33.33% passen, hilft uns dies bei Rändern nicht weiter. Dies bedeutet, dass die berechnete Breite der drei Kacheln mehr als 100% .tile , wodurch die letzte Kachel gezwungen wird, zur nächsten zu wechseln Zeichenfolge.
- Die linken und rechten Kacheln liegen nicht mehr am Rand des Behälters an.
Das erste Problem kann mit gelöst werden calc((100% / 3) - 1em). Dies bedeutet 33,33% abzüglich des linken und rechten Randes jeder Kachel. Der Zusammenbruch benachbarter Schwesterelemente tritt hier nicht auf, da dies nur am oberen und unteren Rand möglich ist. Infolgedessen ist der horizontale Abstand zwischen zwei Kacheln die Summe zweier Ränder (1em). In diesem Fall gilt der Zusammenbruch auch nicht für den oberen und unteren Rand, da die erste und die letzte Kachel technisch nicht benachbart sind, auch wenn sich optisch eine unter der anderen befindet.Mit nehmencalc()Drei Kacheln können in eine Reihe passen, berühren jedoch immer noch nicht die Ränder des Behälters. Dazu können wir negative Ränder in der Größe verwenden, die dem linken und rechten Rand jeder Kachel entspricht. Die grün gepunktete Linie im Beispiel ist ein Container, in dem wir negative Ränder anwenden, um Kacheln zu zeichnen, die dem Rand des umgebenden Inhalts entsprechen. Wir können sehen, wie sie in den Auffüllbereich des übergeordneten Elements passen. Dies ist normal, da negative Ränder umgebende benachbarte Elemente nicht abstoßen.Als Ergebnis erhalten wir Kacheln mit ausreichenden Abständen, die sich von Kante zu Kante ausdehnen, sodass sie an benachbarten Absatz-Tags außerhalb der Kacheln ausgerichtet sind.Es gibt viele Möglichkeiten, Fliesen herzustellen (und normalerweise haben sie ihre Vor- und Nachteile). Zum Beispiel gibt es eine ziemlich elegante CSS-Grid-Lösung , über die Haydon Pickering gesprochen hat. Diese Lösung wird mithilfe einer Technik implementiert, die Anforderungen für Container simuliert (jedoch mithilfe von Grid Magic). Letztendlich ist seine Lösung mit Grid besser als die Flexbox, die ich demonstriert habe, aber eine schlechtere Browserunterstützung hat.Zusammenfassung
Am Anfang gab ich an, dass ich geneigt war, nach Mustern bei der Lösung von Problemen zu suchen. In diesem Artikel geht es nicht so sehr um die oben gezeigten Szenarien. Es geht mehr um eine Reihe von Werkzeugen, mit denen diese und viele andere Satzprobleme gelöst werden können, mit denen wir alle konfrontiert sind. Ich hoffe, diese Tools helfen Ihnen.Übrigens gibt es eine Reihe hervorragender Ressourcen, die das Thema des Blockmodells sorgfältig untersuchen. Zunächst Artikel von Rachel Andrew und Jen Simmons, die auf jeden Fall lesenswert sind.- Box Alignment Cheatsheet ist ein großartiges Material mit visuellen Elementen, die verschiedene Eigenschaften hervorheben, die sich darauf auswirken, wie die Elemente entweder alleine oder relativ zu anderen Elementen ausgerichtet werden.
- Jen Simmons Labs — , .