The CSS Podcast – 009: Layout
Stellen Sie sich vor, Sie arbeiten als Entwickelnde und ein Kollege aus dem Design übergibt Ihnen das Design für eine völlig neue Website. Das Design bietet verschiedenste interessante Layouts und Zusammenstellungen: zweidimensionale Layouts, die die Breite und Höhe des Darstellungsbereichs berücksichtigen, sowie Layouts, die fließend und flexibel sein müssen. Wie entscheiden Sie, wie Sie diese am besten mit CSS gestalten?
CSS bietet verschiedene Möglichkeiten zur Lösung von Layoutproblemen, auf einer horizontalen und/oder vertikalen Achse. Es kann schwierig sein, die richtige Layoutmethode für einen Kontext auszuwählen, und oft benötigen Sie möglicherweise mehr als eine Layoutmethode, um Ihr Problem zu lösen. Zu diesem Zweck erfahren Sie in den folgenden Modulen mehr über die einzigartigen Funktionen der einzelnen CSS-Layoutmechanismen.
Layout: Ein kurzer Rückblick
In den Anfängen des Webs waren Designs mit <table>-Elementen komplexer als ein einfaches Dokument.
Die Trennung von HTML-Code von visuellen Stilen war einfacher, als CSS in den späten 90ern in Browsern häufig verwendet wurde.
Dank CSS konnten Entwickler das Design einer Website komplett ändern, ohne HTML-Elemente zu verwenden.
Diese neue Funktion diente als Inspiration für Projekte wie The CSS Zen Garden, in denen die Leistungsfähigkeit von CSS demonstriert werden soll, um mehr Entwickler zum Erlernen dieser Funktion anzuregen.
CSS hat sich weiterentwickelt, da sich auch unsere Anforderungen an Webdesign und Browsertechnologie weiterentwickelt haben. In diesem Artikel von Rachel Andrew können Sie nachlesen, wie sich das CSS-Layout und unser Layout-Ansatz im Laufe der Zeit weiterentwickelt haben.
Layout: Gegenwart und Zukunft
Moderner CSS-Code bietet außergewöhnlich leistungsstarke Layout-Tools. Wir haben spezielle Layoutsysteme und wir werden uns kurz ansehen, was uns zur Verfügung steht, bevor wir uns in den nächsten Modulen genauer mit Flexbox und Grid beschäftigen.
Informationen zum Attribut display
Das Attribut display hat zwei Aufgaben:
Zuerst wird ermittelt, ob das Feld, auf das es angewendet wird, als Inline- oder Blockelement fungiert.
.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 wie <p> (Absatz) zu formatieren, sind standardmäßig inline.
Auch der umgebende Leerraum wird beibehalten.
Sie können die Breite und Höhe für Inline-Elemente nicht explizit festlegen. Rand und Abstände auf Blockebene werden von den umgebenden Elementen ignoriert.
.my-element {
display: block;
}
Block-Elemente sind nicht nebeneinander platziert. Sie erstellt eine neue Zeile für sich selbst. Ein Blockelement wird auf die Größe der Inline-Dimension erweitert und erstreckt sich somit in einem horizontalen Schreibmodus über die volle Breite, sofern dies nicht durch anderen CSS-Code geändert wurde. Der Rand auf allen Seiten des Blockelements wird berücksichtigt.
.my-element {
display: flex;
}
Das Attribut display bestimmt auch, wie sich die untergeordneten Elemente eines Elements verhalten sollen.
Wenn Sie beispielsweise das Attribut display auf display: flex setzen, wird das Feld zu einem Feld auf Blockebene. Die untergeordneten Elemente werden außerdem in Flex-Elemente konvertiert.
Dadurch werden die flexiblen Eigenschaften aktiviert, die Ausrichtung, Reihenfolge und Ablauf steuern.
Flexbox und Raster
Es gibt zwei Hauptlayoutmechanismen, mit denen Layoutregeln für mehrere Elemente erstellt werden: Flexbox und grid. Sie haben Gemeinsamkeiten, aber sie wurden entwickelt, um verschiedene Layoutprobleme zu lösen.
Flexbox
.my-element {
display: flex;
}
Flexbox ist ein Layoutmechanismus für eindimensionale Layouts. Layout über eine einzelne Achse, entweder horizontal oder vertikal. Standardmäßig richtet die Flexbox die untergeordneten Elemente des Elements in Inline-Richtung nebeneinander aus und dehnt sie in Blockrichtung, sodass sie alle die gleiche Höhe haben.
Elemente bleiben auf derselben Achse und werden nicht umgebrochen, wenn der Platz ausgeht.
Stattdessen versuchen sie, sich auf dieselbe Zeile zu drängen.
Dieses Verhalten kann mit den Properties align-items, justify-content und flex-wrap geändert werden.
Flexbox wandelt außerdem die untergeordneten Elemente in Flex-Elemente um, d. h., Sie können Regeln für das Verhalten dieser Elemente in einem Flex-Container schreiben.
Sie können die Ausrichtung, Reihenfolge und Ausrichtung eines einzelnen Elements ändern.
Mit dem Attribut flex können Sie auch ändern, wie der Wert verkleinert oder vergrößert wird.
.my-element div {
flex: 1 0 auto;
}
Das Attribut flex ist eine Abkürzung für flex-grow, flex-shrink und flex-basis.
Sie können das Beispiel oben wie folgt erweitern:
.my-element div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Entwickler stellen diese untergeordneten Regeln bereit, um einem Browser mitzuteilen, wie sich das Layout verhalten soll, wenn es durch die Abmessungen des Inhalts und des Darstellungsbereichs beeinträchtigt wird. 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, ist jedoch für die Steuerung von Layouts mit mehreren Achsen anstelle von Layouts mit einer Achse (vertikaler oder horizontaler Raum) gedacht.
Mit „Raster“ können Sie Layoutregeln für ein Element mit display: grid schreiben. Außerdem werden einige neue Primitive für die Gestaltung von Layouts eingeführt, z. B. die Funktionen repeat() und minmax().
Eine nützliche Rastereinheit ist die fr-Einheit, die einen Bruchteil des verbleibenden Platzes darstellt. Sie können herkömmliche 12-Spalten-Raster mit drei CSS-Eigenschaften mit einer Lücke zwischen den einzelnen Elementen erstellen:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
Das obige Beispiel zeigt ein Layout mit einer einzelnen Achse. Während bei der Flexbox meist Elemente als Gruppe behandelt werden, können Sie mit dem Raster die Platzierung in zwei Dimensionen präzise steuern. Wir könnten definieren, dass das erste Element in diesem Raster 2 Zeilen und 3 Spalten einnimmt:
.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}
Mit den Eigenschaften grid-row und grid-column wird das erste Element im Raster angewiesen, sich von der ersten Spalte bis zum Anfang der vierten Spalte zu erstrecken und sich dann von der ersten Zeile bis zur dritten Zeile zu erstrecken.
Flow-Layout
Wenn Sie kein Raster oder eine Flexbox verwenden, werden die Elemente im normalen Ablauf angezeigt. Es gibt eine Reihe von Layoutmethoden, mit denen Sie das Verhalten und die Position von Elementen im normalen Ablauf anpassen können.
Inline-Block
Denken Sie daran, dass umgebende Elemente den Blockrand und den Abstand in einem Inline-Element nicht berücksichtigen.
Mit inline-block können Sie dies verhindern.
p span {
display: inline-block;
}
Mit inline-block erhalten Sie ein Feld, das einige Eigenschaften eines Elements auf Blockebene hat, aber trotzdem inline in den Text fließt.
p span {
margin-top: 0.5rem;
}
Float
Wäre es nicht praktisch, wenn der Text in einem Textabsatz das Bild umfließt, wie Sie es vielleicht in einer Zeitung sehen? Dazu können Sie Gleitkommazahlen verwenden.
img {
float: left;
margin-right: 1em;
}
Das Attribut float weist ein Element an, in die angegebene Richtung zu schweben.
Das Bild in diesem Beispiel wird angewiesen, nach links zu schweben, sodass gleichgeordnete Elemente es „umschließen“ können.
Sie können ein Element anweisen, left, right oder inherit als unverankert zu schweben.
Mehrspaltiges Layout
Wenn Sie eine sehr lange Liste von Elementen haben, z. B. eine Liste aller Länder der Welt, kann dies viel durch Scrollen und Zeitverschwendung für den Nutzer nach sich ziehen. Es kann auch zu überflüssiger Leerstellen auf der Seite kommen. Wenn Sie den CSS-Code „mehrspaltig“ verwenden, können Sie ihn in mehrere Spalten aufteilen, um beide 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;
}
Dadurch wird die lange Liste automatisch in zwei Spalten aufgeteilt und es entsteht eine Lücke zwischen den beiden Spalten.
.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}
Anstatt die Anzahl der Spalten festzulegen, in die der Inhalt aufgeteilt wird, können Sie mit column-width auch eine gewünschte Mindestbreite definieren.
Je mehr Platz im Darstellungsbereich verfügbar ist, desto mehr Spalten werden automatisch erstellt. Mit zunehmendem Platz werden auch die Spalten reduziert.
Dies ist beim responsiven Webdesign sehr nützlich.
Positioning
Der letzte Überblick über Layout-Mechanismen ist die Positionierung.
Das Attribut position ändert das Verhalten eines Elements beim normalen Ablauf des Dokuments und die Beziehung zu anderen Elementen.
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 in diesem speziellen Element neu positioniert wird und nicht zum obersten relativen übergeordneten Element, wenn es eine absolute Position hat.
.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 festlegen, wird das Element aus dem aktuellen Dokumentablauf entfernt.
Das bedeutet zwei Dinge:
- Sie können dieses Element an einer beliebigen Position platzieren, indem Sie
top,right,bottomundleftim nächstgelegenen relativen übergeordneten Element verwenden. - Der gesamte Inhalt, der ein absolutes Element umgibt, wird automatisch angepasst, um den verbleibenden Platz zu füllen, der von diesem Element übrig bleibt.
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.
Mit sticky können Sie die verankerten, festen Aspekte von fixed und die besser vorhersehbaren Aspekte von relative erreichen, die den Dokumentfluss berücksichtigen.
Wenn der Darstellungsbereich bei diesem Wert am Element vorbeiscrollt, bleibt er an den von Ihnen festgelegten top-, right-, bottom- und left-Werten verankert.
Zusammenfassung
Das CSS-Layout bietet eine große Auswahl und Flexibilität. In den nächsten Modulen erfahren Sie mehr über die leistungsstarken Funktionen von CSS Flexbox und Grid.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Layout
Was macht die Property display?
inline, block oder none fest.overflow.Welche CSS-Eigenschaft eignet sich am besten für diese Aufgabe, um mehrere Absätze in Spalten aufzuteilen?
display: gridcolumn-countdisplay: flexfloatWas bedeutet es, wenn ein Block außerhalb des Flusses liegt?
top oder left zugewiesen.position: absolute wird jetzt beispielsweise mit x- und y-Koordinaten basierend auf dem enthaltenen Block positioniert und nicht auf der Reihenfolge mit anderen gleichgeordneten Elementen.Flexbox und Grid verpacken ihre untergeordneten Elemente standardmäßig?
flex-wrap: wrap oder repeat(auto-fit, 30ch) aktiviert werden.