Layout

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:

1. Sie können dieses Element beliebig positionieren. Verwenden Sie dazu top, right, bottom und left im nächstgelegenen relativen übergeordneten Element.
2. 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