CSS-Podcast – 009: Layout
Stellen Sie sich vor, Sie arbeiten und ein Designteam überreicht Ihnen ein Design für eine ganz neue Website. Das Design zeichnet sich durch viele verschiedene interessante Layouts und Kompositionen aus: zweidimensionale Layouts unter Berücksichtigung der Breite und Höhe des Darstellungsbereichs. sowie Layouts, die fließend und flexibel sein müssen. Wie entscheiden Sie, wie Sie diese am besten mit CSS gestalten?
CSS bietet uns verschiedene Möglichkeiten, Layoutprobleme zu lösen. auf einer horizontalen Achse, einer vertikalen Achse oder sogar beidem. Es kann schwierig sein, die richtige Layoutmethode für einen Kontext auszuwählen. und häufig benötigen Sie mehr als eine Layoutmethode, um Ihr Problem zu lösen. In den folgenden Modulen erfahren Sie, lernen Sie die einzigartigen Funktionen jedes CSS-Layoutmechanismus kennen, um fundierte Entscheidungen zu treffen.
Layout: Ein kurzer Verlauf
In den Anfängen des Webs
Designs, die komplexer als ein einfaches Dokument sind, mit <table>
-Elementen angeordnet sind.
Das Trennen von HTML von visuellen Stilen wurde vereinfacht, als CSS in den späten 90er-Jahren von Browsern weit verbreitet wurde.
Mit CSS konnten Entwickler das Erscheinungsbild einer Website komplett ändern, ohne HTML jemals berühren zu müssen.
Diese neue Funktion diente als Inspiration für Projekte wie The CSS Zen Garden,
das entwickelt wurde, um zu zeigen, wie leistungsfähig CSS ist, um mehr Entwickler zu ermutigen, sich mit CSS vertraut zu machen.
CSS hat sich weiterentwickelt, da sich auch unsere Anforderungen an Webdesign und Browsertechnologie weiterentwickelt haben. Sie können lesen, wie sich das CSS-Layout und unser Layout-Ansatz mit der Zeit weiterentwickelt haben: in diesem Artikel von Rachel Andrew beschrieben.
Layout: Gegenwart und Zukunft
Modernes CSS bietet außergewöhnlich leistungsstarke Layout-Tools. Wir haben spezielle Layout-Systeme und werden einen allgemeinen Überblick erhalten. bevor wir uns in den nächsten Modulen genauer mit Flexbox und Grid befassen.
Informationen zum Attribut display
Die Eigenschaft display
erfüllt zwei Dinge.
Zunächst stellt er fest, ob das Kästchen, auf das es angewendet wird, als Inline oder Block agiert.
.my-element {
display: inline;
}
Inline-Elemente verhalten sich wie Wörter in einem Satz.
Sie sind in der Inline-Richtung nebeneinander platziert.
Elemente wie <span>
und <strong>
die in der Regel verwendet werden, um Textelemente in Elementen wie <p>
(Absatz),
sind standardmäßig inline.
Auch der umgebende Leerraum wird beibehalten.
Sie können für Inline-Elemente keine explizite Breite und Höhe festlegen. Alle Ränder und Abstände auf Blockebene werden von den umgebenden Elementen ignoriert.
.my-element {
display: block;
}
Blockelemente stehen nicht nebeneinander. Sie erstellt eine neue Zeile für sich selbst. Sofern nicht durch einen anderen CSS-Code geändert, wird ein Blockelement auf die Inline-Dimension erweitert. decken also die gesamte Breite im horizontalen Schreibmodus ab. Die Ränder auf allen Seiten eines Blockelements werden berücksichtigt.
.my-element {
display: flex;
}
Das Attribut display
bestimmt außerdem, wie sich die untergeordneten Elemente verhalten sollen.
Beispiel:
Wenn Sie die Eigenschaft display
auf display: flex
setzen, wird das Feld zu einem Feld auf Blockebene.
und konvertiert auch seine untergeordneten Elemente in Flex-Elemente.
Dadurch werden die flexiblen Eigenschaften aktiviert, mit denen Ausrichtung, Reihenfolge und Ablauf gesteuert werden.
Flexbox und Raster
Es gibt zwei grundlegende Layoutmechanismen, die Layoutregeln für mehrere Elemente erstellen: die Flexbox und das Raster. Sie haben Ähnlichkeiten, wurden jedoch entwickelt, um verschiedene Layoutprobleme zu lösen.
Flexbox
.my-element {
display: flex;
}
Flexbox ist ein Layout-Mechanismus für eindimensionale Layouts. Layout über eine einzelne Achse, entweder horizontal oder vertikal Standardmäßig richtet die Flexbox die untergeordneten Elemente aneinander aus. nicht in die Inline-Richtung, und dehnen Sie sie in Blockrichtung, sodass sie alle die gleiche Höhe haben.
Die Elemente bleiben auf derselben Achse und werden nicht umgebrochen, wenn kein Speicherplatz mehr vorhanden ist.
Stattdessen versuchen sie, sich auf derselben Linie zu bewegen.
Dieses Verhalten kann mit den Properties align-items
, justify-content
und flex-wrap
geändert werden.
Flexbox konvertiert auch die untergeordneten Elemente in Flex-Elemente.
Das bedeutet, dass Sie Regeln für deren Verhalten in einem flexiblen Container schreiben können.
Sie können die Ausrichtung, Reihenfolge und Begründung eines einzelnen Elements ändern.
Mit dem Attribut flex
können Sie auch ändern, wie es verkleinert oder vergrößert wird.
.my-element div {
flex: 1 0 auto;
}
Die Eigenschaft flex
ist eine Abkürzung für flex-grow
, flex-shrink
und flex-basis
.
Sie können das obige Beispiel wie folgt erweitern:
.my-element div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Entwickler stellen diese Low-Level-Regeln bereit, um einem Browser anzuzeigen, wie sich das Layout verhalten soll. Abmessungen von Inhalt und Darstellungsbereich ergeben. Dies macht sie zu einem sehr nützlichen Mechanismus für responsives Webdesign.
Raster
.my-element {
display: grid;
}
Das Raster ähnelt in vielerlei Hinsicht der Flexbox, Er wurde jedoch entwickelt, um mehrachsige Layouts anstelle von einachsigen Layouts (vertikal oder horizontal) zu steuern.
Mit einem Raster können Sie Layoutregeln für ein Element mit display: grid
,
und es werden einige
neue Grundfunktionen für Layout-Stile,
z. B. die Funktionen repeat()
und minmax()
.
Eine nützliche Rastereinheit ist die fr
-Einheit – ein Bruchteil des verbleibenden Platzes – Sie können herkömmliche 12-Spalten-Raster erstellen.
mit einer Lücke zwischen den einzelnen Elementen, mit drei CSS-Eigenschaften:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
Das obige Beispiel zeigt ein einachsiges Layout. Dabei behandelt die Flexbox Elemente meist als Gruppe, können Sie die Platzierung genau in zwei Dimensionen festlegen. Wir könnten definieren, dass das erste Element in diesem Raster zwei Zeilen und drei Spalten umfasst:
.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}
Mit den Attributen grid-row
und grid-column
wird festgelegt, dass sich das erste Element im Raster bis zum Anfang der vierten Spalte erstreckt.
von der ersten Spalte aus und erstrecken sich dann
von der ersten Zeile bis zur dritten Zeile.
Ablauflayout
Wenn Sie weder Raster noch Flexbox verwenden, werden Ihre Elemente in normalem Fluss angezeigt. Es gibt eine Reihe von Layoutmethoden, mit denen Sie das Verhalten und die Position von Elementen im normalen Fluss anpassen können.
Inline-Block
Denken Sie daran, dass umgebende Elemente den Blockrand und die Abstände von Inline-Elementen nicht berücksichtigen.
Mit inline-block
können Sie dies verursachen.
p span {
display: inline-block;
}
Mit inline-block
erhalten Sie ein Feld mit einigen der Eigenschaften eines Elements auf Blockebene.
aber trotzdem nahtlos in den Text einfließen.
p span {
margin-top: 0.5rem;
}
Float
Wenn Sie ein Bild haben, das sich innerhalb eines Textabsatzes befindet, Wäre es nicht praktisch, wenn der Text das Bild umfließt, wie man es in einer Zeitung sehen könnte? Dazu können Sie Gleitkommazahlen verwenden.
img {
float: left;
margin-right: 1em;
}
Mit der Eigenschaft float
wird ein Element angewiesen, in die angegebene Richtung.
Das Bild in diesem Beispiel schwebt nach links,
Dadurch können gleichgeordnete Elemente drum herum.
Sie können ein Element anweisen, left
, right
oder inherit
als Gleitkommazahl festzulegen.
Mehrspaltiges Layout
Bei einer sehr langen Liste von Elementen z. B. eine Liste aller Länder der Welt, kann das zu viel Scrollen und Zeitverschwendung für den Nutzer führen. Es kann auch zu überflüssigem Leerraum auf der Seite kommen. Mit „CSS Multicolumn“ können Sie dies in mehrere Spalten aufteilen, um diese beiden Probleme zu beheben.
<h1>All countries</h1>
<ul class="countries">
<li>Argentina</li>
<li>Aland Islands</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
…
</ul>
.countries {
column-count: 2;
column-gap: 1em;
}
Diese lange Liste wird automatisch in zwei Spalten aufgeteilt und eine Lücke zwischen den beiden Spalten hinzugefügt.
.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}
Anstatt die Anzahl der Spalten festzulegen,
in die der Inhalt aufgeteilt wird,
Mit column-width
können Sie auch eine gewünschte Mindestbreite festlegen.
Wenn im Darstellungsbereich mehr Platz verfügbar ist,
werden automatisch mehr Spalten erstellt.
werden auch verkleinert.
Dies ist im Kontext von responsivem Webdesign sehr nützlich.
Positionierung
Der letzte Überblick über die Layoutmechanismen ist die Positionierung.
Mit dem Attribut position
können Sie festlegen, wie sich ein Element im normalen Ablauf des Dokuments verhält.
und wie es mit anderen Elementen zusammenhängt.
Die verfügbaren Optionen sind relative
, absolute
, fixed
und sticky
. Der Standardwert ist static
.
.my-element {
position: relative;
top: 10px;
}
Dieses Element wird basierend auf seiner aktuellen Position im Dokument um 10 Pixel nach unten verschoben.
da es relativ zu sich selbst positioniert ist.
Wenn Sie einem Element position: relative
hinzufügen, wird es auch zum enthaltenden Block aller untergeordneten Elemente mit position: absolute
.
Das bedeutet, dass das untergeordnete Element jetzt
an dieses bestimmte Element verschoben wird.
anstelle des obersten relativen übergeordneten Elements verwendet, wenn darauf eine absolute Position angewendet wird.
.my-element {
position: relative;
width: 100px;
height: 100px;
}
.another-element {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}
Wenn Sie position
auf absolute
setzen, gilt Folgendes:
Dadurch wird das Element aus dem aktuellen Dokumentfluss entfernt.
Daraus ergeben sich zwei Dinge:
- Sie können dieses Element beliebig positionieren. Verwenden Sie dazu
top
,right
,bottom
undleft
im nächstgelegenen relativen übergeordneten Element. - Der gesamte Inhalt, der ein absolutes Element umgibt, wird neu angeordnet, um den von diesem Element verbleibenden Platz zu füllen.
Ein Element mit dem position
-Wert fixed
verhält sich ähnlich wie absolute
,
wobei das übergeordnete Element das Stammelement <html>
ist.
Elemente mit fester Position bleiben basierend auf den von Ihnen festgelegten Werten für top
, right
, bottom
und left
von oben links verankert.
Sie können verankerte,
feste Aspekte von fixed
und die besser vorhersehbaren Aspekte von relative
zur Berücksichtigung des Dokumentflusses mithilfe von sticky
.
Wenn bei diesem Wert der Darstellungsbereich am Element vorbeiscrollt,
bleibt in den von Ihnen festgelegten Werten top
, right
, bottom
und left
verankert.
Zusammenfassung
Das CSS-Layout bietet eine große Auswahl und Flexibilität. Wenn Sie die Leistungsfähigkeit von CSS-Flexbox und Grid genauer kennenlernen möchten, fahren Sie mit den nächsten Modulen fort.
Wissen testen
Testen Sie Ihr Wissen über Layout
Welche zwei Aufgaben erfüllt die Property display
?
inline
, block
oder none
.Welche CSS-Eigenschaft eignet sich am besten zum Fließen mehrerer Absätze in Spalten? für diese Aufgabe?
display: flex
float
column-count
display: grid
Was bedeutet es, wenn ein Block außerhalb des Flows liegt?
top
oder left
erhalten.Flexbox und Grid verpacken ihre untergeordneten Elemente standardmäßig?